Home > Developer > JavaScript
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:
Copy codeThe Code is 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 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.
</P>
Tabl content <a href = "# second"> open table2 </a> </div>
<Div>
<P>
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.
</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 turpis.
</P>
Tab3 content </div>
</Div>
</Body>
This function is implemented through the jqueryObject. tabs () method. The tabs method provides the following three methods:
1. $ ("ul. tabs-t"). tabs ("div. tabsContent> div") // This method can easily organize tabs.
2. $ ("ul. tabs-t "). tabs ("div. tabsContent> div ", {config object}) // This method organizes tabs by configuring the object, which is suitable for various tabs presentations.
3. $ ("ul. tabs-t"). tabs ("div. tabsContent> div", 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:
Copy codeThe 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 |
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://www.bkjia.com/uploads/allimg/131016/04151442D-0.jpg ">
2. horizontally expanded tabs
De life "alt =" tabs of jquery tools (Tab/TAB)-gaoyusi-My coDe life "src =" http://www.bkjia.com/uploads/allimg/131016/0415143015-1.jpg ">
3. Class prompt box
De life "alt =" tabs of jquery tools (Tab/TAB)-gaoyusi-My coDe life "src =" http://www.bkjia.com/uploads/allimg/131016/0415145561-2.jpg ">
4. Wizard
De life "alt =" tabs of jquery tools (Tab/TAB)-gaoyusi-My coDe life "src =" http://www.bkjia.com/uploads/allimg/131016/0415141633-3.jpg ">
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
