[jQuery] Nuevas características de jQuery UI 1.9 – Parte IV: Menubar

Posted on


El widget menubar es prácticamente igual al widget menu, la diferencia radica en que menubar está diseñado para tener muchas opciones, mientras que menu es más para 1 sola opción y sus respectivos ítems.

Lo primero para usar el menubar es crear una lista, la cual será el menú:

   1:  <div>
   2:      <ul id="ulMenu">
   3:          <li><a href="#">Microsoft</a>
   4:              <ul>
   5:                  <li><a href="#">MVA</a></li>
   6:                  <li><a href="#">MSDN</a></li>
   7:                  <li><a href="#">Technet</a></li>
   8:              </ul>
   9:          </li>
  10:          <li><a href="#">Redes Sociales</a>
  11:              <ul>
  12:                  <li><a href="#">Facebook</a></li>
  13:                  <li><a href="#">Twitter</a></li>
  14:                  <li><a href="#">LinkedIn</a></li>
  15:              </ul>
  16:          </li>
  17:      </ul>
  18:  </div>

Luego las referencias a los archivos js necesarios:

   1:  <link rel="Stylesheet" href="css/jquery.ui.all.css" />
   2:  <script src="js/jquery-1.6.2.js"></script>
   3:  <script src="js/ui/jquery.ui.core.js"></script>
   4:  <script src="js/ui/jquery.ui.widget.js"></script>
   5:  <script src="js/ui/jquery.ui.position.js"></script>
   6:  <script src="js/ui/jquery.ui.menu.js"></script>
   7:  <script src="js/ui/jquery.ui.menubar.js"></script>

Y finalmente el código jQuery:

   1:  $(function(){
   2:      $("#ulMenu").menubar({
   3:          autoExpand: true,
   4:          menuIcon: true
   5:      });
   6:  })

Lo único que se debe hacer es llamar el método menubar. He usado dos propiedades de configuración con este widget:

· autoExpand: De tipo booleana y permite especificar si las opciones del menú se muestran al colocar el mouse encima o al hacer click.

· menuIcon: De tipo booleana y permite definir si se muestra la flechita que indica que se tienen opciones hijas.

Finalmente vamos a tener algo como:

Imagen1

Como siempre les dejo el código con el ejemplo.

Descarga el ejemplo!

About these ads

6 comentarios en “[jQuery] Nuevas características de jQuery UI 1.9 – Parte IV: Menubar

    Alberth Hinostroza Ramos escribió:
    11/10/2011 en 17:17

    Una consulta, y donde podria conseguir mas temas para este control?

    Gracias.

    Jquery Ui | TagHall escribió:
    02/20/2012 en 02:50

    [...] "jqmodal", embeddedHeight: "400", embeddedWidth: "425", themeCSS: "" }); . [jQuery] Nuevas características de jQuery UI 1.9 Parte IV: Menubar … . [jQuery] Nuevas [...]

    martín escribió:
    02/28/2012 en 12:11

    como puedo hacer para que la entrada raíz sea linkeable, por ejemplo, en tu casa que al hacer click en Microsoft me vaya a una página?

    musclepharm assault review escribió:
    07/01/2013 en 10:27

    I seldom leave remarks, but i did a few searching and wound up here [jQuery] Nuevas caractersticas de jQuery UI 1.

    9 – Parte IV: Menubar Todo en ASP.NET. And I actually
    do have a few questions for you if it’s allright. Is it only me or does it look as if like a few of these responses come across like they are written by brain dead folks? :-P And, if you are writing at additional places, I’d
    like to follow everything new you have to post. Would you make a
    list of the complete urls of your community pages like your twitter feed, Facebook page or linkedin profile?

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s