Sharing of tab tab plug-in encapsulated by jQuery_jquery

The tab function is often used in website development. In order to save time in writing code, the tab plug-in is encapsulated for easy calling.

Create 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();

Related 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, it is set to 0
event click The switching event of the tab, the default is the click event, you can set mouseover

Add tab parameters

Parameter Default Value Parameter Description
title empty The text displayed on the tab, the default is empty
href empty tab link, if it is static data, fill in the corresponding string (#str), and for remote data, the corresponding url
content Empty The content of the tab is static data. There is no need to fill in the dynamic data
iconCls true tab close button, the default is to display true, otherwise it 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: Load the page through remote data and dynamically create the panel,

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

<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++;
 }

Summary:

Through different Id calls, you can create different tab structures, and the styles can be customized by id.

I am not talented. Welcome all the experts to give me advice....

Demo download address: MyUI-tabs

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