jquery Plugin--ui plugin Tabs widget 1.10

Recently Consolidated tabs (tab) into Admin LTE ( a fully responsive Management template based onthe Bootstrap 3 framework. ) in use. The process took a lot of detours, the reason is not aware of the version issue, jquery UI tabs each upgrade has reduced a lot of APIs, resulting in my integration process frequently found invalid method results.

• JQuery UI 1.10 Upgrade Guide: http://jqueryui.com/upgrade-guide/1.10/
• JQuery UI 1.10API Documentation: http://api.jqueryui.com/1.10/
• Official Example Address: http://jqueryui.com/demos/tabs/

After the integration of the interface, such as the addition of the right-click menu function, tab to achieve the close, drag, refresh and other functions. In order to be consistent with the template style, using the jquery UI for Bootstrap, the official homepage of the API is very few, many things are not mentioned, but most of the tabs API usage is to refer to the JQuery UI tabs API.

　　Now record the jquery UI tabs 1.10 API as follows:

<script type= "Text/javascript" >      $(function() {          $("#tabs"). Tabs ({/** Parameters*/            //To configure the index of the currently open tab, you can use a bool value or an int value, which defaults to 1            //bool value can be used only when the collapsible property is true, indicating that the default tab is collapsed            //if it is an int value that represents the index of the currently open tab, and if it is negative, the index will start from the last tabActive:true,                          //Whether the Configuration tab can be collapsed, the default is FalseCollapsible:false,                          //Disable the tab, you can use a bool value or an int array, but the feeling is not effective ah, because it is disabled, not Disable,fuckDisabled:false,                          //The way the tab is activated, by default, click            //"mouseover" means that the mouse moves to the caption, which activates the tab            //"Click" means mouse click on the Activation tabEvent: "Click",                          //set tab height, can be configured as "Auto", "Fill", "content", default to "content"            //"Auto" means that the tab height will be set to the height of the highest tab.            //"Fill" means the available height extended to the parent container based on the tab            //"content" means that each tab will have its own content as a heightHeightstyle: "Content",                          //sets the way the tab is hidden, you can set a bool value, a number value, a string value, or an object, the default value is null            //A bool value indicates whether there are hidden effects, and if true, fades the tab with the default time and animation            //The number value indicates that the tab will fade in the specified time (in milliseconds) and the default animation.             //A string value indicates that the tab will be hidden with the specified animation effect, and the animation time is the default value            //The object value indicates the type and animation time of the animation that can be configured, and the delay time of the animation, effect,delay,duration,easingHide: "Slideup",                          //Sets the way tabs are displayed, with the same parameters as hideShow: "Blind",                         /** Event*/            //set the callback method after the tab is activated, that is, click another tab after the show animation completes the method of execution            //the incoming UI object has four properties, all of them are jquery objects            //one is Newtab, which represents the new tab,            //One is Newpanel, the panel representing the new tab            //One is Oldtab, representing the Old tab            //one is Oldpanel, which represents the Old tab of the Panel            //You can also bind the event to a tab by using a binding: $ ("#tabs"). On ("Tabsactivate", function (Event,ui) {}); Activate:function(event, UI) {alert ("Tab Activated"); },                          //set the callback method that the tab is about to activate, prevent the tab from activating, pass in the same arguments as the Activate event, or bind the event to a tab using bindingsBeforeactivate:function(event, UI) {alert ("tab is about to be activated"); },                          //sets the callback method before the contents of the tab is loaded, and only the tab that uses Ajax loaded content is about to be activated before the event is triggered            //There are four properties in the incoming UI object            //One is tab, the tab is about to be loaded            //A panel that is about to be loaded tab panels            //One is JQXHR, the XMLHttpRequest object that sends the requested jquery package            //One is the configuration property of the Ajaxsettings,ajax requestBeforeload:function(event, UI) {alert ("tab content is about to be loaded"); },                        //This event is triggered when a tab page is created. Create:function(event, UI) {alert ("Tab Creation Complete"); },                          //This event is triggered when the content of a tabbed page is loaded remotely. Load:function(event, UI) {alert ("Tab Load Complete");                  },          }); $("#btn"). button (). Click (function() {              $("#tabs"). Tabs ("destroy");//destroys the tab method, turning the tab into a normal HTML tag        }); $("#btn"). button (). Click (function() {              $("#tabs"). Tabs ("Disable");//Disable all tab methods        }); $("#btn"). button (). Click (function() {              $("#tabs"). Tabs ("Disable", 0);//Disable a tab method        }); $("#btn"). button (). Click (function() {              $("#tabs"). Tabs ("option", "Disabled", [1, 2, 3]);//Disabling multiple tab methods        }); $("#btn"). button (). Click (function() {              $("#tabs"). Tabs ("Enable");//Disable a tab method        }); $("#btn"). button (). Click (function() {              $("#tabs"). Tabs ("Enable", 0);//Disable a tab method        }); $("#btn"). button (). Click (function() {              $("#tabs"). Tabs ("Load", 0);//Reload A tab method that should be used in conjunction with Ajax loading        }); $("#btn"). button (). Click (function() {              varDisabled = $ ("#tabs"). Tabs ("option", "Disabled");//get tab Disabled property valuealert (disabled);          }); $("#btn"). button (). Click (function() {              varShow = $ ("#tabs"). Tabs ("option", "Show");//get tab Show property valuealert (show);          }); $("#btn"). button (). Click (function() {              varOption = $ ("#tabs"). Tabs ("option");//get tab all configuration Items            varProps = "";  for(varPinchoption) {Props+ = p + "=" + option[p] + "\ n";          } alert (props);          }); $("#btn"). button (). Click (function() {              $("#tabs"). Tabs ("option", "active", 0);//Set Tab Active property value is 0        }); $("#btn"). button (). Click (function() {              $("#tabs"). Tabs ("option"), {show:false, Hide:false              });//Setting tabs Multiple property values        }); $("#btn"). button (). Click (function() {              $("#tabs"). Tabs ("Refresh");//handles any labels added or removed directly in the DOM and recalculates the height of the tab panel        }); $("#btn"). button (). Click (function() {              varTabs = $ ("#tabs"); Tabs.find (". Ui-tabs-nav"). Sortable ({//You can use the sortable method to adjust the order of tabs by dragging the label name with the mouseAxis: "x", stop:function() {Tabs.tabs ("Refresh");          }              });      });  }); </script>

jquery Plugin--ui plugin Tabs widget 1.10