jQuery UI API - anggota tab (Tab Widget)

kategori

Widget (widget)

pemakaian

Keterangan: A multi-panel area konten tunggal, masing-masing panel dalam judul daftar.

Versi baru: 1.0

Tab (tab) biasanya digunakan konten menjadi sejumlah bagian, untuk menghemat ruang, seperti akordeon (akordeon) sama.

Tab (tab) memiliki seperangkat spesifik tag yang harus digunakan untuk bekerja dengan baik tab:

• Tab (tab) harus menjadi memerintahkan ( <ol> ) atau unordered ( <ul> daftar)
• "Judul" tag dari setiap halaman harus daftar item ( <li> internal), dan harus digunakan dengan href atribut jangkar ( <a> ) paket.
• Setiap lempeng tag dapat setiap elemen halaman valid, tetapi harus memiliki id, anchor hash terkait dengan id tab yang sesuai.

Isi setiap halaman tab piring dapat didefinisikan dalam halaman yang baik, atau mungkin dimuat melalui Ajax. Kedua metode didasarkan pada halaman yang relevan dari anchor tag href proses otomatis. Secara default, ketika Anda klik pada tab untuk mengaktifkan, tetapi dengan event pilihan Anda dapat mengubah atau mengganti acara.

Berikut adalah beberapa tag contoh:

<Div id = "tab">
  <Ul>
    <Li> <a href="#fragment-1"> </a> </ li>
    <Li> <a href="#fragment-2"> dua </a> </ li>
    <Li> <a href="#fragment-3"> tiga </a> </ li>
  </ Ul>
  <Div id = "fragmen-1">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Aliquam ERat volutpat.
  </ Div>
  <Div id = "fragmen-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Aliquam ERat volutpat.
  </ Div>
  <Div id = "fragmen-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Aliquam ERat volutpat.
  </ Div>
</ Div>

interaksi keyboard

Ketika fokusnya adalah pada tab, perintah keyboard berikut ini tersedia:

• UP / KIRI: Pindahkan kursor ke tab sebelumnya. Jika label pada halaman pertama, kemudian memindahkan fokus ke tab terakhir. Dalam penundaan singkat setelah aktivasi tab terfokus.
• BAWAH / KANAN: Pindahkan kursor ke tab berikutnya. Jika label pada halaman terakhir, kemudian pindah fokus ke tab pertama. Dalam penundaan singkat setelah aktivasi tab terfokus.
• RUMAH: Pindahkan kursor ke tab pertama. Dalam penundaan singkat setelah aktivasi tab terfokus.
• END: Pindahkan kursor ke tab terakhir. Dalam penundaan singkat setelah aktivasi tab terfokus.
• SPACE: aktivasi terkait dengan panel tab terfokus.
• ENTER: Aktifkan atau beralih terkait dengan panel tab terfokus.
• ALT + PAGE UP: Pindahkan kursor ke tab sebelumnya dan segera diaktifkan.
• ALT + PAGE DOWN: Pindahkan kursor ke tab berikutnya, dan langsung aktif.

Ketika fokusnya adalah pada panel, perintah keyboard berikut ini tersedia:

• CTRL + UP: Pindahkan kursor ke tab yang sesuai.
• ALT + PAGE UP: Pindahkan kursor ke tab sebelumnya dan segera diaktifkan.
• ALT + PAGE DOWN: Pindahkan kursor ke tab berikutnya, dan langsung aktif.

theming

anggota tab (Tab Widget) menggunakan framework jQuery UI CSS untuk menentukan tampilan dan nuansa dari gaya. Jika Anda perlu menggunakan tab gaya tertentu, Anda dapat menggunakan berikut nama kelas CSS:

• ui-tabs : tab wadah luar. Ketika Anda menetapkan collapsible pilihan -waktu, unsur-unsur tambahan disediakan dengan ui-tabs-collapsible , kelas.
  • ui-tabs-nav : Daftar tab.
    • Navigasi item daftar akan diaktifkan dengan ui-tabs-active , kelas. Konten dimuat melalui Ajax panggilan akan muncul dengan daftar item ui-tabs-loading , kelas.
      • ui-tabs-anchor : Switchboard untuk jangkar.
  • ui-tabs-panel : panel terkait tab. Hanya tab yang sesuai terlihat hanya ketika diaktifkan.

mengandalkan

• UI inti (UI Core)
• Perpustakaan komponen (Widget Factory)
• Efek Inti (Core efek) (opsional; ketika show dan hide bila digunakan dengan opsi)

informasi tambahan

• bagian membutuhkan beberapa CSS fungsional, jika tidak maka tidak akan bekerja. Jika Anda membuat tema kustom, menggunakan widget yang ditentukan file CSS sebagai titik awal.

contoh

Sebuah tab jQuery UI sederhana (Tab).

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> anggota tab (Tab Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Kepala>
<Body>
 
<Div id = "tab">
  <Ul>
    <Li> <a href="#fragment-1"> <span> a </ span> </a> </ li>
    <Li> <a href="#fragment-2"> <span> dua </ span> </a> </ li>
    <Li> <a href="#fragment-3"> <span> tiga </ span> </a> </ li>
  </ Ul>
  <Div id = "fragmen-1">
    <P> Tag pertama diaktifkan secara default: </ p>
    <Kode> $ ( "#tabs") .tabs (); </ code>
  </ Div>
  <Div id = "fragmen-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Aliquam ERat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Aliquam ERat volutpat.
  </ Div>
  <Div id = "fragmen-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Aliquam ERat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Aliquam ERat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Aliquam ERat volutpat.
  </ Div>
</ Div>
 
<Script>
$ ( "#tabs") .tabs ();
</ Script>
 
</ Body>
</ Html>

Lihat demo