Latest web development tutorials

jQuery UI ejemplo - menú (Menú)

Interactuar con el ratón y el teclado se puede utilizar para navegar por el menú de la tematización.

Para más detalles sobre los componentes del menú, consulte la documentación de la API componentes del menú (el menú de widgets) .

La función predeterminada

Con una configuración predeterminada, desactivar el menú de opciones de menú y anidada. Consiste en una lista de temas y convertidos añadido y apoya la interacción del ratón y el teclado. Trate de usar las teclas de cursor para navegar por el menú. 

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI menú (menú) - La función por defecto </ 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-menú {width: 150px;}
  </ Style>
</ Head>
<Cuerpo>
 
<Ul id = "Menú">
  <Li class = "ui-estado deshabilitado"> <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-estado deshabilitado"> <a href="#"> Ada </a> </ li>
      <Li> <a href="#"> Sarre </a> </ li>
      <Li> <a href="#"> Salzburgo </a> </ li>
    </ Ul>
  </ Li>
  <Li> <a href="#"> Sarre </a> </ li>
  <Li>
    <a href="#"> Salzburgo </a>
    <Ul>
      <Li>
        <a href="#"> Delphi </a>
        <Ul>
          <Li> <a href="#"> Ada </a> </ li>
          <Li> <a href="#"> Sarre </a> </ li>
          <Li> <a href="#"> Salzburgo </a> </ li>
        </ Ul>
      </ Li>
      <Li>
        <a href="#"> Delphi </a>
        <Ul>
          <Li> <a href="#"> Ada </a> </ li>
          <Li> <a href="#"> Sarre </a> </ li>
          <Li> <a href="#"> Salzburgo </a> </ li>
        </ Ul>
      </ Li>
      <Li> <a href="#"> perca </a> </ li>
    </ Ul>
  </ Li>
  <Li class = "ui-estado deshabilitado"> <a href="#"> Amesville </a> </ li>
</ Ul>
 
 
</ Body>
</ Html>

icono

Menú con una configuración por defecto que muestra cómo utilizar los menús con iconos. 

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> Menú jQuery UI (Menú) - icono </ 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-menú {width: 150px;}
  </ Style>
</ Head>
<Cuerpo>
 
<Ul id = "Menú">
  <Li> <a href="#"> <span class = "ui-ui-icono icono de disco"> </ span> guardar </a> </ li>
  <Li> <a href="#"> <span class = "ui ui-icon-icono-encabritado"> </ span> Ampliar </a> </ li>
  <Li> <a href="#"> <span class = "ui ui-icon-icono-ZoomOut"> </ span> refinar </a> </ li>
  <Li class = "ui-estado deshabilitado"> <a href="#"> <span class = "ui ui-icon-icono-print"> </ span> Imprimir ... </a> </ li >
  <Li>
    <a href="#"> jugar </a>
    <Ul>
      <Li> <a href="#"> <span class = "ui ui-icon-icono-buscar-start"> </ span> en un </a> </ li>
      <Li> <a href="#"> <span class = "ui ui-icon-icono-stop"> </ span> Anular </a> </ li>
      <Li> <a href="#"> <span class = "ui ui-icon-icono-play"> </ span> Reproducir </a> </ li>
      <Li> <a href="#"> <span class = "ui ui-icon-icono-buscar-end"> </ span> siguiente </a> </ li>
    </ Ul>
  </ Li>
</ Ul>
 
 
</ Body>
</ Html>