Although convenient and easy to use, but personally feel its performance in the UI is not too brilliant, today inadvertently see jquery tools--a jquery based UI performance framework, its UI features display style similar (or imitate) flex. The Framework provides tabs (tab/page sign) overlay (overlay), ToolTip (Prompt box), scrollable (scrolling infobar), expose (highlighting), flahembed (video playback embedded) Six major categories of functions (its official web site claiming to be six major tools), the six categories of functions are each have their own independent support package, do not interfere with each other, users can be completely with their own needs to download, so as to reduce the JS file download on the page load speed impact. Although the features are not very comprehensive, but can be said to be few but few-are currently more commonly used functions, but also a good way to make up for the jquery UI some of the deficiencies, to some extent, enhance the jquery UI features. In fact, the most I think appreciate is those types of flex style, can effectively control the development costs of the situation greatly enhance the user experience.
Looking at the tabs of jquery tools today, let's summarize it with the official doucmentation.
The target HTML code for the operation is given first:
Copy Code code as follows:
<body>
<ul class= "Tabs-t" >
<li><a href= "#first" >tab1</a></li>
<li><a href= "#second" >tab2</a></li>
<li><a href= "#third" >tab3</a></li>
</ul>
<div class= "Tabscontent" >
<div>
<p>
Here you can-tabs in action. They are the most popular user-interface on the web. And for good reason:they are intuitive to use, people are used to them, and above all your can organize your pages more F riendly.
</p>
Tabl content<a href= "#second" >open table2</a></div>
<div>
<p>
Vestibulum ante ipsum primis in Faucibus orci luctus et ultrices posuere cubilia; Sed Lorem. Aenean commodo pede a eros volutpat viverra. Pellentesque a NISL. Nullam et metus.
</p>
TAB2 content<a href= "#third" >open table3</a></div>
<div>
<p>
Praesent dictum, velit vel adipiscing suscipit, metus nisl lobortis sem, nec elementum nibh Urna, non. Vestibulum ante ipsum primis in Faucibus orci luctus et ultrices posuere cubilia.
</p>
TAB3 content</div>
</div>
</body>
This feature is implemented through the Jqueryobject.tabs () method, where the tabs method provides the following three ways:
1. $ ("Ul.tabs-t"). Tabs ("Div.tabscontent>div")//the method can simply organize the tabs
2. $ ("Ul.tabs-t"). Tabs ("Div.tabscontent>div", {Config object})//The method organizes the tabs by configuring the object, which is suitable for various tabs presentations.
3. $ ("Ul.tabs-t"). Tabs ("Div.tabscontent>div", callback function)//The tabs is further manipulated by a callback function.
The following is a description of the Config object parameter implementation and description in 2:
Copy Code code as follows:
Current: ' present ',//The increased class name for the active tab, default to
Effect: "Fade",//the Panel content of each tab is displayed gradually from the whole
Effect: "Slide",//Click on the tab panel to appear under the current tab panel, and overwrite the current panel
Effect: "Horizontal",//the current tab of the Panel gradually shrink from right to left and eventually disappear, click on the contents of the panel occupy the corresponding position, more suitable for horizontal navigation
fadeinspeed:1000,//sets the speed of the panel display, setting this property to be valid when effect is set to fade, with a default value of 200 milliseconds
Event: "MouseOver",//Specifies the events that trigger the tab switch, the default is mouse click, the optional Trigger event is "mouseover", "Dbclick"
history:true,//is similar to JavaScript's history function, the default is False, when the user clicks the browser's forward back button, if this is set to true, then fall back to the last click of the tab, instead of jumping to another page
initialindex:1,//set tab that is displayed by default
Tabs: "A",//Set tab corresponding to the tab element, default to "a", this can also be set to "Li", which is equivalent to the jquery selector
api:false,//sets the type of return type for the current tab's container. If False (the default), it is returned as a jquery object, otherwise, as a JS object. Returns the last value if more than one value exists.
Onbeforeclick:function (index) {
Alert (This.getcurrenttab (). text ());//Returns the name of the current tab
return true;
},//the function called before the tab is clicked, if the function returns False, then the tab is not triggered; Returns a Tab object, for the action of the object, see tab-related method; The return function has a parameter, which is the index of the current tab
Onclick:function (index) {
return true;
}//the function that is called when the tab is clicked, the other uses the same onbeforeclick
A more intuitive description is as follows:
| Property name |
Default value |
Describe |
| Current |
|
The increased class name for the current tab |
| Effect |
|
Fade ': The panel content of each tab is displayed in a gradual manner from the whole; face, and overwrite the current panel |
|
|
' Slide ': Clicking on the tab panel appears under the Current tab panel |
|
|
Horizontal ': The current tab panel gradually shrinks from right to left and eventually disappears, click on the panel content to occupy the appropriate position, more suitable for horizontal navigation |
| Fadeinspeed |
|
Sets the speed of the panel display, setting this property to be valid when effect is set to fade, with a default value of 200 milliseconds |
| Event |
|
Specifies the event that triggers the tab switch, by default clicking, optionally triggering events with "mouseover", "Dbclick" |
| History |
FALSE |
Similar tothe Javas cript history function when the user clicks the browser's forward back button, if this is set to true, it will fall back to the last-clicked tab, instead of jumping to another page |
| Initialindex |
|
Set tab for default display |
| Tabs |
|
The tab element that sets the tab to the default is "a", which can also be set to "Li", which is the equivalent of the jquery selector |
| Api |
|
Sets the type of return type for the container in which the current tab is located. If False (the default), it is returned as a jquery object, otherwise, as a JS object. Returns the last value if more than one value exists. |
| OnBeforeclick |
|
A function called before the tab is clicked, and if the function returns false, the tab is not triggered; Returns a Tab object, for the action of the object, see tab-related method; The return function has an argument, the index of the current tab |
| OnClick |
|
The function that is called when the tab is clicked, the other usageis the same as on Beforeclick |
In addition, tabs also provides a series of methods for obtaining tabs, which are specifically implemented and described below:
Copy Code code as follows:
var api=$ ("Ul.tabs-t"). Tabs ()//Get tab first by getting tab container
Api.next ();//Jump to next tab
Api.click ();
Alert (Api.getconf (). Tabs)//Returns the configuration object of the API, where the value of the tabs property of the configuration object is obtained
Api.getcurrentpane ()//Get the current panel
Api.getcurrenttab ()//Get current tab
Api.getindex ()//Get the index of the current tab
Alert (Api.getpanes ());//Get all the panel
Alert (Api.gettabs ());//Get All tab
Api.prev ();//Jump to previous tab
Api.onbeforeclick=function () {
return true;
}//Beforeclick of the same configuration object, an object can bind multiple Beforeclick events
Api.onclick=function () {
return true;
}//the same configuration object's click, an object can bind multiple Beforeclick events
A more intuitive description is as follows:
> Get the current panel get current tab
| Method |
return value |
Describe |
|
|
|
Returns the configuration object for the API |
|
getcurrentpane ()
|
|
|
getcurrenttab ()
|
|
|
|
|
Gets the index of the current tab |
| Gettabs () |
|
Get all the tab |
| Getpanes () |
|
Get all the panel |
|
|
|
Jump to the next tab |
| Prev () |
|
Jump to previous tab |
| OnBeforeclick () |
|
Beforeclick of the same configuration object, an object can bind multiple Beforeclick events |
| OnClick () |
|
Click of the same Configuration object, an object can bind multiple Beforeclick events |
Finally, take a few screenshots of its official website as the end of this article.
1. The ordinary tabs
de life" alt="jquery tools之tabs（选项卡/页签） - gaoyusi - My code life" src="yun_qi_img/20090725144632720.jpg">
2. Tabs of horizontal development
de life" alt="jquery tools之tabs（选项卡/页签） - gaoyusi - My code life" src="yun_qi_img/20090725144633546.jpg">
3. class Hint Box
de life" alt="jquery tools之tabs（选项卡/页签） - gaoyusi - My code life" src="yun_qi_img/20090725144633516.jpg">
4. The Wizard
de life" alt="jquery tools之tabs（选项卡/页签） - gaoyusi - My code life" src="yun_qi_img/20090725144633426.jpg">
