Partage du plug-in d'onglet onglet encapsulé par jQuery_jquery

La fonction tab est souvent utilisée dans le développement de sites Web Afin de gagner du temps dans l'écriture du code, le plug-in tab est encapsulé pour un appel facile.

Créer un composant d'onglet

Utilisation : structure html

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

appel js

 $('#tab').tabs();

Description des paramètres associés :

Paramètres d'initialisation

Valeur par défaut du paramètre Description du paramètre
active null définit l'index de l'onglet sélectionné. La valeur par défaut est null Par exemple, si le premier onglet est sélectionné, il est défini sur 0
. événement clic L'événement de commutation de l'onglet, la valeur par défaut est l'événement de clic, vous pouvez définir le survol de la souris

Ajouter des paramètres d'onglet

Valeur par défaut du paramètre Description du paramètre
titre vide Le texte affiché sur l'onglet, la valeur par défaut est vide
href lien onglet vide, s'il s'agit de données statiques, renseignez la chaîne correspondante (#str), et pour les données distantes, l'url correspondante
content Vide Le contenu de l'onglet est constitué de données statiques Il n'est pas nécessaire de remplir les données dynamiques
. iconCls true bouton de fermeture de l'onglet, la valeur par défaut est d'afficher vrai, sinon c'est faux

Démo :

Exemple 1 : Données statiques :

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

appel js :

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

Exemple 2 : Charger la page via des données distantes et créer dynamiquement le panneau,

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

appel js :

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

Exemple 3 : transmettre les paramètres et définir l'événement de changement d'onglet au survol de la souris

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

appel js :

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

Exemple 4 : Ajouter un onglet :

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

appel js :

 $('#tabs').tabs();
 var tabCount =4;
 function addTab(){
   tab.tabs('add',{
     title:'tab-'+tabCount+'',
     href:'#tab-'+tabCount+'',
     content:'Tab----'+tabCount+'',
     iconCls:true
   });
   tabCount++;
 }

Résumé :

Grâce à différents appels d'identifiant, vous pouvez créer différentes structures d'onglets et les styles peuvent être personnalisés par identifiant.

Je ne suis pas doué. Accueillez tous les experts pour me donner des conseils....

Adresse de téléchargement de la démo : MyUI-tabs

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.