JQuery plugin learning Tab and jquery plugin tab
The tab function is often used in website development. To save the code writing time, the tab plug-in is encapsulated for convenient calling.
Let's take a look at the effect:
Tabs-1-paneltabs-2-paneltabs-3-panel
Tabs-1-paneltabs-2-paneltabs-3-panelMyUI-tabs
Create tab Components
Usage: html Structure
<div id="tabs"> <ul> <li><a href="#tabs-1">tab-1</a></li> <li><a href="#tabs-2">tab-2</a></li> <li><a href="#tabs-3">tab-3</a></li> </ul> <div id="tabs-1">tabs-1-panel</div> <div id="tabs-2">tabs-2-panel</div> <div id="tabs-3">tabs-3-panel</div> </div>
Js call
$('#tab').tabs();
Description of related parameters: initialization parameters
Parameters |
Default Value |
Parameter description |
Active |
Null |
Set the index of the Selected tab. The default value is null. For example, set the first tab to 0. |
Event |
Click |
Tab switch event. The default is click event. You can set mouseover |
Add tab Parameters
Parameters |
Default Value |
Parameter description |
Title |
Null |
Text displayed on the tab, empty by default |
Href |
Null |
Tab link. For static data, enter the corresponding string (# str), and for remote data, enter the corresponding url. |
Content |
Null |
When the tab is static data, dynamic data is not required |
IconCls |
True |
Tab close button. The default value is true. If it is not displayed, the value is false. |
Demo:
Example 1: static data:
<div id="tabs"> <ul> <li><a href="#tabs-1">tab-1</a></li> <li><a href="#tabs-2">tab-2</a></li> <li><a href="#tabs-3">tab-3</a></li> </ul> <div id="tabs-1">tabs-1-panel</div> <div id="tabs-2">tabs-2-panel</div> <div id="tabs-3">tabs-3-panel</div> </div>
Js call:
$('#tabs').tabs();
Example 2: dynamically create a panel by loading pages from remote data,
<div id="tabs"> <ul> <li><a href="#tabs-1">tab-1</a></li> <li><a href="index.jsp">tab-2</a></li> <li><a href="index.html">tab-3</a></li> </ul> <div id="tabs-1">tabs-1-panel</div> </div>
Js call:
$('#tabs').tabs();
Example 3: input parameters and set the tab switch event to mouseover
<div id="tabs"> <ul> <li><a href="#tabs-1">tab-1</a></li> <li><a href="index.jsp">tab-2</a></li> <li><a href="index.html">tab-3</a></li> </ul> <div id="tabs-1">tabs-1-panel</div> </div>
Js call:
$('#tabs').tabs({event:'mouseover'});
Example 4: Add a tab:
<Input type = "button" value = "add tab" onclick = "addTab () "> <div id =" tabs "> <ul> <li> <a href =" # tabs-1 "> tab-1 </a> </li> <li> <a href = "index. jsp "> tab-2 </a> </li> <a href =" index.html "> tab-3 </a> </li> </ul> <div id = "tabs-1"> tabs-1-panel </div>
Js call:
$('#tabs').tabs(); var tabCount =4; function addTab(){ tab.tabs('add',{ title:'tab-'+tabCount+'', href:'#tab-'+tabCount+'', content:'Tab----'+tabCount+'', iconCls:true }); tabCount++; }
Summary:
You can create different tab structures by calling different IDs. You can customize different styles by using IDs.
The younger brother is not talented. Thank you for your advice ....
Demo: MyUI-tabs