Jquery Easyui Tab component Tab usage (10), jqueryeasyui

Jquery Easyui Tab component Tab usage (10), jqueryeasyui

The implementation code of the Jquery Easyui tab component is provided in this example for your reference. The details are as follows:

Loading Method

Class Loading

<div class="easyui-tabs" style="width: 400px;height: 250px">  <div title="Tab1" data-options="closable:true">   tab1  </div>  <div title="Tab2" data-options="closable:true">   tab2  </div>  <div title="Tab3" data-options="iconCls:'icon-reload',closable:true">   tab3  </div></div>

JS call Loading

<Div id = "box" style = "width: 400px; height: 250px"> <div title = "Tab1" data-options = "closable: true "> tab1 </div> <div title =" Tab2 "data-options =" closable: true "> tab2 </div> <div title =" Tab3 "data-options =" iconCls: 'icon-reload', closable: true "> tab3 </div> <script> $ (function () {$ ('# box '). tabs ({// tab container width: 500, // entry card container height: 400, // whether the control panel background is not displayed. Plain: false, // whether the tab will be filled with its container fit: false, // whether to display the tab container border: true, // The pixel value scrollIncrement of each scrolling tab scroll: 200, // The duration of each rolling animation scrollDuration: 400, // add the toolbar to the left or right of the tab panel header tools: [{iconCls: 'icon-add', handler: function () {alert ('add! ') ;},}], // Toolbar position toolPosition: 'left', // tab position tabPosition: 'left', // tab title width, valid headerWidth: 300 when the tabPosition attribute is set to 'left' or 'right', // The width of the label bar is tabWidth: 250, // The height of the label bar is tabHeight: 25, // initialize and select a tab page, starting from 0: selected: 2, // whether to display the tab page title showHeader: true}) ;}</script>

Attribute list

Event list

$ (Function () {$ ('# box'). tabs ({// triggered when remote data is loaded on the ajax tab panel. OnLoad: function (pannel) {alert (panel) ;}, // triggers onSelect: function (title, index) When you select a tab panel) {alert (title + '|' + index) ;}, // triggered when you deselect a tab panel. // (When selecting another method, the previous method is triggered first, and then the next onSelect method is triggered) onUnselect: function (title, index) {alert (title + '|' + index) ;}, // triggered when the tab panel is closed. Return false to cancel the onBeforeClose: function (title, index) operation) {alert (title + '|' + index); return false ;}, // trigger onClose: function (title, index) When closing a tab panel) {alert (title + '|' + index) ;}, // triggers onAdd: function (title, index) when a new tab panel is added) {alert (title + '|' + index) ;}, // triggers onUpdate: function (title, index) when updating a tab panel) {alert (title + '|' + index) ;}, // triggers onContextMenu: function (e, title, index) When right-clicking a tab panel) {alert (e + '|' + title + '|' + index );}});});

Method list

// Return the property object console. log ($ ('# box '). tabs ('options'); // return to the console of all tabs. log ($ ('# box '). tabs ('tabs'); // Add a tab $ ('# box '). tabs ('add', {title: 'New panel', selected: false,}); // select the tab $ ('# box') of the specified topic '). tabs ('select', 1); // deselect the specified tab $ ('# box '). tabs ('select', 0); // close the specified tab $ ('# box '). tabs ('close', 1); // adjust the layout and size of the Panel $ ('# box '). tabs ('resize'); // specifies whether the console exists on the tab of the target. log ($ ('# box '). tabs ('exists', 4); // obtain the console of the specified tab. log ($ ('# Box '). tabs ('gettab', 1); // obtain the index console of the specified panel. log ($ ('# box '). tabs ('gettabindex', '# tab2'); // obtain the console of the Selected tab. log ($ ('# box '). tabs ('getselected'); // display the tab title $ ('# box '). tabs ('showhead'); // hide the tab title $ ('# box '). tabs ('hidehead'); // update a tab $ ('# box '). tabs ('update', {tab: $ ('# tab2'), options: {Title: 'New title ',}}); // disable the tab for the specified subscript or title $ ('# box '). tabs ('disabletab', 1); $ ('# box '). tabs ('disabletab', 'tab2'); // enables the specified subscript or title Tab $ ('# box '). tabs ('enabletab', 1); $ ('# box '). tabs ('enablestab ', 'tab2'); // scroll the tab title, with a positive value toward the left and a negative value toward the right $ (' # box '). tabs ('rollby', 100); // you can use $. fn. tabs. defaults override the default object. $. Fn. tabs. defaults. border = false;

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.