Tabs TAB/tab of jquerytools _ jquery

Source: Internet
Author: User
After using jquery for so long, I feel that although the ExtJS and other frameworks are not comprehensive and powerful, they have indeed achieved "thewriteless, domore" and are easy to learn, you just need to take a closer look at the APIReference on its official website. The basic problem is not that great. Although it is convenient and easy to use, I personally think its UI performance is not too brilliant. Today I accidentally saw jquery tools-a jquery-based UI presentation framework, its UI function is similar to (or imitated) flex. This framework provides tabs (Tab/TAB) overlay (overlay), tooltip (prompt box), scrollable (scroll Information bar), expose (highlighted), and flahembed (video playback embedded) six Main functions (called the six tools on its official website), each of which has its own independent support package, without interfering with each other, users can download files as needed, reducing the effect of js File Download on page loading speed. Although the functions are not comprehensive, they can be called less and more refined-they are currently commonly used functions. They can also make up for some shortcomings of jquery ui and enhance Jquery UI functions to a certain extent. In fact, what I like most is the flex-like style that can greatly enhance user experience while effectively controlling development costs.
Today, I carefully read the tabs of jquery tools. The following is a summary based on its official doucmentation.
First, the target html code of the operation is provided:

The Code is as follows:




  • Tab1

  • Tab2

  • Tab3





Here you can see tabs in action. they are the most popular user-interface component 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 friendly.


Tabl contentopen table2




Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed lorem. Aenean commodo pede a eros volutpat viverra. g0a nisl. Nullam et metus.


Tab2 contentopen table3




Praesent dictum, velit vel adipiscing suscipit, metus nisl lobortis sem, nec elementum nibh urna non turpis.


Tab3 content





This function is implemented through the jqueryObject. tabs () method. The tabs method provides the following three methods:
1. $ ("ul. tabs-t"). tabs ("p. tabsContent> p") // This method can easily organize tabs.
2. $ ("ul. tabs-t "). tabs ("p. tabsContent> p ", {config object}) // This method organizes tabs by configuring the object, which is suitable for various tabs presentations.
3. $ ("ul. tabs-t"). tabs ("p. tabsContent> p", callback function) // perform further operations on tabs through the callback function.
The following describes the implementation and description of the config object parameters in 2:

The Code is as follows:


Current: 'current', // name of the class added to the current tab. The default value is current.
Effect: "fade", // The display mode of the panel content of each tab is gradually displayed from the whole
// Effect: "slide", // click the tab. The panel appears under the current tab and overwrites the current panel.
// Effect: "horizontal", // The panel of the current tab gradually shrinks from right to left and eventually disappears. The content of the panel occupies the corresponding position, which is more suitable for horizontal navigation.
FadeInSpeed: 1000, // set the panel display speed. This attribute is valid when effect is set to fade. The default value is 200 milliseconds.
Event: "mouseover", // specifies the event that triggers the tab switch. By default, the mouse is clicked. You can select "mouseover" and "dbclick" to trigger the event"
History: true, // similar to the javascript history function. The default value is false. If you click the forward and backward buttons of the browser, then it will roll back to the tab you clicked last time, instead of going to other pages.
InitialIndex: 1, // set the default tab
Tabs: "a", // set the Tag Element corresponding to the tab. The default value is "a". You can also set it to "li", which is equivalent to the jquery selector.
Api: false, // set the return type of the container where the current tab is located. If it is false (default value), it is returned as a jquery object; otherwise, it is returned as a js object. If multiple values exist, the last value is returned.
OnBeforeClick: function (index ){
// Alert (this. getCurrentTab (). text (); // return the name of the current tab
Return true;
}, // The function called before the tab is clicked. If the function returns false, the tab will not be triggered. The return result is a tab object for operations on this object, refer to the tab-related method. The return function has a parameter, which is the index of the current tab.
OnClick: function (index ){
Return true;
} // The function called when the tab is clicked. Other usage is the same as onBeforeClick


