jQuery Menu Editor, construye tus menús con esta biblioteca para jQuery
Cuando se trata de desarrollar aplicaciones, una de las principales preocupaciones es la gestión de la información y la necesidad de almacenar y compartir datos en un formato específico. En el caso de una aplicación con múltiples menús, una solución muy efectiva es guardar las estructuras de estos menús en formato JSON. Sin embargo, la construcción de estructuras de menús en formato JSON puede ser un desafío para muchos desarrolladores. Es aquí donde entra en juego la herramienta jQuery Menu Editor, una solución poderosa y versátil que permite construir estructuras de menús en formato JSON de manera efectiva y eficiente.
¿Que es jQuery Menu Editor?
jQuery Menu Editor es un proyecto de código abierto que utiliza la biblioteca de JavaScript jQuery para proporcionar una interfaz de usuario para editar menús de navegación dinámicos. La interfaz de usuario permite a los usuarios agregar, eliminar y ordenar (mediante arrastrar y soltar) elementos de menú con facilidad, y el código generado se puede usar para crear menús de navegación multi-nivel personalizados para aplicaciones web
El proyecto jQuery Menu Editor incluye archivos HTML, CSS y JavaScript, así como ejemplos y documentación para ayudar a los usuarios a implementar y utilizar la biblioteca. Si estás buscando una manera fácil de editar menús de navegación dinámicos en tus proyectos de desarrollo web, jQuery Menu Editor es una buena opción para explorar.
Cómo usar jQuery Menu Editor
1) Descargar la biblioteca y dependencias
Descargamos la biblioteca desde el repositorio en Github, desde la página de releases, buscamos la última versión estable en el repositorio (página de releases)
Luego de obtener la biblioteca, vamos a crear un archivo index.html y adicionar la biblioteca y sus dependencias (Javascript y hojas de estilo) en los lugares que correspondan.
Las hojas de estilo van dentro de la tag <head>:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"/>
<link rel="stylesheet" href="bootstrap-iconpicker/css/bootstrap-iconpicker.min.css">Los archivos Javascript van justo antes de </body>:
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<script type="text/javascript" src="bootstrap-iconpicker/js/iconset/fontawesome5-3-1.min.js"></script>
<script type="text/javascript" src="bootstrap-iconpicker/js/bootstrap-iconpicker.min.js"></script>
<script type="text/javascript" src="jquery-menu-editor.min.js"></script>2) Elementos HTML
Para implementar el editor de menú, además del código Javascript que será explicará más adelante, se necesitan 2 elementos en la página HTML: una lista no ordenada para montar la estructura del menú, y un formulario para la edición de los items del menú.
Este es el código HTML para la lista ordenada:
<ul id="myEditor" class="sortableLists list-group">
</ul>En este código hemos agregado una lista HTML que deberá tener la clase CSS sortableLists list-group, además de un atributo id, que servirá para identificar el elemento donde se montará la estructura del menú que será generada de forma dinámica usando una estructura JSON.
Ahora crearemos el formulario para la edición de los items del menú. Se necesitan inputs de entrada para cada uno de los atributos del menú, vale decir, para el texto que será el atributo “text”, la URL o ruta (path) de la aplicación que será el atributo “href”, el atributo “target”, y el ícono del item que será el atributo “icon”.
Para el ícono hacemos uso del plugin jQuery Bootstrap-Iconpicker, este plugin nos permitirá seleccionar un ícono de la biblioteca Fontawesome.
El botón que se utiliza para elegir el ícono, deberá tener un id único. El valor del atributo id, es la concatenación del id de la lista + “_icon”.
Cada input del formulario deberá tener la clase “item-menu”, esto permitirá a la clase MenuEditor reconocer los valores de los inputs del formulario que formarán parte de los atributos de cada item del menú.
<div class="card border-primary mb-3">
<div class="card-header bg-primary text-white">Edit item</div>
<div class="card-body">
<form id="frmEdit" class="form-horizontal">
<div class="form-group">
<label for="text">Text</label>
<div class="input-group">
<input type="text" class="form-control item-menu" name="text" id="text" placeholder="Text">
<div class="input-group-append">
<button type="button" id="myEditor_icon" class="btn btn-outline-secondary"></button>
</div>
</div>
<input type="hidden" name="icon" class="item-menu">
</div>
<div class="form-group">
<label for="href">URL</label>
<input type="text" class="form-control item-menu" id="href" name="href" placeholder="URL">
</div>
<div class="form-group">
<label for="target">Target</label>
<select name="target" id="target" class="form-control item-menu">
<option value="_self">Self</option>
<option value="_blank">Blank</option>
<option value="_top">Top</option>
</select>
</div>
<div class="form-group">
<label for="title">Tooltip</label>
<input type="text" name="title" class="form-control item-menu" id="title" placeholder="Tooltip">
</div>
</form>
</div>
<div class="card-footer">
<button type="button" id="btnUpdate" class="btn btn-primary" disabled><i class="fas fa-sync-alt"></i> Update</button>
<button type="button" id="btnAdd" class="btn btn-success"><i class="fas fa-plus"></i> Add</button>
</div>
</div>3) Instanciar la clase MenuEditor en Javascript
Lo siguiente que haremos es instanciar la clase MenuEditor en Javascript
var iconPickerOptions = {searchText: "Buscar...", labelHeader: "{0}/{1}"};
var sortableListOptions = {
placeholderCss: {'background-color': "#cccccc"}
};
var editor = new MenuEditor('myEditor',
{
listOptions: sortableListOptions,
iconPicker: iconPickerOptions,
maxLevel: 2,
});En este código hemos creado un objeto llamado editor, este objeto es una instancia de la clase MenuEditor. Podemos ver que el constructor de la clase MenuEditor acepta 2 parámetros, el primer parámetro es el id asignado a la lista HTML (la tag <ul> que vimos en el paso 2), el segundo parámetro son las opciones disponibles en la clase MenuEditor. Estas opciones son listOptions, iconPicker y maxLevel. Se explicarán estas opciones más adelante.
Además de crear el objeto editor, tenemos que vincular el formulario al mismo. Esto lo hacemos de la siguiente forma:
editor.setForm($('#frmEdit'));
editor.setUpdateButton($('#btnUpdate'));
$("#btnUpdate").click(function(){
editor.update();
});
$('#btnAdd').click(function(){
editor.add();
});En este código se establece para el objeto editor el formulario HTML con id frmEdit (el formulario HTML fue creado en el paso 2), además de vincular el botón para las actualizaciones de los items cuando se haga la edición de los mismos. También se establecen las funciones que se ejecutarán al dar clic en los botones de editar (botón con id “btnUpdate”) y adicionar (botón con id “btnAdd”) items al menú.
El código Javascript completo queda de la siguiente forma:
var iconPickerOptions = {searchText: "Buscar...", labelHeader: "{0}/{1}"};
var sortableListOptions = {
placeholderCss: {'background-color': "#cccccc"}
};
var editor = new MenuEditor('myEditor',
{
listOptions: sortableListOptions,
iconPicker: iconPickerOptions,
maxLevel: 2,
});
editor.setForm($('#frmEdit'));
editor.setUpdateButton($('#btnUpdate'));
$("#btnUpdate").click(function(){
editor.update();
});
$('#btnAdd').click(function(){
editor.add();
});Hasta este punto ya tenemos el editor de menús funcionando, lo que se explicará a continuación son los métodos y opciones disponibles en la clase MenuEditor.
Métodos
setData: Para cargar el editor de menús con datos iniciales invocamos el método setData que recibe como parámetro un array de objetos anidados como el que tenemos en este ejemplo:
[
{
"href": "http://home.com",
"icon": "fas fa-home",
"text": "Home",
"target": "_top",
"title": "My Home"
},
{
"icon": "fas fa-chart-bar",
"text": "Opcion2"
},
{
"icon": "fas fa-bell",
"text": "Opcion3"
},
{
"icon": "fas fa-crop",
"text": "Opcion4"
},
{
"icon": "fas fa-flask",
"text": "Opcion5"
},
{
"icon": "fas fa-map-marker",
"text": "Opcion6"
},
{
"icon": "fas fa-search",
"text": "Opcion7",
"children": [
{
"icon": "fas fa-plug",
"text": "Opcion7-1",
"children": [
{
"icon": "fas fa-filter",
"text": "Opcion7-1-1"
}
]
}
]
}
]Invocamos al método setData de la siguiente forma:
var arrayjson = [{"href":"http://home.com","icon":"fas fa-home","text":"Home", "target": "_top", "title": "My Home"},{"icon":"fas fa-chart-bar","text":"Opcion2"},{"icon":"fas fa-bell","text":"Opcion3"},{"icon":"fas fa-crop","text":"Opcion4"},{"icon":"fas fa-flask","text":"Opcion5"},{"icon":"fas fa-map-marker","text":"Opcion6"},{"icon":"fas fa-search","text":"Opcion7","children":[{"icon":"fas fa-plug","text":"Opcion7-1","children":[{"icon":"fas fa-filter","text":"Opcion7-1-1"}]}]}];
editor.setData(arrayJson);getString: La función getString nos retorna una cadena (string) que contiene la estructura JSON del menú. Esta función getString debería ser ejecutada cuando ya finalizamos la edición del menú, y la cadena que nos retorna debería ser guardada por ejemplo en una tabla de base de datos. La forma de ejecutar el método es como sigue a continuación:
var str = editor.getString();
console.log(str); Opciones de jQuery Menu Editor
La clase Javascript MenuEditor mediante su constructor tiene las siguientes opciones:
listOptions: Son opciones que son aplicadas para la lista <ul> en la cual se monta el editor de menús. Estas opciones son: placeholderCss (objeto que contiene atributos CSS que se aplican al nuevo lugar creado para el item que está siendo movido mediante arrastre del item)
iconPicker: Son las opciones que cuenta el plugin Bootstrap IconPicker,
maxLevel: Es el número máximo de niveles que permitirá el editor de menús.
Conclusión
Actualmente jQuery Menu Editor es ampliamente utilizada en la comunidad de desarrolladores, el repositorio cuenta con una calificación de 173 estrellas y 73 forks en Github (fecha actual 04/03/2023) y es utilizada por la plataforma No-Code llamada Saltcorn. jQuery Menu Editor ofrece una solución accesible y rápida para construir menús en formato JSON, lo que permite a los desarrolladores centrarse en otras tareas importantes del proyecto. Con esta herramienta, la construcción de menús en formato JSON se vuelve una tarea fácil y eficiente, lo que hace de jQuery Menu Editor una herramienta esencial en el desarrollo de aplicaciones.
About the Author
