Latest web development tutorials

jQuery UI exemple - menu (Menu)

Interagir avec la souris et le clavier peut être utilisé pour naviguer dans le menu thématisation.

Pour plus de détails sur les composants de menu, voir la documentation de l' API des composants de menu (le menu Widget) .

La fonction par défaut

Avec une configuration par défaut, désactivez le imbriquée des entrées de menu et menu. Il se compose d'une liste de thèmes convertis et ajoutés et prend en charge la souris et le clavier interaction. Essayez d'utiliser les touches de curseur pour naviguer dans le menu. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI menu (Menu) - La fonction par défaut </ 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>
  $ (Function () {
    $ ( "#menu") .menu ();
  });
  </ Script>
  <Style>
  .ui-menu {width: 150px;}
  </ Style>
</ Head>
<Body>
 
<Ul id = "menu">
  <Class = Li "ui-état désactivé"> <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-état désactivé"> <a href="#"> Ada </a> </ li>
      <Li> <a href="#"> Saarland </a> </ li>
      <Li> <a href="#"> Salzbourg </a> </ li>
    </ Ul>
  </ Li>
  <Li> <a href="#"> Saarland </a> </ li>
  <Li>
    <a href="#"> Salzbourg </a>
    <Ul>
      <Li>
        <a href="#"> Delphi </a>
        <Ul>
          <Li> <a href="#"> Ada </a> </ li>
          <Li> <a href="#"> Saarland </a> </ li>
          <Li> <a href="#"> Salzbourg </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="#"> Salzbourg </a> </ li>
        </ Ul>
      </ Li>
      <Li> <a href="#"> Perch </a> </ li>
    </ Ul>
  </ Li>
  <Class = Li "ui-état désactivé"> <a href="#"> Amesville </a> </ li>
</ Ul>
 
 
</ Body>
</ Html>

la

icône

Menu avec une configuration par défaut qui montre comment utiliser les menus avec des icônes. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> Menu jQuery UI (Menu) - icône </ 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>
  $ (Function () {
    $ ( "#menu") .menu ();
  });
  </ Script>
  <Style>
  .ui-menu {width: 150px;}
  </ Style>
</ Head>
<Body>
 
<Ul id = "menu">
  <Li> <a href="#"> <span class = "ui-icon ui-icon-disque"> </ span> save </a> </ li>
  <Li> <a href="#"> <span class = "ui-icon ui-icon-zoomin"> </ span> Agrandir </a> </ li>
  <Li> <a href="#"> <span class = "ui-icon ui-icon-zoomout"> </ span> affiner </a> </ li>
  <Class = Li "ui-état désactivé"> <a href="#"> <span class = "ui-icon ui-icon-print"> </ span> Imprimer ... </a> </ li >
  <Li>
    <a href="#"> jouer </a>
    <Ul>
      <Li> <a href="#"> <span class = "ui-icon ui-icon-cache-start"> </ span> sur un </a> </ li>
      <Li> <a href="#"> <span class = "ui-icon ui-icon-stop"> </ span> Arrêter </a> </ li>
      <Li> <a href="#"> <span class = "ui-icon ui-icon-play"> </ span> Lecture </a> </ li>
      <Li> <a href="#"> <span class = "ui-icon ui-icon-cache-end"> </ span> prochain </a> </ li>
    </ Ul>
  </ Li>
</ Ul>
 
 
</ Body>
</ Html>

la