El widget de menú en jQuery UI crea un menú que contiene elementos y subelementos en un submenú relacionado con un elemento particular del menú. Los elementos del menú se crean usando elementos de marcado usando una relación similar a padre-hijo que se puede crear usando listas y listas anidadas. Cada elemento del menú generalmente corresponde a una página específica y, por lo tanto, cada uno de estos elementos se encuentra entre una etiqueta anclada.
Sintaxis:
$(selector, context).menu(options)
Puede proporcionar una o más opciones a la vez mediante un objeto de JavaScript.
Si hay más de una opción para proporcionar, puede separarlas usando una coma de la siguiente manera
$(selector, context).menu ("action", params)
Para la navegación, podemos crear un menú usando jQuery UI. Podemos crear un menú principal y un submenú usando el menú. Crearemos una lista y una sublista en HTML y se usarán para crear el menú usando jQuery UI.
- Ancho del menú: De acuerdo con su diseño y estilo, el menú puede tener un ancho diferente, es posible que necesitemos ajustar el ancho para que podamos mantener las propiedades de este estilo dentro de nuestra etiqueta principal.
Ejemplo 1:
<!DOCTYPE html><html><head><linkhref=rel='stylesheet'><scriptsrc=</script><scriptsrc=</script><style>.ui-menu {width: 8em;}</style></head><body><br><br><ulid='my_cs_menu'><li><div>Networking</div></li><li><div>Office Mgmt</div><ul><li><div>Word</div></li><li><div>Excel</div></li><li><div>Power Point</div></li><li><div>Access</div></li></ul></li><li><div>Programming</div><ul><li><div>Backend</div><ul><li><div>PHP</div></li><li><div>Python</div></li><li><div>JSP</div></li></ul></li><li><div>Frontend</div></li></ul></li><li><div>Games</div></li></ul><script>$(document).ready(function() {$("#my_cs_menu").menu();})</script></body></html> - Deshabilitar menú: podemos deshabilitar un menú usando la opción de deshabilitar y configurando su valor en verdadero . De forma predeterminada, el valor se establece como falso.
Ejemplo 2:
<!DOCTYPE html><html><head><linkhref=rel='stylesheet'><scriptsrc=</script><scriptsrc=</script><style>.ui-menu {width: 8em;}</style></head><body><br><br><ulid='my_cs_menu'><li><div>Networking</div></li><li><div>Office Mgmt</div><ul><li><div>Word</div></li><li><div>Excel</div></li><li><div>Power Point</div></li><li><div>Access</div></li></ul></li><li><div>Programming</div><ul><li><div>Backend</div><ul><li><div>PHP</div></li><li><div>Python</div></li><li><div>JSP</div></li></ul></li><li><div>Frontend</div></li></ul></li><li><div>Games</div></li></ul><script>$(document).ready(function() {$("#my_cs_menu").menu({disabled: true});})</script></body></html>
- Iconos: para apuntar a submenús desde el menú principal podemos usar iconos. Podemos cambiar los iconos según nuestra elección. Podemos asignar otros valores como: ui-icon-circle-triangle-e, ui-icon-arrow-1-e, ui-icon-arrowthick-1-e, ui-icon-triangle-1-e
Ejemplo 3:
<!DOCTYPE html><html><head><linkhref=rel='stylesheet'><scriptsrc=</script><scriptsrc=</script><style>.ui-menu {width: 8em;}</style></head><body><ulid='my_cs_menu'><li><div>Networking</div></li><li><div>Office Mgmt</div><ul><li><div>Word</div></li><li><div>Excel</div></li><li><div>Power Point</div></li><li><div>Access</div></li></ul></li><li><div>Programming</div><ul><li><div>Backend</div><ul><li><div>PHP</div></li><li><div>Python</div></li><li><div>JSP</div></li></ul></li><li><div>Frontend</div></li></ul></li><li><div>Games</div></li></ul><script>$(document).ready(function() {$("#my_cs_menu").menu({menus: 'ul'});})</script></body></html>
- Menús: Podemos configurar el selector para los elementos del menú. Por defecto, es ul , podemos cambiar este valor a otros elementos como div .
Nota: La salida seguirá siendo la misma que en el ejemplo 2.
Ejemplo 4:
<!DOCTYPE html><html><head><linkhref=rel='stylesheet'><scriptsrc=</script><scriptsrc=</script><style>.ui-menu {width: 8em;}</style></head><body><ulid='my_cs_menu'><li><div>Networking</div></li><li><div>Office Mgmt</div><ul><li><div>Word</div></li><li><div>Excel</div></li><li><div>Power Point</div></li><li><div>Access</div></li></ul></li><li><div>Programming</div><ul><li><div>Backend</div><ul><li><div>PHP</div></li><li><div>Python</div></li><li><div>JSP</div></li></ul></li><li><div>Frontend</div></li></ul></li><li><div>Games</div></li></ul><script>$(document).ready(function() {$("#my_cs_menu").menu({menus: 'ul'});})</script></body></html>
- Posición en el menú: podemos establecer la posición del submenú en relación con el menú principal configurando el valor de posición.
Aquí hemos utilizado este valor de posición para establecer la posición de la lista del submenú.position: { my: "left bottom", at: "right top" }- my: Es el cuadro de información sobre herramientas.
- en: el elemento para el que se muestra la información sobre herramientas.
- Toda alineación horizontal puede tomar tres posiciones: izquierda , derecha o centro
- Toda alineación vertical puede tomar tres posiciones: superior , inferior o central
Ejemplo 5:
<!DOCTYPE html><html><head><linkhref=rel='stylesheet'><scriptsrc=</script><scriptsrc=</script><style>.ui-menu {width: 8em;}</style></head><body><br><br><br><br><br><br><ulid='my_cs_menu'><li><div>Networking</div></li><li><div>Office Mgmt</div><ul><li><div>Word</div></li><li><div>Excel</div></li><li><div>Power Point</div></li><li><div>Access</div></li></ul></li><li><div>Programming</div><ul><li><div>Backend</div><ul><li><div>PHP</div></li><li><div>Python</div></li><li><div>JSP</div></li></ul></li><li><div>Frontend</div></li></ul></li><li><div>Games</div></li></ul><script>$(document).ready(function() {$("#my_cs_menu").menu({position: {my: "left bottom",at: "right top"}});})</script></body></html>
- Desenfoque: podemos activar cualquier script asociándolo con el método de desenfoque del menú. En el siguiente ejemplo, recopilaremos el nombre del elemento del que acabamos de salir utilizando el método de desenfoque.
Ejemplo 6:
<!DOCTYPE html><html><head><linkhref=rel='stylesheet'><scriptsrc=</script><scriptsrc=</script><style>.ui-menu {width: 8em;}</style></head><body><br><br><br><br><divid=display></div><br><br><ulid='my_cs_menu'><li><div>Networking</div></li><li><div>Office Mgmt</div><ul><li><div>Word</div></li><li><div>Excel</div></li><li><div>Power Point</div></li><li><div>Access</div></li></ul></li><li><div>Programming</div><ul><li><div>Backend</div><ul><li><div>PHP</div></li><li><div>Python</div></li><li><div>JSP</div></li></ul></li><li><div>Frontend</div></li></ul></li><li><div>Games</div></li></ul><script>$(document).ready(function() {$("#my_cs_menu").menu({blur: function(event, ui) {$('#display').html(" <b>Moved From: </b>"+ ui.item.text());}});})</script></body></html> - Destruir: podemos aplicar el evento de destrucción y eliminar la funcionalidad del menú e iniciar el menú nuevamente usando el evento de clic del botón de opción.
Ejemplo 7:
<!DOCTYPE html><html><head><linkhref=rel='stylesheet'><scriptsrc=</script><scriptsrc=</script><style>.ui-menu {width: 8em;}</style></head><body><br><br><br><br><divid=display>Display here</div><br><br><inputtype='radio'name='r_select'id='r2'value='destroy'>destroy<inputtype='radio'name='r_select'id='r2'value='initialize'>initialize<br><divid=display></div><br><br><ulid='my_cs_menu'><li><div>Networking</div></li><li><div>Office Mgmt</div><ul><li><div>Word</div></li><li><div>Excel</div></li><li><div>Power Point</div></li><li><div>Access</div></li></ul></li><li><div>Programming</div><ul><li><div>Backend</div><ul><li><div>PHP</div></li><li><div>Python</div></li><li><div>JSP</div></li></ul></li><li><div>Frontend</div></li></ul></li><li><div>Games</div></li></ul><script>$(document).ready(function() {$("#my_cs_menu").menu({});$("input:radio[name=r_select]").click(function() {var selection = $(this).val()if (selection == 'destroy') {$("#my_cs_menu").menu(selection);$('#display').html(" <b>destroy method invoked</b>");}if (selection == 'initialize') {$("#my_cs_menu").menu();$('#display').html(" <b>Menu Initialized</b>");}})})</script></body></html>
Publicación traducida automáticamente
Artículo escrito por mayeshmohapatra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA