Teilen des von jQuery_jquery gekapselten Tab-Tab-Plug-Ins

Die Tab-Funktion wird häufig bei der Website-Entwicklung verwendet. Um Zeit beim Schreiben von Code zu sparen, ist das Tab-Plug-in zum einfachen Aufrufen gekapselt.

Registerkartenkomponente erstellen

Verwendung: HTML-Struktur

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

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

Zugehörige Parameterbeschreibung:

Initialisierungsparameter

Parameter-Standardwert-Parameterbeschreibung
active null legt den Index der ausgewählten Registerkarte fest. Wenn beispielsweise die erste Registerkarte ausgewählt ist, wird sie auf 0 gesetzt Ereignisklick Das Wechselereignis der Registerkarte, der Standardwert ist das Klickereignis, Sie können Mouseover festlegen

Registerkartenparameter hinzufügen

Parameter-Standardwert-Parameterbeschreibung

Titel leer Der auf der Registerkarte angezeigte Text, der Standardwert ist leer
href leerer Tab-Link. Wenn es sich um statische Daten handelt, geben Sie die entsprechende Zeichenfolge (#str) und für Remote-Daten die entsprechende URL ein
Inhalt Leer Der Inhalt der Registerkarte besteht aus statischen Daten. Die dynamischen Daten müssen nicht ausgefüllt werden
iconCls true Schaltfläche zum Schließen des Tabs, standardmäßig wird true angezeigt, andernfalls ist es false

Demo:

Beispiel 1: Statische Daten:

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

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

Beispiel 2: Laden Sie die Seite über Remote-Daten und erstellen Sie dynamisch das 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-Aufruf:

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

Beispiel 3: Übergeben Sie Parameter und stellen Sie das Tab-Wechsel-Ereignis auf Mouseover ein

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

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

Beispiel 4: Registerkarte hinzufügen:

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

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

Zusammenfassung:

Durch verschiedene Id-Aufrufe können Sie unterschiedliche Tab-Strukturen erstellen und die Stile können je nach ID angepasst werden.

Ich bin nicht talentiert, wenn mir alle Experten Ratschläge geben....

Demo-Download-Adresse:

MyUI-Tabs

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.