jQuery Menu Editor, Constructor de menú multinivel

Comparte este Tutorial

jQuery Menu Editor, es un herramienta Html/Javascript para editar menus multinivel por medio de una interfaz amigable al usuario. Fue escrito para jQuery y 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. Una simple unorder list <ul> dentro del documento Html. Este elemento es el contenedor de los items del menu y funciona por medio de arrastrar & soltar (Drag & drop).
  3. Clase Javascript. Permite configurar y renderizar los items del menu dentro de la lista Drag & Drop. Tambien permite vincular el formulário de edición con la lista Drag & Drop y generar la estructura del menu en formato JSON.

El código esta inspirado en el plugin jquery-sortable-lists by camohub  sobre el cual se hicieron adaptaciones y mejoras para la característica de arrastrar y soltar. En un inicio se incluyó el plugin bootstrap-iconpicker by Victor Valencia, sin embargo fue necesário hacer adaptaciones sobre su código y actualmente el proyecto jQuery Menu Editor contiene una versión adaptada del plugin mencionado.

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.

jQuery Menu Editor es open source bajo licencia GPL 3.0 y está disponible en Github. Puedes obtenerlo 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

Para ser considerado un item del menu, cada elemento del formulário deberá llevar la clase “item-menu” (class=”item-menu”). De esta forma:

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 contiene partes basadas en 2 plugins: bootstrap-icon-picker y jquery-sortable-lists. La configuración de cada una de estas partes 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 clase 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

A continuación para cargar los datos (items del menu) usamos el método setData:

El método setData acepta como parámetro una string JSON o un array de objetos JSON.

Luego de adicionar/editar el menu, podemos obtener el menu en una string con formato JSON. Para eso usamos la función getString:

 

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.

Comparte este Tutorial