Latest web development tutorials

jQuery UI esempio - menu (Menu)

Interagire con il mouse e la tastiera può essere usata per navigare nel menu di tematizzazione.

Per maggiori dettagli sui componenti del menu, consultare la documentazione API componenti del menu (il menu Widget) .

La funzione di default

Con una configurazione di default, disattivare la nidificato voci di menu e menu. Si compone di un elenco di temi convertite e aggiunte e supporta l'interazione del mouse e la tastiera. Provare a utilizzare i tasti cursore per navigare nel menu. 

<! Html Doctype>
<Html lang = "it">
<Head>
  <META charset = "utf-8">
  <Title> jQuery UI menu (Menu) - La funzione di default </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
  <Src = "script // 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 class = "ui-stato disabilitato"> <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>
      <Li class = "ui-stato disabilitato"> <a href="#"> Ada </a> </ li>
      <Li> <a href="#"> Saarland </a> </ li>
      <Li> <a href="#"> Salisburgo </a> </ li>
    </ Ul>
  </ Li>
  <Li> <a href="#"> Saarland </a> </ li>
  <LI>
    <a href="#"> Salisburgo </a>
    <Ul>
      <LI>
        <a href="#"> Delphi </a>
        <Ul>
          <Li> <a href="#"> Ada </a> </ li>
          <Li> <a href="#"> Saarland </a> </ li>
          <Li> <a href="#"> Salisburgo </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="#"> Salisburgo </a> </ li>
        </ Ul>
      </ Li>
      <Li> <a href="#"> Perch </a> </ li>
    </ Ul>
  </ Li>
  <Li class = "ui-stato disabilitato"> <a href="#"> Amesville </a> </ li>
</ Ul>
 
 
</ Corpo>
</ Html>

icona

Menu con una configurazione di default che mostra come utilizzare i menu con icone. 

<! Html Doctype>
<Html lang = "it">
<Head>
  <META charset = "utf-8">
  <Title> menù jQuery UI (Menu) - icona </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
  <Src = "script // 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 ui-icon-icon-disk"> </ span> salvare </a> </ li>
  <Li> <a href="#"> <span class = "ui ui-icon-icon-zoomin"> </ span> Ingrandisci </a> </ li>
  <Li> <a href="#"> <span class = "ui ui-icon-icon-ZoomOut"> </ span> affinare </a> </ li>
  <Li class = "ui-stato disabilitato"> <a href="#"> <span class = "ui ui-icon-icon-print"> </ span> Stampa ... </a> </ li >
  <LI>
    <a href="#"> giocare </a>
    <Ul>
      <Li> <a href="#"> <span class = "ui ui-icon-icon-cercare-start"> </ span> su un </a> </ li>
      <Li> <a href="#"> <span class = "ui ui-icon-icon-stop"> </ span> STOP </a> </ li>
      <Li> <a href="#"> <span class = "ui ui-icon-icon-play"> </ span> Play </a> </ li>
      <Li> <a href="#"> <span class = "ui ui-icon-icon-cercare-end"> </ span> successivo </a> </ li>
    </ Ul>
  </ Li>
</ Ul>
 
 
</ Corpo>
</ Html>