jQuery Menu Editor, Constructor de menú multinivel

jQuery Menu Editor, es un herramienta Html/Javascript para editar menus multinivel por medio de una interfaz amigable al usuario. Como su nombre lo dice, fue escrito para jQuery y (en esta primera versión) adaptado para Bootstrap 3.x. Cuenta con tres principales elementos:

  1. Formulário de edición. Para editar/adicionar items al menu.
  2. Lista Drag & Drop multinivel. Permite mover los items por medio de arrastrar & soltar (Drag & drop).
  3. Código Javascript. Para vincular el formulário de edición con la lista Drag & Drop.

Al crear un menu con jQuery Menu Editor, obtenemos como resultado una string JSON que contiene toda la estructura del menu. Este esquema JSON representa un array de objetos donde cada objeto es un item del menú. Un ejemplo:

Como podemos ver, el esquema JSON representa un array de objetos. Para jQuery Menu Editor, cada uno de los objetos del array, es un item con las siguientes propiedades:

text: El texto del link. Estará en la tag <a>

href: El hipervínculo. Si el item contiene submenus, puede usarse el símbolo “#” como valor de href

title: Es la propiedad “title” en la tag <a>. Este atributo también es conocido como “hint” o “tooltip”.

icon: Es el icono para el item del menú. Se recomienda usar iconos desde clases CSS (Ejemplo: FontAwesome, Glyphicon, etc)

children: JQuery Menu Editor construye menús multinivel, por tanto, la propiedad “children” se refiere a submenus. Cada submenu es un array de objetos con las mismas propiedades mencionadas.

Esta string JSON, puede ser usada para crear menús dinamicos desde PHP usando la libreria PHP Quick Menu, que fue explicada en un anterior post.

En este tutorial veremos como configurar jQuery Menu Editor, para poder incluirlo en nuestros proyectos.

Requerimientos de jQuery Menu Editor

Como fue mencionado al inicio del texto, jQuery Menu Editor está adaptado para Bootstrap 3.x y jQuery. Ademas cuenta otros plugins jQuery incorporados. Siendo así, estos son los requerimientos:

 JQuery Menu editor fue construido a partir de estos recursos, implementando 3 elementos principales: formulario de edición, Lista drag & drop y la función Javascript. Es importante mencionar que fueron adicionadas nuevas funcionalidades sobre el plugin jQuery Sortable Lists.

jQuery Menu Editor es open source bajo licencia GPL 3.0 y está disponible en Github. Puedes bajarlo desde este Link, y empezamos.

Formulário de edición

Este formulario nos permite adicionar y modificar los ítems del menú.

jquery menu editor formulario

Cada elemento del formulário, deberá llevar en el nombre y en el atributo id, el prefijo “mnu_” seguido del nombre de la propiedad del item de menu. Por ejemplo, el input con nombre “mnu_text”, hace referencia a la propiedad “text” del item, que es el texto del item.

Lista Drag & Drop

Todo la estructura del menú en construcción estará sobre un elemento <ul> (unordered list). La característica de arrastrar y soltar (Drag & Drop), será sobre este elemento, por lo que necesariamente, el elemento tiene que tener el atributo identificador id. Más adelante, por medio del identificador id, definiremos la configuración en el código Javascript.

jquery menu editor drag & drop

El código Html sería el siguiente:

Tambien es posible usar un menu previamente creado en Html. Para eso tenemos que hacer algunas consideraciones, como por ejemplo, el uso de atributos data-. Cada elemento <li>, tiene que llevar el atributo “data-” para cada atributo del item de menu. Como vemos en este fragmento de código:

Podemos ver el código completo en este Link.

Código Javascript

Como fue mencionado al principio de este tutorial, jQuery Menu Editor hace uso de 2 plugins: bootstrap-icon-picker y jquery-sortable-lists. La configuración de cada uno de estos plugins se lo hace de forma independiente.

El código consiste en una función javascript que configura la lista Drag & Drop como también el formulario Html. De ahí la importancia de crear el Formulario Html con los atributos estándar mencionados anteriormente.

Los parámetros de la función menuEditor son los siguientes:

id: El identificador del elemento <ul> (Atributo “id”)

Config: Objeto principal con las siguientes configuraciones:

  • listOptions: Objeto con las configuraciones para la Lista Drag & Drop. Las configuraciones serán aquellas del plugin jquery-sortable-lists y podemos ver su documentación en este Link.
  • iconPicker: Objeto con las configuraciones para el plugin Bootstrap Icon Picker. Podemos ver su documentación en este Link.
  • labelEdit: Texto para el botón de “Editar Item” en la Lista Drag & Drop
  • labelRemove: Texto para el botón de “Excluir Item” en la Lista Drag & Drop

Resultado Final (jQuery Menu Editor en acción)

Podemos ver todo funcionando en este link → Demo

El código fuente completo lo encontramos en el repositorio de Github. Te agradeceré si apoyas este proyecto con un simple Click en la estrella de calificación en GitHub. Eso me ayuda bastante a continuar manteniendo actualizado el código fuente.

Escríbeme en los comentarios que te ha parecido esta herramienta. Si tienes alguna sugerencia, duda o comentario sobre esta primera versión de jQuery Menu Editor, escríbeme también en los comentarios. Estaré atento para responder.

Escribir un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *