YouTip markup. Each tab panel is created by a child
markup, which is used the same as the panel.
2. Creating Tabs Programmatically
Now we create tabs programmatically, and we also capture the 'onSelect' event.
$('#tt').tabs({ border:false, onSelect:function(title){alert(title+' is selected'); }});
#### Adding a New Tab Panel
Add a new tab panel via the mini tools, the mini tools icons (8x8) are placed before the close button.
// Add a new tab panel $('#tt').tabs('add',{ title:'New Tab', content:'Tab Body', closable:true, tools:[{iconCls:'icon-mini-refresh',handler:function(){alert('refresh');} }]});
#### Get the Selected Tab
// Get the selected tab panel and its tab objectvar pp = $('#tt').tabs('getSelected');var tab = pp.panel('options').tab; // the corresponding tab object
## Properties
| Name | Type | Description | Default |
| --- | --- | --- | --- |
| width | number | The width of the tabs container. | auto |
| height | number | The height of the tabs container. | auto |
| plain | boolean | When set to true, the tab bar will not show background container image. | false |
| fit | boolean | When set to true, the tabs container will set its size to fit its parent container. | false |
| border | boolean | When set to true, show the tabs container border. | true |
| scrollIncrement | number | The number of pixels to scroll each time a tab scroll button is pressed. | 100 |
| scrollDuration | number | The number of milliseconds for each scroll animation. | 400 |
| tools | array,selector | The toolbar placed at the left or right side of the header. Possible values: 1. An array, indicates the tool group, each tool option is the same as linkbutton. 2. A selector, indicates the
that contains the tools. Code example: Define tools via array. $('#tt').tabs({tools:[{iconCls:'icon-add',handler:function(){alert('add')}},{iconCls:'icon-save',handler:function(){alert('save')}}]}); Define tools via existing DOM container. $('#tt').tabs({tools:'#tab-tools'}); | null |
| toolPosition | string | The toolbar position. Possible values: 'left', 'right'. This property is available since version 1.3.2. | right |
| tabPosition | string | The tab position. Possible values: 'top', 'bottom', 'left', 'right'. This property is available since version 1.3.2. | top |
| headerWidth | number | The tab header width, only effective when tabPosition is set to 'left' or 'right'. This property is available since version 1.3.2. | 150 |
| tabWidth | number | The tab bar width. This property is available since version 1.3.4. | auto |
| tabHeight | number | The tab bar height. This property is available since version 1.3.4. | 27 |
| selected | number | The index of the selected tab. This property is available since version 1.3.5. | 0 |
| showHeader | boolean | When set to true, show the tab header. This property is available since version 1.3.5. | true |
## Events
| Name | Parameters | Description |
| --- | --- | --- |
| onLoad | panel | Fires when an ajax tab panel finish loading remote data. |
| onSelect | title,index | Fires when user select a tab panel. |
| onUnselect | title,index | Fires when user unselect a tab panel. This event is available since version 1.3.5. |
| onBeforeClose | title,index | Fires before a tab panel is closed, return false to cancel the close action. The following example shows how to display a confirm dialog before closing a tab panel. $('#tt').tabs({ onBeforeClose: function(title){return confirm('Are you sure you want to close ' + title); }});// using the async confirm dialog $('#tt').tabs({ onBeforeClose: function(title,index){var target = this;$.messager.confirm('Confirm','Are you sure you want to close '+title,function(r){if (r){var opts = $(target).tabs('options');var bc = opts.onBeforeClose;opts.onBeforeClose = function(){}; // allowed to close now$(target).tabs('close',index);opts.onBeforeClose = bc; // restore the event function}});return false;// prevent from closing }}); |
| onClose | title,index | Fires when user close a tab panel. |
| onAdd | title,index | Fires when a new tab panel is added. |
| onUpdate | title,index | Fires when a tab panel is updated. |
| onContextMenu | e, title,index | Fires when a tab panel is right-clicked. |
## Methods
| Name | Parameters | Description |
| --- | --- | --- |
| options | none | Return the tabs options. |
| tabs | none | Return all the tab panels. |
| resize | none | Resize the tabs container and do layout. |
| add | options | Add a new tab panel, the options parameter is a configuration object, see tab panel properties for more details. When adding a new tab panel, it will be selected. To add an unselected tab panel, remember to set the 'selected' property to false. // add a unselected tab panel $('#tt').tabs('add',{title: 'new tab',selected: false//...}); |
| close | which | Close a tab panel, the 'which' parameter can be the title or index of the tab panel to be closed. |
| getTab | which | Get the specified tab panel, the 'which' parameter can be the title or index of the tab panel. |
| getTabIndex | tab | Get the specified tab panel index. |
| getSelected | none | Get the selected tab panel. The following example shows how to get the index of the selected tab panel. var tab = $('#tt').tabs('getSelected');var index = $('#tt').tabs('getTabIndex',tab); alert(index); |
| select | which | Select a tab panel, the 'which' parameter can be the title or index of the tab panel. |
| unselect | which | Unselect a tab panel, the 'which' parameter can be the title or index of the tab panel. This method is available since version 1.3.5. |
| showHeader | none | Show the tabs header. This method is available since version 1.3.5. |
| hideHeader | none | Hide the tabs header. This method is available since version 1.3.5. |
| exists | which | Indicate whether the specified panel exists, the 'which' parameter can be the title or index of the tab panel. |
| update | param | Update the specified tab panel, param parameter contains two properties: tab: the tab panel to be updated. options: the panel options. Code example: // update the selected panel with new title and contentvar tab = $('#tt').tabs('getSelected'); // get selected panel $('#tt').tabs('update', {tab: tab,options: {title: 'New Title',href: 'get_content.php' // the new content URL}});// call 'refresh' method for tab panel to update its contentvar tab = $('#tt').tabs('getSelected'); // get selected panel tab.panel('refresh', 'get_content.php'); |
| enableTab | which | Enable the specified tab panel, the 'which' parameter can be the title or index of the tab panel. This method is available since version 1.3. Code example: $('#tt').tabs('enableTab', 1);// enable the second tab panel $('#tt').tabs('enableTab', 'Tab2');enable the tab panel that has 'Tab2' title |
| disableTab | which | Disable the specified tab panel, the 'which' parameter can be the title or index of the tab panel. This method is available since version 1.3. Code example: $('#tt').tabs('disableTab', 1);// disable the second tab panel. |
| scrollBy | deltaX | Scroll the tab header by the specified pixels, negative value means scrolling the tab header to left, positive value means scrolling the tab header to right. This method is available since version 1.3.2. Code example: // scroll the tab header to left $('#tt').tabs('scroll', 10); |
## Tab Panel
The tab panel properties are defined in the panel component, below are some commonly used properties.
| Name | Type | Description | Default |
| --- | --- | --- | --- |
| id | string | The id attribute of the tab panel. | null |
| title | string | The tab panel title text. | |
| content | string | The tab panel content. | |
| href | string | A URL to load remote content to fill the tab panel. | null |
| cache | boolean | When set to true, cache the tab panel if a valid href is set. | true |
| iconCls | string | A CSS class to display icon on tab panel header. | null |
| width | number | The tab panel width. | auto |
| height | number | The tab panel height. | auto |
| collapsible | boolean | When set to true, allows the tab panel to be collapsible. | false |
Some additional properties.
| Name | Type | Description | Default |
| --- | --- | --- | --- |
| closable | boolean | When set to true, the tab panel will display a close button, click it can close the tab panel. | false |
| selected | boolean | When set to true, the tab panel will be selected. | false |
* * jQuery EasyUI Plugin](#)