A more intuitive description is as follows:
Attribute name Default Value Description
Current 'Current' Class name added to the current tab
Effect Default' Fade: The display mode of the panel content of each tab is gradually displayed from the whole; the panel is overwritten
'Slide': Click the tab panel to appear under the current tab panel.
Horizontal: The current tab panel gradually shrinks from right to left and eventually disappears. The content of the clicked panel occupies the corresponding position, which is suitable for horizontal navigation.
FadeInSpeed 200 Set the display speed of the panel. This attribute is valid when effect is set to fade. The default value is 200 milliseconds.
Event 'Click' Specifies the event to trigger the tab switch. By default, the mouse is clicked. You can select "mouseover" and "dbclick" to trigger the event"
History FALSE Similar to javasHistory's history function when the user clicks the forward and backward buttons of the browser, if this is set to true, the tab will be rolled back to the last click, rather than jump to other pages
InitialIndex 0 Set the default tab
Tabs A' Set the label element corresponding to the tab. The default value is "a". Here you can also set it to "li", which is equivalent to the jquery selector.
Api FALSE Set the return type of the container where the current tab is located. If it is false (default value), it is returned as a jquery object; otherwise, it is returned as a js object. If multiple values exist, the last value is returned.
OnBeforeClick Null The function called before the tab is clicked. If the function returns false, the tab is not triggered. The return result is a tab object. for operations on this object, see the tab related methods; the return function has a parameter, which is the index of the current tab.
OnClick Null The function called when the tab is clicked. Other usage is the same as onBeforeClick
In addition, tabs provides a series of methods to obtain tabs. The specific implementation and description are as follows:

The Code is as follows:


Var api = $ ("ul. tabs-t"). tabs (); // obtain the tab by getting the tab container
// Api. next (); // jump to the next tab
// Api. click ();
// Alert (api. getConf (). tabs); // return the configuration object of the api. Obtain the tabs attribute value of the configuration object.
Api. getCurrentPane (); // obtain the current panel
Api. getCurrentTab (); // obtain the current tab
Api. getIndex (); // obtain the index of the current tab
// Alert (api. getPanes (); // obtain all the Panels
// Alert (api. getTabs (); // obtain all tabs
Api. prev (); // jump to the previous tab
Api. onBeforeClick = function (){
Return true;
} // BeforeClick of the same configuration object. One object can be bound to multiple Beforeclick events.
Api. onClick = function (){
Return true;
} // Click of the same configuration object. One object can be bound to multiple Beforeclick events.


A more intuitive description is as follows:

Method Return Value Description
GetConf () API Returns the configuration object of the api.
GetCurrentPane () JQuery Obtain the current panel
GetCurrentTab () JQuery Get current tab
GetIndex () Integer Returns the index of the current tab.
GetTabs () JQuery Retrieve all tabs
GetPanes () JQuery Retrieve all panels
Next () API Jump to the next tab
Prev () API Jump to the previous tab
OnBeforeClick () API BeforeClick of the same configuration object. One object can be bound to multiple Beforeclick events.
OnClick () API // Click of the same configuration object. One object can be bound to multiple Beforeclick events.

Finally, take several of the official websites as the end of this article.

1. Common tabs

De life "alt =" tabs of jquery tools (Tab/TAB)-gaoyusi-My coDe life "src =" http://files.jb51.net/upload/20090725144632720.jpg ">

2. horizontally expanded tabs

De life "alt =" tabs of jquery tools (Tab/TAB)-gaoyusi-My coDe life "src =" http://files.jb51.net/upload/20090725144633546.jpg ">

3. Class prompt box

De life "alt =" tabs of jquery tools (Tab/TAB)-gaoyusi-My coDe life "src =" http://files.jb51.net/upload/20090725144633516.jpg ">

4. Wizard

De life "alt =" tabs of jquery tools (Tab/TAB)-gaoyusi-My coDe life "src =" http://files.jb51.net/upload/20090725144633426.jpg ">

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.