Latest web development tutorials

jQuery UI API - menu partie (Menu Widget)

catégorie

Widgets (Widgets)

usage

Description: Avec la souris et le clavier pour la navigation interaction peut être menu à thème.

Nouvelle version: 1.9

Menu peut être créé avec toutes les balises valides, tant que l'élément a une relation parent stricte / enfant et chaque entrée a une ancre. L'élément le plus commun est une liste non ordonnée ( <ul> ): 

<Ul id = "menu">
  <Li> <a href="#"> Point 1 </a> </ li>
  <Li> <a href="#"> Point 2 </a> </ li>
  <Li> <a href="#"> Point 3 </a>
    <Ul>
      <Li> <a href="#"> article 3-1 </a> </ li>
      <Li> <a href="#"> article 3-2 </a> </ li>
      <Li> <a href="#"> article 3-3 </a> </ li>
      <Li> <a href="#"> article 3-4 </a> </ li>
      <Li> <a href="#"> article 3-5 </a> </ li>
    </ Ul>
  </ Li>
  <Li> <a href="#"> Point 4 </a> </ li>
  <Li> <a href="#"> Point 5 </a> </ li>
</ Ul>

Si vous utilisez un non <ul> / <li> la structure des menus et des options de menu en utilisant les mêmes éléments, utilisez les menus possibilité de faire la distinction entre les deux éléments, tels que les menus: "div.menuElement" .

En ajoutant à l'élément ui-state-disabled , classe pour désactiver tout élément de menu.

icône

Pour ajouter des icônes au menu, inclure une icône dans la balise: 

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

Menu (Menu) ajoute automatiquement le rembourrage nécessaire pour aucune icône d'entrée.

séparateur

éléments de séparation peuvent être créés par l'inclusion d'éléments de menu, non liés les options de menu espaces / tirets: 

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

Clavier interaction

  • ENTRER / ESPACE: appeler l'élément de menu d'action a le focus, peut ouvrir un sous-menu.
  • UP: passer à l'enseignement d'un élément de menu.
  • DOWN: passer au prochain point de menu enseignements.
  • DROITE: Si elle est disponible, puis ouvrez le sous-menu.
  • GAUCHE: Fermez le sous-menu actuel, déplacer le focus sur l'élément de menu parent. Si l'accent est mis non pas sur le sous-menu, rien ne se fait.
  • ESCAPE: Fermez le sous-menu actuel, déplacer le focus sur l'élément de menu parent. Si l'accent est mis non pas sur le sous-menu, rien ne se fait.

Entrez une lettre, déplacez le curseur sur la première entrée commençant par cette lettre. Répétez le même cycle caractère volonté par les entrées correspondantes. A un moment vous entrez plusieurs caractères correspondent aux caractères saisis.

Désactiver les éléments disponibles focus du clavier, mais ne permet pas d'interaction.

theming

Composant Menu (Menu Widget) en utilisant framework jQuery UI CSS pour définir l'aspect et la convivialité de son style. Si vous avez besoin d'utiliser le menu de style spécifié, vous pouvez utiliser le nom de la classe CSS suivante:

  • ui-menu : le menu du conteneur extérieur. Si le menu contient une icône, l'élément sera en outre avec un ui-menu-icons , classe.
    • ui-menu-item : un conteneur d'éléments de menu individuels.
      • ui-menu-icon : à travers les icons icônes de sous-menu pour définir les options.
    • ui-menu-divider : un élément de séparation entre les éléments de menu.

Fiez

informations complémentaires

  • La partie exige une certaine CSS fonctionnelle, sinon cela ne fonctionnera pas. Si vous créez un thème personnalisé, utilisez le fichier CSS widget spécifié comme un point de départ.

Exemples

Un menu jQuery UI simple (Menu). 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> composant Menu (Menu Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Style>
  .ui-menu {
    largeur: 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>
</ Head>
<Body>
 
<Ul id = "menu">
  <Li> <a href="#"> Point 1 </a> </ li>
  <Li> <a href="#"> Point 2 </a> </ li>
  <Li> <a href="#"> Point 3 </a>
    <Ul>
      <Li> <a href="#"> article 3-1 </a> </ li>
      <Li> <a href="#"> article 3-2 </a> </ li>
      <Li> <a href="#"> article 3-3 </a> </ li>
      <Li> <a href="#"> article 3-4 </a> </ li>
      <Li> <a href="#"> article 3-5 </a> </ li>
    </ Ul>
  </ Li>
  <Li> <a href="#"> Point 4 </a> </ li>
  <Li> <a href="#"> Point 5 </a> </ li>
</ Ul>
 
<Script>
$ ( "#menu") .menu ();
</ Script>
 
</ Body>
</ Html>

la