![]() | ||||||||||
| ||||||||||
You can read a breaf tutorial here.
CodeThatTab is an advanced JavaScript tab control (page control) that fully mimics look and the functionality of the tab control found in Windows GUI specifications and serves the same purpose. Use CodeThatTab to create a multiple page form within the same window. CodeThatTab displays multiple overlapping pages that hold various content. The user selects a page by clicking the page’s tab that appears at the top of the control (or in the other configured position). The main features of the CodeThatTab JavaScript tab control include:
Most of configuration parameters are optional and a simple JavaScript configuration may look like this: var TabDef = { "x" : 10, "y" : 10, //start position of tab "width" : 450, "height" : 100, //width and height "offset": 10, //offset for a first tab "spacing": 5, //spacing between tabs "padding" : 5, //padding for text at page "layout" : "top", //top, bottom, right, left "align" : "center", //center, right, left "css" : "common", "cssover": "over", "csscurr": "current", "csshint": "hint", "border" : {"width":1, "color": "#000000"}, "tabs": [ { "text" : "My Tab", //tab text "hint" : "Here you can read about CodeThatTab using", //tab hint "css" : "common1", "cssover": "over1", "csscurr": "current1", "csshint": "hint1", "width" : 150, "height": 20 }, ... ] } Code to create the tab control may look like this: var ts = new CTabSet("ts"); ts.create(TabDef); The tab control will look on a web page like this:
General structure of the configuration is var TabDef = { "x": int "y": int "width" : int "height" : int "offset" : int "padding": int "spacing": int "align": String "layout": String "border" : { }, "css" : String, "cssover" : String, "csscurr" : String, "csshint" : String, "tabs" : [] }; Properties x,y defines position of tab control. These properties are required for old browsers to place the CodeThatTab. Width and height define width and height of tab control, offset defines offset for a first tab, spacing defines spacing between tabs, padding defines padding for hint. Align parameter defines align text within tab. Layout parameter defines location of tabs in tab control. Css, cssover, csscurr, csshint and border attributes define look of the tab control and tabs define tab structure. The tabs array consists of tab object with following structure: { "text" : String, "hint" : String, "action" : {}, "width" : int, "height" : int, "border" : {}, "css" : String, "cssover" : String, "csscurr" : String, "csshint" : String } Css, cssover, csscurr, csshint and border attributes define look of the tab (see Tab look), width and height define the size of tab, action defines the action to be performed with mouse click, mouse over and mouse out events (see Tab behavior). Read more about CodeThatTab >>
|