jQuery encapsulated tab TAB plug in share

TAB function is often used in website development. In order to save 1 time of writing code, 1 tab plug-in is packaged for easy invocation.

Create a TAB component

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

Initialization parameter

Parameter default value parameter specification
active null sets the index of the selected TAB to null by default, for example 0 when the first TAB is selected
event click TAB switch events, default to click events, mouseover can be set

Add TAB parameters

Parameter default value parameter specification
The text displayed by the title empty TAB is empty by default
href empty TAB links, fill in the corresponding string (#str) for static data and url for remote data
The empty content TAB is for static data, and dynamic data is not filled in
iconCls true TAB close button. Displays true by default or false if not

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: Create panel dynamically by loading the page with 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: Pass in 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: Adding tabs:

<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();
 var tabCount =4;
 function addTab(){
   tab.tabs('add',{
     title:'tab-'+tabCount+'',
     href:'#tab-'+tabCount+'',
     content:'Tab----'+tabCount+'',
     iconCls:true
   });
   tabCount++;
 }

Conclusion:

Different tab structures can be created with different Id calls, and different styles can be customized with id.

Little brother is not just. Welcome everybody big God to advise...

Demo download address: ES95en-ES96en

This is the end of this article, I hope you enjoy it.