Latest web development tutorials

jQuery UI contoh - menu (Menu)

Berinteraksi dengan mouse dan keyboard dapat digunakan untuk menavigasi menu theming.

Untuk rincian lebih lanjut tentang komponen menu, lihat dokumentasi API komponen menu (Widget Menu) .

Fungsi standar

Dengan konfigurasi default, menonaktifkan entri menu dan menu bersarang. Ini terdiri dari daftar tema dikonversi dan ditambahkan dan mendukung mouse dan keyboard interaksi. Coba gunakan tombol kursor untuk navigasi menu. 

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI menu (Menu) - Fungsi standar </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Fungsi () {
    $ ( "#menu") .menu ();
  });
  </ Script>
  <Gaya>
  Ui-menu {width: 150px;}
  </ Style>
</ Kepala>
<Body>
 
<Ul id = "menu">
  <Class Li = "ui-negara-cacat"> <a href="#"> Aberdeen </a> </ li>
  <Li> <a href="#"> Ada </a> </ li>
  <Li> <a href="#"> Adamsville </a> </ li>
  <Li> <a href="#"> Addyston </a> </ li>
  <Li>
    <a href="#"> Delphi </a>
    <Ul>
      <Class Li = "ui-negara-cacat"> <a href="#"> Ada </a> </ li>
      <Li> <a href="#"> Saarland </a> </ li>
      <Li> <a href="#"> Salzburg </a> </ li>
    </ Ul>
  </ Li>
  <Li> <a href="#"> Saarland </a> </ li>
  <Li>
    <a href="#"> Salzburg </a>
    <Ul>
      <Li>
        <a href="#"> Delphi </a>
        <Ul>
          <Li> <a href="#"> Ada </a> </ li>
          <Li> <a href="#"> Saarland </a> </ li>
          <Li> <a href="#"> Salzburg </a> </ li>
        </ Ul>
      </ Li>
      <Li>
        <a href="#"> Delphi </a>
        <Ul>
          <Li> <a href="#"> Ada </a> </ li>
          <Li> <a href="#"> Saarland </a> </ li>
          <Li> <a href="#"> Salzburg </a> </ li>
        </ Ul>
      </ Li>
      <Li> <a href="#"> Perch </a> </ li>
    </ Ul>
  </ Li>
  <Class Li = "ui-negara-cacat"> <a href="#"> Amesville </a> </ li>
</ Ul>
 
 
</ Body>
</ Html>

icon

Menu dengan konfigurasi default yang menunjukkan cara menggunakan menu dengan ikon. 

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> menu jQuery UI (Menu) - ikon </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Fungsi () {
    $ ( "#menu") .menu ();
  });
  </ Script>
  <Gaya>
  Ui-menu {width: 150px;}
  </ Style>
</ Kepala>
<Body>
 
<Ul id = "menu">
  <Li> <a href="#"> <span class = "ui-icon ui-icon-disk"> </ span> save </a> </ li>
  <Li> <a href="#"> <span class = "ui-icon ui-icon-zoomin"> </ span> Memperbesar </a> </ li>
  <Li> <a href="#"> <span class = "ui-icon ui-icon-zoomout"> </ span> suling </a> </ li>
  <Class Li = "ui-negara-cacat"> <a href="#"> <span class = "ui-icon ui-icon-print"> </ span> Print ... </a> </ li >
  <Li>
    <a href="#"> bermain </a>
    <Ul>
      <Li> <a href="#"> <span class = "ui-icon ui-icon-mencari-start"> </ span> pada </a> </ li>
      <Li> <a href="#"> <span class = "ui-icon ui-icon-stop"> </ span> Berhenti </a> </ li>
      <Li> <a href="#"> <span class = "ui-icon ui-icon-play"> </ span> Mainkan </a> </ li>
      <Li> <a href="#"> <span class = "ui-icon ui-icon-mencari-end"> </ span> </a> berikutnya </ li>
    </ Ul>
  </ Li>
</ Ul>
 
 
</ Body>
</ Html>