Latest web development tutorials

jQuery UI API - menu a parte (Menu Widget)

categoria

Widget (Widget)

uso

Descrizione: Con l'interazione del mouse e della tastiera per la navigazione può essere menu a tema.

Nuova versione: 1.9

Menu può essere creato con qualsiasi tag validi, finché l'elemento ha un rigoroso genitore rapporto / bambino e ogni voce ha un ancoraggio. L'elemento più comune è una lista non ordinata di ( <ul> ): 

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

Se si utilizza un non <ul> / <li> struttura per i menu e le voci di menu utilizzando gli stessi elementi, utilizzare menus possibilità di distinguere tra i due elementi, come ad esempio menus: "div.menuElement" .

Aggiungendo l'elemento ui-state-disabled , di classe per disabilitare qualsiasi voce di menu.

icona

Per aggiungere le icone al menu, includere un'icona nel tag: 

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

Menu (Menu) aggiunge automaticamente l'imbottitura necessario alcuna voce icona.

separatore

elementi separatori possono essere creati con l'inclusione di voci di menu non collegati, le voci di menu solo spazi / trattini: 

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

l'interazione della tastiera

  • ENTER / SPAZIO: richiamare la voce di menu azione è attiva, può aprire un sottomenu.
  • UP: spostare gli insegnamenti di una voce di menu.
  • DOWN: passare ai prossimi insegnamenti voce di menu.
  • DESTRA: se disponibile, quindi aprire il sottomenu.
  • SINISTRA: Chiudere il sottomenu corrente, spostare l'attenzione alla voce di menu principale. Se la messa a fuoco non è sul sotto-menu, non si fa nulla.
  • ESCAPE: Chiude il sottomenu corrente, spostare il focus alla voce di menu principale. Se la messa a fuoco non è sul sotto-menu, niente di niente.

Inserisci una lettera per spostare il focus alla prima voce che inizia con quella lettera. Ripetere lo stesso ciclo personaggio attraverso le voci corrispondenti. Un tempo si immettono più caratteri corrispondono il carattere inserito.

Disable items disponibili attivo della tastiera, ma non consente alcuna interazione.

tematizzazione

Componente Menu (Menu Widget) utilizzando framework jQuery UI CSS per definire l'aspetto del suo stile. Se è necessario utilizzare il menu stile specificato, è possibile utilizzare il seguente nome della classe CSS:

  • ui-menu : contenitore esterno del menu. Se il menu contiene una icona, l'elemento sarà inoltre con un ui-menu-icons , di classe.
    • ui-menu-item : un contenitore di singole voci di menu.
      • ui-menu-icon : attraverso le icons icone sottomenu per impostare le opzioni.
    • ui-menu-divider : un elemento separatore tra le voci di menu.

fare affidamento

Ulteriori informazioni

  • La parte richiede un po 'di CSS funzionale, altrimenti non funzionerà. Se si crea un tema personalizzato, utilizzare il file CSS widget di specificato come punto di partenza.

Esempi

Un semplice menu di jQuery UI (Menu). 

<! Html Doctype>
<Html lang = "it">
<Head>
  <META charset = "utf-8">
  <Title> componente Menu (Menu Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Style>
  .ui-menu {
    width: 200px;
  }
  </ Style>
  <Src = "script // code.jquery.com/jquery-1.10.2.js"> </ script>
  <Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Body>
 
<Ul id = "menu">
  <Li> <a href="#"> Articolo 1 </a> </ li>
  <Li> <a href="#"> Articolo 2 </a> </ li>
  <Li> <a href="#"> punto 3 </a>
    <Ul>
      <Li> <a href="#"> Articolo 3-1 </a> </ li>
      <Li> <a href="#"> Articolo 3-2 </a> </ li>
      <Li> <a href="#"> Articolo 3-3 </a> </ li>
      <Li> <a href="#"> Articolo 3-4 </a> </ li>
      <Li> <a href="#"> Articolo 3-5 </a> </ li>
    </ Ul>
  </ Li>
  <Li> <a href="#"> Articolo 4 </a> </ li>
  <Li> <a href="#"> Articolo 5 </a> </ li>
</ Ul>
 
<Script>
$ ( "#menu") .menu ();
</ Script>
 
</ Corpo>
</ Html>