JQuery plugin learning Tab and jquery plugin tab

Source: Internet
Author: User

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:

 

  • Tab-1
  • Tab-2
  • Tab-3
Tabs-1-paneltabs-2-paneltabs-3-panel

 

  • Tab-1
  • Tab-2
  • Tab-3
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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.