Perkongsian pemalam tab tab yang dikapsulkan oleh jQuery_jquery

Fungsi tab sering digunakan dalam pembangunan tapak web Untuk menjimatkan masa dalam menulis kod, pemalam tab dikapsulkan untuk memudahkan panggilan.

Buat komponen tab

Penggunaan: struktur 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>

panggilan js

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

Perihalan parameter berkaitan:

Parameter permulaan

Perihalan Parameter Nilai Lalai Parameter
null aktif menetapkan indeks tab yang dipilih Nilai lalai adalah nol Contohnya, jika tab pertama dipilih, ia ditetapkan kepada 0
klik acara Acara penukaran tab, lalai ialah acara klik, anda boleh menetapkan alih tetikus

Tambah parameter tab

Perihalan Parameter Nilai Lalai Parameter
tajuk kosong Teks yang dipaparkan pada tab, lalainya kosong
href pautan tab kosong, jika ia adalah data statik, isikan rentetan yang sepadan (#str), dan untuk data jauh, url yang sepadan
kandungan Kosong Kandungan tab adalah data statik. Tidak perlu mengisi data dinamik
butang tutup tab iconCls benar, lalainya adalah untuk memaparkan benar, jika tidak ia palsu

Demo:

Contoh 1: Data statik:

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

panggilan js:

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

Contoh 2: Muatkan halaman melalui data jauh dan buat panel secara dinamik,

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

panggilan js:

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

Contoh 3: Masukkan parameter dan tetapkan acara penukaran tab kepada tetikus

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

panggilan js:

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

Contoh 4: Tambah 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>

panggilan js:

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

Ringkasan:

Melalui panggilan Id yang berbeza, anda boleh mencipta struktur tab yang berbeza dan gaya boleh disesuaikan mengikut id.

Saya tidak berbakat. Dialu-alukan semua pakar untuk memberi nasihat kepada saya....

Alamat muat turun demo: MyUI-tabs

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.