jQuery UI API - bagian menu (Menu Widget)

Sebelumnya: jQuery UI API - komponen dialog (Dialog Widget)

Berikutnya: jQuery UI API - anggota progress bar (Progressbar Widget)

kategori

pemakaian

Keterangan: Dengan mouse dan keyboard interaksi untuk navigasi dapat bertema menu.

Versi baru: 1.9

Menu dapat dibuat dengan tag valid, asalkan unsur memiliki orangtua hubungan yang ketat / anak dan setiap entri memiliki jangkar. Unsur yang paling umum adalah daftar unordered ( <ul> ):

<Ul id = "menu">
  <Li> <a href="#"> Item 1 </a> </ li>
  <Li> <a href="#"> Item 2 </a> </ li>
  <Li> <a href="#"> Butir 3 </a>
    <Ul>
      <Li> <a href="#"> Barang 3-1 </a> </ li>
      <Li> <a href="#"> Barang 3-2 </a> </ li>
      <Li> <a href="#"> Barang 3-3 </a> </ li>
      <Li> <a href="#"> Barang 3-4 </a> </ li>
      <Li> <a href="#"> Barang 3-5 </a> </ li>
    </ Ul>
  </ Li>
  <Li> <a href="#"> Item 4 </a> </ li>
  <Li> <a href="#"> Butir 5 </a> </ li>
</ Ul>

Jika Anda menggunakan non <ul> / <li> struktur menu dan item menu menggunakan elemen yang sama, menggunakan menus pilihan untuk membedakan antara dua elemen, seperti menus: "div.menuElement" .

Dengan menambahkan unsur ui-state-disabled , kelas untuk menonaktifkan item menu.

icon

Untuk menambahkan ikon untuk menu, termasuk ikon di tag:

<Ul id = "menu">
  <Li> <a href="#"> <span class = "ui-icon ui-icon-disk"> </ span> Simpan </a> </ li>
</ Ul>

Menu (Menu) secara otomatis menambahkan padding yang diperlukan untuk ada ikon entri.

alat pemisah

elemen pemisah dapat dibuat dengan dimasukkannya item menu linknya, item menu hanya spasi / tanda hubung:

<Ul id = "menu">
  <Li> <a href="#"> Item 1 </a> </ li>
  <Li> - </ li>
  <Li> <a href="#"> Item 2 </a> </ li>
</ Ul>

interaksi keyboard

ENTER / SPACE: memanggil item menu tindakan telah fokus, dapat membuka submenu.
UP: pindah ke ajaran item menu.
BAWAH: pindah ke ajaran item menu berikutnya.
KANAN: Jika tersedia, kemudian membuka submenu.
KIRI: Tutup sub-menu saat ini, memindahkan fokus ke item menu induk. Jika fokus tidak pada sub-menu, tidak ada yang dilakukan.
ESCAPE: Tutup sub-menu saat ini, memindahkan fokus ke item menu induk. Jika fokus tidak pada sub-menu, tidak ada yang dilakukan.

Masukkan huruf a, memindahkan kursor ke entri pertama yang dimulai dengan huruf tersebut. Ulangi siklus karakter kehendak yang sama melalui entri yang cocok. Pada suatu waktu Anda memasukkan lebih karakter sesuai dengan karakter yang dimasukkan.

item menonaktifkan tersedia fokus keyboard, tetapi tidak memungkinkan interaksi apapun.

theming

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

ui-menu : wadah luar menu. Jika menu berisi ikon, elemen tambahan akan dengan ui-menu-icons , kelas.
- ui-menu-item : wadah item menu individu.
  - ui-menu-icon : melalui icons ikon sub-menu untuk mengatur pilihan.
- ui-menu-divider : elemen pemisah antara item menu.

mengandalkan

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

Menu jQuery UI sederhana (Menu).

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> komponen menu (Menu Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Gaya>
  Ui-menu {
    width: 200px;
  }
  </ Style>
  <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>
 
<Ul id = "menu">
  <Li> <a href="#"> Item 1 </a> </ li>
  <Li> <a href="#"> Item 2 </a> </ li>
  <Li> <a href="#"> Butir 3 </a>
    <Ul>
      <Li> <a href="#"> Barang 3-1 </a> </ li>
      <Li> <a href="#"> Barang 3-2 </a> </ li>
      <Li> <a href="#"> Barang 3-3 </a> </ li>
      <Li> <a href="#"> Barang 3-4 </a> </ li>
      <Li> <a href="#"> Barang 3-5 </a> </ li>
    </ Ul>
  </ Li>
  <Li> <a href="#"> Item 4 </a> </ li>
  <Li> <a href="#"> Butir 5 </a> </ li>
</ Ul>
 
<Script>
$ ( "#menu") .menu ();
</ Script>
 
</ Body>
</ Html>