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

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:

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

Descarga el ejemplo!

About these ads