jquery Plugin Learning Tabs tab

In the website development often uses the TAB function, in order to save the writing code time, encapsulates the tab plugin, facilitates the invocation.

Take a look at the effect:

• Tab-1
• Tab-2
• Tab-3

Tabs-1-paneltabs-2-paneltabs-3-panelmyui-tabs

Creating a Tab component

How to use: 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 ();

Related parameter description: initialization parameters

Parameters	Default value	Parameter description
Active	Null	Sets the index of the selected tab, with a default value of NULL, for example, set to 0 when the first tab is selected
Event	Click	tab of the Toggle event, default is Click event, you can set mouseover

Add Tab parameters

Parameters	Default value	Parameter description
Title	Empty	The text displayed by the tab is empty by default
Href	Empty	tab links, if static data is filled with the corresponding string (#str), the remote data is the corresponding URL
Content	Empty	When the tab is static data, dynamic data is not required
Iconcls	True	tab Close button, default to display True, False if not displayed

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: Loading a page from remote data, creating a panel dynamically,

<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: Incoming parameters, setting tab toggle event for 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> <Li><a href= "index.html" >tab-3</a></Li> </ul> <Div ID= "tabs-1" >tabs-1-panel</Div> </Div>

JS Call:

$( '#tabs' ). tabs ();varTabcount=4;function AddTab() {Tab.tabs ( 'add' , {title: 'tab-' +Tabcount+ "' Href: '#tab-' +Tabcount+ "' , content: 'Tab----' +Tabcount+ "' , Iconcls:true}); Tabcount++; }

Summarize:

With different ID calls, you can create different tab structures, and styles customize different styles with IDs.

My little brother. Welcome to the Great God advice ....

Demo:myui-tabs

jquery Plugin Learning Tabs tab