JQuery-encapsulated tab plug-in sharing

JQuery-encapsulated tab plug-in sharing

This article will share with you the plug-in for personally encapsulated tab special effects. It is very simple and practical, and contains usage and examples. For more information, see.

The tab function is often used in website development. To save the code writing time, the tab plug-in is encapsulated for convenient calling.

Create tab Components

Usage: html Structure

?

1 2 3 4 5 6 7 8 9 10

<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

?

1	$ ('# Tab'). tabs ();

Parameter description:

Initialization parameters

Parameter default value parameter description
Active null sets the index of the Selected tab. The default value is null. For example, if the first tab is selected, the index is set to 0.
Event click tab switch event, which is a click event by default. You can set mouseover

Add tab Parameters

Parameter default value parameter description
The text displayed on the title empty tab. The default value is null.
Href empty tab link. If it is static data, enter the corresponding string (# str), and Remote Data enter the corresponding url.
Content empty tab is the content of static data, dynamic data is not required
IconCls true tab close button. The default value is true, and false if not displayed.

Demo:

Example 1: static data:

?

1 2 3 4 5 6 7 8 9 10

<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:

?

1	$ ('# Tabs'). tabs ();

Example 2: dynamically create a panel by loading pages from remote data,

?

1 2 3 4 5 6 7 8

<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:

?

1	$ ('# Tabs'). tabs ();

Example 3: input parameters and set the tab switch event to mouseover

?

1 2 3 4 5 6 7 8

<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:

?

1	$ ('# Tabs'). tabs ({event: 'mouseover '});

Example 4: Add a tab:

?

1 2 3 4 5 6 7 8 9 10

<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:

?

1 2 3 4 5 6 7 8 9 10 11

$ ('# 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

The above is all the content of this article. I hope you will like it.