Hogar › Servicios › Menú contextual personalizado usando JavaScript

Menú contextual personalizado usando JavaScript

Traducción
Tutorial

Las aplicaciones web hoy en día se están convirtiendo en un nuevo paso hacia el desarrollo de la web. Estos están lejos de ser sitios de información ordinarios. Ejemplos de aplicaciones web avanzadas incluyen Gmail y Dropbox. A medida que las aplicaciones web crecen en funcionalidad, disponibilidad y utilidad, también aumenta la necesidad de aumentar la eficiencia de su uso. Esta guía analizará la creación de algo tan útil como su propio menú contextual y, en particular:

Averigüemos qué es un menú contextual y por qué es necesario.

Implementemos nuestro propio menú contextual usando JS y CSS.

Veamos las desventajas y limitaciones del enfoque utilizado para saber qué problemas pueden advertirnos al poner todo esto en producción.

¿Qué es un menú contextual? Según Wikipedia, el menú contextual es un menú que aparece cuando el usuario interactúa con la interfaz gráfica (haciendo clic derecho del mouse). El menú contextual contiene un conjunto limitado de acciones posibles, que normalmente están asociadas con el objeto seleccionado.

En su computadora, al hacer clic derecho en el escritorio aparecerá el menú contextual del sistema operativo. Desde aquí probablemente puedas crear una nueva carpeta, obtener información y hacer algo más. El menú contextual del navegador permite, por ejemplo, obtener información sobre una página, ver sus fuentes, guardar una imagen, abrir un enlace en una nueva pestaña, trabajar con el portapapeles, etc. Además, el conjunto de acciones disponibles depende de dónde exactamente hizo clic, es decir, del contexto. Este es el comportamiento estándar previsto por los desarrolladores de navegadores [ Y sus extensiones].

Las aplicaciones web están empezando poco a poco a sustituir los menús contextuales estándar por los suyos propios. Grandes ejemplos son los mismos Gmail y Dropbox. La única pregunta es ¿cómo crear tu propio menú contextual? En el navegador, cuando hace clic con el botón derecho del mouse, se activa el evento del menú contextual. Tendremos que anular el comportamiento predeterminado y hacer que muestre el nuestro en lugar del menú estándar. No es tan difícil, pero lo veremos paso a paso, por lo que será bastante extenso. Primero, creemos la estructura básica de la aplicación para que el ejemplo que se está desarrollando no esté completamente divorciado de la realidad.

Lista de tareas Imaginemos que estamos creando una aplicación que permite mantener una lista de tareas. Entiendo que probablemente ya estés increíblemente cansado de todas estas listas de tareas, pero que así sea. La página de la aplicación contiene una lista de tareas pendientes. Para cada tarea, está disponible un conjunto típico de acciones CRUD: obtener información sobre la tarea, agregar una nueva, editar, eliminar.

Un ejemplo del resultado está en CodePen. Puedes mirar allí de inmediato si eres demasiado vago para leer o quieres asegurarte de que estás realmente interesado en seguir leyendo. Bueno, por ahora, comencemos el desarrollo paso a paso de nuestro plan. Usaré algunos trucos CSS modernos y crearé una lista de tareas simple usando atributos de datos. También usaré el restablecimiento de estilo de Eric Meyer y restableceré la propiedad de tamaño del cuadro para todos los elementos en el cuadro de borde:
*, *::antes, *::después ( tamaño de caja: cuadro-borde; )
No usaré prefijos en CSS, pero la demostración de CodePen incluye un prefijo automático.

Creando una estructura básica Abramos nuestro documento HTML, agreguemos un encabezado, una parte de contenido con una lista de tareas y un pie de página. También mencionaré Font Awesome y la fuente Roboto para mejorar un poco el diseño. Cada tarea debe contener un atributo data-id, que en realidad sería tomado de la base de datos. Además, cada tarea contendrá una lista de acciones. Estas son las partes importantes del marcado:

Ir al supermercado

Si usa CodePen, puede habilitar el prefijo automático y la conexión de restablecimiento de CSS en la configuración. En caso contrario, tendrás que hacer todo manualmente, si este proceso aún no se ha automatizado. Recuerde que nuestro objetivo es crear un menú contextual, por lo que no se implementará el procesamiento de acciones. Ahora agreguemos algo más de CSS:
/* tareas */ .tasks (estilo de lista: ninguno; margen: 0; relleno: 0; ) .task ( visualización: flex; justificar contenido: espacio entre; relleno: 12px 0; borde inferior: sólido 1px # dfdfdf; ) .tarea: último hijo ( borde inferior: ninguno; )
El conjunto completo de estilos (y todo lo demás) se presenta en CodePen. Y aquí estarán las partes más importantes del código, marcado y diseño. Pero finalmente acerquémonos a nuestro menú contextual. Describamos nuestro menú contextual: marcado. La base de nuestro menú es la misma que la de cualquier otro menú: una lista desordenada anidada en la etiqueta de navegación. Cada acción se representará como un elemento de lista con un enlace. Cada enlace es responsable de una acción específica. Como mencioné anteriormente, necesitamos tres acciones en el menú contextual:

Ver la tarea.

Editar una tarea.

Eliminar una tarea.

Agreguemos el marcado:

Ver tarea
Editar tarea
Eliminar tarea

Si no tiene idea de dónde colocar este marcado, colóquelo antes de la etiqueta del cuerpo de cierre. Antes de pasar a CSS, aclaremos un par de puntos:

Queremos que aparezca el menú contextual donde se realiza el clic derecho, es decir, necesita posicionamiento absoluto. Por lo tanto, no debe colocar su marcado en un contenedor con posicionamiento relativo.

Necesitaremos algunas variables o atributos para que podamos determinar a qué tarea pertenece la acción seleccionada.

Y ahora los estilos. Ordenemos nuestro menú: CSS. Ya se ha mencionado la necesidad de un posicionamiento absoluto del menú que se está desarrollando. Además, establezcamos la propiedad del índice z en 10. Tenga en cuenta que su aplicación puede requerir un valor diferente. Estos no son todos los estilos posibles; la demostración contiene otras bellezas, pero dependen de tus necesidades y no son obligatorias. Antes de pasar al JS, hagamos que el menú sea invisible de forma predeterminada y agreguemos una clase adicional para mostrarlo.
.context-menu ( display: none; posición: absoluta; z-index: 10; ) .context-menu--active ( display: block; ) Expandiendo nuestro menú contextual - JavaScript Comencemos viendo cómo registrar el evento del menú contextual . Abramos una función autoejecutable y capturemos el evento en todo el documento. También registraremos el evento en la consola para obtener información:
(función() ( "usar estricto"; document.addEventListener("menú contextual", función(e) ( console.log(e); )); ))();
Si abre la consola y hace clic derecho en algún lugar, verá que el evento realmente se muestra allí. Hay mucha información diferente aquí que podemos usar. Estamos especialmente interesados en las coordenadas. Antes de cancelar el comportamiento predeterminado, tengamos en cuenta que no es necesario hacer esto en todo el documento, sino solo en los elementos de la lista de tareas. Teniendo esto en cuenta, deberás completar los siguientes pasos:

Deberá recorrer todos los elementos de la lista de tareas y agregar un controlador de eventos de menú contextual a cada uno de ellos.

Para cada controlador, cancelaremos el comportamiento estándar.

Registraremos el evento y el elemento con el que se relaciona en la consola.

En general, hacemos algo como esto:
(función() ( "usar estricto"; var taskItems = document.querySelectorAll(".task"); para (var i = 0, len = taskItems.length; i< len; i++) { var taskItem = taskItems[i]; contextMenuListener(taskItem); } function contextMenuListener(el) { el.addEventListener("contextmenu", function(e) { console.log(e, el); }); } })();
Si observa la consola, puede ver que se activa un evento único cada vez que hace clic en un elemento de la lista de tareas. Ahora, además de cancelar el comportamiento predeterminado, implementamos la visualización del menú contextual agregándole una clase auxiliar.

Pero primero, agreguemos una ID al menú para que sea más fácil de recuperar a través de JS. También agregaremos una variable de estado de menú menuState y una variable con la clase activa. Tenemos tres variables:
menú var = document.querySelector("#menú contextual"); var estado del menú = 0; var active = "menú contextual--activo";
Sigamos adelante. Revisemos la función contextMenuListener y agreguemos toggleMenuOn, que muestra el menú:
función contextMenuListener(el) ( el.addEventListener("contextmenu", función(e) ( e.preventDefault(); toggleMenuOn(); )); ) función toggleMenuOn() ( if (menuState!== 1) ( menuState = 1 ; menú.classList.add(activo);
En este punto ya puede acceder a nuestro menú contextual con el botón derecho del ratón. Pero no podemos decir que funcione correctamente. En primer lugar, no está ubicado donde nos gustaría. Para solucionar el problema, necesitarás un poco de matemáticas. En segundo lugar, todavía no es posible cerrar este menú. Dado cómo funcionan los menús contextuales normales, nos gustaría que nuestra implementación se cerrara cuando se hace clic en el menú y cuando se presiona Escape. Además, hacer clic derecho fuera de nuestro menú debería cerrarlo y, en su lugar, requerir abrir el menú predeterminado. Intentemos solucionar todo esto.

Refactorizando nuestro código Obviamente, tres eventos principales serán responsables de todas las acciones:

menú contextual: verifique el estado y expanda el menú contextual.

haga clic en - Ocultar el menú.

keyup - Manejo de pulsaciones de teclas. En este manual, sólo el ESC es de interés.

También necesitaremos algunas funciones auxiliares, por lo que agregaremos una sección para ellas en el código. Así tenemos:

mucho codigo

(función() ("uso estricto"; /////////////////////////////////////// / / /////////////////////////////////// // // FUNCIONES DE AYUDA // FUNCIONES AUXILIARES // / /// ////////////////////////////////// //////////// //// //////////////////// /** * Algunas funciones auxiliares aquí * Aquí están las funciones auxiliares en sí */ ////// //////. ////////////////////////// ///////////////// /////// ////////////// // // FUNCIONES C O R E F U N C I O N S // FUNCIONES DEL NÚCLEO // ////////////////// /////// ////////////// /////////////////////////// ///////// // /** * Variables */ var taskItemClassName = "task"; var menu = document.querySelector("#context-menu"); activeClassName = "context-menu--active" /** * Inicializa el código de nuestra aplicación. . * Inicializa el código de nuestra aplicación. */ function init() ( contextListener(); clickListener(); keyupListener(); ) /* * * Escucha los eventos del menú contextual * Manejando el evento del menú contextual */ function contextListener() /**. * Escucha eventos de clic.

* Manejo del evento de clic.

*/ function clickListener() ( ) /** * Escucha eventos de pulsación de tecla.

* Manejo del evento keyup.

*/ function keyupListener() ( ) /** * Activa el menú contextual personalizado.
* Mostrar el menú contextual.
*/ function toggleMenuOn() ( if (menuState !== 1) ( menuState = 1; menu.classList.add(activeClassName); ) ) /** * Ejecute la aplicación.
función contextListener() ( document.addEventListener("menú contextual", función(e) ( if (clickInsideElement(e, taskItemClassName)) ( e.preventDefault(); toggleMenuOn(); ) )); )
Al tener una función auxiliar que hace parte del trabajo sucio por nosotros y detectar el evento del menú contextual en todo el documento, ahora podemos cerrar el menú al hacer clic fuera de él. Para hacer esto, agregue la función toggleMenuOff y edite contextListener:
función contextListener() ( document.addEventListener("menú contextual", función(e) ( if (clickInsideElement(e, taskItemClassName)) ( e.preventDefault(); toggleMenuOn(); ) else ( toggleMenuOff(); ) )); ) función alternarMenuOff() ( if (menuState!== 0) ( menuState = 0; menu.classList.remove(activeClassName); ) )
Ahora haga clic derecho en el elemento de la lista. Y luego, en algún otro lugar del documento. ¡Voilá! Nuestro menú se cerró y se abrió el menú estándar. Luego haremos algo similar para el evento de clic, de modo que más de un botón derecho lo cierre:
función clickListener() ( document.addEventListener("clic", función(e) ( var botón = e.cual || e.botón; if (botón === 1) ( toggleMenuOff(); ) )); )
Este fragmento de código es ligeramente diferente del anterior porque Firefox. Después de soltar el botón derecho del mouse, el evento de clic se activa en Firefox, por lo que aquí tenemos que verificar adicionalmente que realmente se haya producido un clic izquierdo. Ahora el menú no parpadea cuando se hace clic derecho. Agreguemos un controlador similar para presionar la tecla ESC:
función keyupListener() ( ventana.onkeyup = función(e) ( if (e.keyCode === 27) ( toggleMenuOff(); ) ) )
Disponemos de un menú que se abre y cierra según lo previsto, interactuando con el usuario de forma natural. Finalmente posicionemos el menú e intentemos manejar los eventos dentro de él. Posicionamiento de nuestro menú contextual Dado el HTML y CSS actuales, nuestro menú aparece en la parte inferior de la pantalla. Pero nos gustaría que apareciera donde se produjo el clic. Corrijamos esta desafortunada omisión. Primero, agreguemos otra función auxiliar que obtenga las coordenadas exactas del clic. Llamémoslo getPosition e intentemos que maneje diferentes peculiaridades del navegador:
función getPosition(e) ( var posx = 0; var posy = 0; if (!e) var e = window.event; if (e.pageX || e.pageY) ( posx = e.pageX; posy = e. pageY; ) else if (e.clientX || e.clientY) ( posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posy = e.clientY + document.body.scrollTop + document.documentElement. desplazarseArriba;) retorno (x: posx, y: posy))
Nuestro primer paso en el posicionamiento del menú es preparar tres variables. Agreguémoslos al bloque de código correspondiente:
var posiciónmenú; var posiciónmenúX; var posiciónmenúY;
Creemos una función positionMenu que tome un solo argumento: un evento. Por ahora, déjalo imprimir las coordenadas del menú en la consola:
función positionMenu(e) ( menuPosition = getPosition(e); console.log(menuPosition); )
Editemos contextListener para iniciar el proceso de posicionamiento:
función contextListener() ( document.addEventListener("menú contextual", función(e) ( if (clickInsideElement(e, taskItemClassName)) ( e.preventDefault(); toggleMenuOn(); positionMenu(e); ) else ( toggleMenuOff(); ) ));
Haga clic en el menú contextual nuevamente y mire la consola. Asegúrese de que el puesto esté realmente disponible y registrado. Podemos usar estilos en línea para configurar las propiedades superior e izquierda usando JS. Aquí está la nueva versión de positionMenu:
función positionMenu(e) ( menuPosition = getPosition(e); menuPositionX = menuPosition.x + "px"; menuPositionY = menuPosition.y + "px"; menu.style.left = menuPositionX; menu.style.top = menuPositionY; )
Llama a todas partes ahora. ¡El menú aparece en todas partes! Esto es sorprendente, pero hay un par de cosas que deben abordarse:

¿Qué sucede si el usuario hace clic cerca del borde derecho de la ventana? El menú contextual irá más allá.

¿Qué pasa si el usuario cambia el tamaño de la ventana mientras el menú contextual está abierto? Ocurre el mismo problema. Dropbox resuelve este problema ocultando el desbordamiento x (x-overflow: oculto).

Resolvamos el primer problema. Usemos JS para determinar el ancho y alto de nuestro menú y verificar que el menú se ajuste completamente. De lo contrario, movámoslo un poco. Esto requerirá un poco de matemáticas y pensamiento, pero lo haremos simple y paso a paso. Primero, verifiquemos el ancho y el alto de la ventana. Luego encontramos el ancho y alto del menú. Y luego nos aseguraremos de que la diferencia entre las coordenadas de clic y el ancho de la ventana sangrada sea mayor que el ancho del menú. Y haremos lo mismo con la altura. Si el menú no cabe en la pantalla corregiremos sus coordenadas. Comencemos agregando dos variables:
var ancho de menú; var altura del menú;
Como recordarás, nuestro menú está oculto por defecto, por lo que no puedes simplemente calcular su tamaño. En nuestro caso, el menú es estático, pero en el uso real su contenido puede cambiar según el contexto, por lo que es mejor calcular el ancho y alto en el momento de abrirlo. Obtengamos los valores requeridos dentro de la función positionMenu:
menuWidth = menu.offsetWidth; altura del menú = menú.alturadesplazamiento;
Introduzcamos dos variables más, pero esta vez para el tamaño de la ventana:
var ancho de ventana; var altura de la ventana;
Calculemos sus valores de forma similar:
ancho de ventana = ventana.anchointerior; altura de la ventana = ventana.alturainterior;
En última instancia, supongamos que queremos mostrar el menú a no menos de 4 píxeles del borde de la ventana. Puedes comparar los valores, como dije anteriormente, y ajustar la posición de esta manera:
var clickCoords; var clickCoordsX; var clickCoordsY; // función positionMenu actualizada función positionMenu(e) ( clickCoords = getPosition(e); clickCoordsX = clickCoords.x; clickCoordsY = clickCoords.y; menuWidth = menu.offsetWidth + 4; menuHeight = menu.offsetHeight + 4; windowWidth = ventana. InnerWidth; windowHeight = ventana.innerHeight; si ((windowWidth - clickCoordsX)< menuWidth) { menu.style.left = windowWidth - menuWidth + "px"; } else { menu.style.left = clickCoordsX + "px"; } if ((windowHeight - clickCoordsY) < menuHeight) { menu.style.top = windowHeight - menuHeight + "px"; } else { menu.style.top = clickCoordsY + "px"; } }
Ahora nuestro menú va muy bien. Queda por hacer algo con el cambio de tamaño de la ventana. Ya hablé sobre cómo lo hace Dropbox, pero en su lugar cerraremos el menú contextual. [ Este comportamiento está mucho más cerca del estándar.] Agregue la siguiente línea a la función de inicio:
resizeListener();
Y escribamos la función en sí:
función resizeListener() ( ventana.onresize = función(e) ( toggleMenuOff(); ); )
Genial. Encadenamiento de eventos a elementos del menú contextual Si su aplicación es más compleja que este ejemplo y planea tener contenido de menú contextual dinámico, tendrá que profundizar en lo que sucede a continuación para descubrir usted mismo los detalles que faltan. En nuestra aplicación todo es más sencillo y solo hay un menú con un conjunto constante de acciones. De esta manera, puede verificar rápidamente qué elemento se seleccionó y procesar esa selección. En nuestro ejemplo, simplemente guardaremos el elemento seleccionado en una variable y escribiremos su ID de datos y la acción seleccionada en la consola. Para hacer esto, edite el marcado del menú:

Ver tarea
Editar tarea
Eliminar tarea

A continuación, almacenemos en caché todos los objetos necesarios:
var contextMenuClassName = "menú contextual"; var contextMenuItemClassName = "menú contextual__item"; var contextMenuLinkClassName = "menú contextual__enlace"; var contextMenuActive = "menú contextual--activo"; var taskItemClassName = "tarea"; var tareaItemInContext; var clickCoords; var clickCoordsX; var clickCoordsY; menú var = document.querySelector("#menú contextual"); var menuItems = menu.querySelectorAll(".context-menu__item"); var estado del menú = 0; var ancho de menú; var altura del menú; var posiciónmenú; var posiciónmenúX; var posiciónmenúY; var ancho de ventana; var altura de la ventana;
Ha aparecido una variable taskItemInContext, a la que se le asigna un valor cuando hace clic derecho en un elemento de la lista. Lo necesitaremos para registrar los ID de los elementos. También hay nuevos nombres de clases. Ahora repasemos la funcionalidad.

La función de inicialización sigue siendo la misma. El primer cambio afecta a contextListener, porque queremos almacenar en taskItemInContext el elemento en el que el usuario hizo clic, y la función clickInsideElement devuelve exactamente esto:
función contextListener() ( document.addEventListener("menú contextual", función(e) ( taskItemInContext = clickInsideElement(e, taskItemClassName); if (taskItemInContext) ( e.preventDefault(); toggleMenuOn(); positionMenu(e); ) else ( tareaItemInContext = nulo; alternarMenuOff();
Lo restablecemos a nulo si no se hizo clic derecho en un elemento de la lista. Bueno, vamos a abordar clickListener. Como mencioné anteriormente, por razones de simplicidad simplemente imprimiremos la información en la consola. Actualmente, cuando se detecta un evento de clic, se realizan varias comprobaciones y se cierra el menú. Hagamos algunos ajustes y comencemos a procesar el clic dentro del menú contextual, realizando alguna acción y solo luego cerrando el menú:
función clickListener() ( document.addEventListener("clic", función(e) ( var clickeElIsLink = clickInsideElement(e, contextMenuLinkClassName); if (clickeElIsLink) ( e.preventDefault(); menuItemListener(clickeElIsLink); ) else ( var botón = e.cual || e.botón; si (botón === 1) (toggleMenuOff(); ) ));
Es posible que hayas notado que se llama a la función menuItemListener. Lo definiremos un poco más adelante. Las funciones keyupListener, resizeListener y positionMenu permanecen sin cambios. Editaremos ligeramente las funciones toggleMenuOn y toggleMenuOff, cambiando los nombres de las variables para una mejor legibilidad del código:
función toggleMenuOn() ( if (menuState!== 1) ( menuState = 1; menu.classList.add(contextMenuActive); ) ) función toggleMenuOff() ( if (menuState!== 0) ( menuState = 0; menu.classList .remove(contextMenuActive);
Finalmente implementamos menuItemListener:
función menuItemListener(enlace) ( console.log("ID de tarea - " + taskItemInContext.getAttribute("id-datos") + ", Acción de tarea - " + link.getAttribute("acción-datos")); toggleMenuOff(); )
Con esto concluye el desarrollo de la funcionalidad.

Algunas notas Antes de terminar, tengamos en cuenta algunos puntos:

A lo largo del artículo he mencionado el clic derecho como evento para abrir el menú contextual. No todo el mundo es diestro y no todo el mundo tiene una configuración de ratón estándar. Pero independientemente de esto, el evento del menú contextual actúa exactamente de acuerdo con la configuración del mouse y no está estrictamente vinculado al botón derecho.

Otro punto importante es que solo consideramos aplicaciones web de escritorio completas con un mouse como dispositivo de entrada. Los usuarios pueden estar usando un teclado o un dispositivo móvil, así que asegúrese de proporcionar métodos alternativos de interacción para mantener una experiencia fácil de usar.

La gran pregunta Hice de este un tema aparte porque es realmente importante después de todo lo que hemos hecho. Pregúntese: ¿realmente necesita su propio menú contextual? Cosas como esta son geniales, pero antes de usarlas, debes asegurarte de que sean realmente útiles en tu caso. Normalmente, los usuarios esperan que la aplicación se comporte de forma familiar. Por ejemplo, después de hacer clic derecho en una foto, esperan poder guardarla, copiar un enlace, etc. La falta de elementos necesarios en el menú personalizado puede molestarlos. Compatibilidad del navegador El tutorial utilizó algunas cosas modernas de CSS y JS, a saber, display: flex en estilos y classList para cambiar de clase en JS. También vale la pena mencionar que se utilizan etiquetas HTML5. Si se requiere compatibilidad con navegadores anteriores, deberá implementarla usted mismo. Los ejemplos de este tutorial se han probado en los siguientes navegadores:

Cromo 39
Safari 7
Firefox 33

Conclusión y demostración Si ha pensado todo detenidamente y está seguro de que su aplicación necesita esta funcionalidad, puede utilizar el menú diseñado. Por supuesto, puede requerir algunos cambios, pero esta guía describe el proceso de desarrollo en detalle, por lo que implementar los cambios no debería ser tan difícil.

Base de código para este tutorial

Un menú contextual es un menú que aparece al hacer clic derecho en la pantalla. Normalmente, estos menús se utilizan para facilitar la realización de acciones favoritas, como ordenar carpetas y archivos, abrir una nueva ventana de aplicación o acceder a la configuración del sistema.

Durante muchos años, el término "menú contextual" se refería principalmente a aplicaciones nativas. Sin embargo, ahora tenemos la oportunidad de aprovecharlo también en aplicaciones web. Un ejemplo es el administrador de archivos en Gmil. Este menú se implementa usando código javascript:

En el futuro, podremos crear menús contextuales para sitios basados en HTML5. Le invitamos a familiarizarse con este enfoque.

Desarrollo del menú contextual.

HTML5 nos presentó 2 elementos nuevos: menú y elemento de menú, y le permiten crear menús contextuales. Para que el navegador trate el elemento del menú como un "menú contextual", debemos configurar el tipo de menú en contexto y también darle una identificación única.

A continuación se muestra un ejemplo en el que creamos un menú contextual con estas propiedades.

Editar contenido
Selección de correo electrónico

También tenemos la posibilidad de agregar submenús ramificando el elemento del menú de esta manera:

Editar contenido
Selección de correo electrónico

Facebook
Gorjeo

Ahora, para que el menú contextual aparezca en la pantalla al hacer clic derecho, usamos un nuevo atributo HTML llamado menú contextual. Este atributo se utiliza para identificar un menú con el ID especificado. Dado nuestro ejemplo anterior, podemos definir nuestro menú contextual usando contextmenu=context-menu-id.

Podemos configurar el atributo en la etiqueta del cuerpo si queremos utilizar el menú contextual en toda la página. También podemos agregarlo a un elemento HTML para que el menú se use exclusivamente dentro de ese elemento.

Ahora aparecerá un nuevo menú contextual dentro del menú del sistema operativo, como se ve en el siguiente ejemplo.

Agregar un icono

Estamos seguros de que muchos de vosotros habéis visto menús contextuales que utilizan iconos. En algunos casos, un icono puede ser una gran ayuda visual para ayudar a los usuarios a encontrar el menú. Además, también permite a los usuarios entender para qué sirve el menú.

También podemos agregar un ícono a nuestro menú contextual HTML5 usando el atributo de ícono:

Editar contenido
Selección de correo electrónico

Facebook
Gorjeo

Esto es lo que veremos en la ventana del navegador.

Hacer que el menú funcione

En esta etapa, nuestro nuevo menú contextual no funcionará cuando se haga clic en él. Sin embargo, podemos darle vida muy fácilmente con un poco de código javascript. En nuestro ejemplo, el menú se llama Selección de correo electrónico. Este menú permite a los usuarios enviar texto seleccionado por correo electrónico.

Para que funcione, agreguemos una función que permita a los usuarios usar el código detrás de ella.

Función getSelectedText() (
var texto = "";
si(ventana.getSelection) (
texto = ventana.getSelection().toString();
) else if (documento.selección && documento.selección.tipo != "Control") (
texto = documento.selección.createRange().texto;
}
devolver texto;
};
Luego creamos otra función, digamos sendEmail(), que abre el cliente de correo electrónico. El asunto del correo electrónico será el texto ingresado en el título del documento y el cuerpo del correo electrónico se completará con el texto seleccionado.

Función enviarcorreo electrónico() (
var cuerpoTexto = getSelectedText();
window.location.href = "mailto:?subject="+ document.title +"&body="+ bodyText +"";
};
Finalmente, agregamos esta funcionalidad a nuestro menú mediante el atributo onclick.

Selección de correo electrónico
Anteriormente os hemos hablado de cómo utilizar HTML5 EditableContent, que nos permite editar contenido web directamente en la página. Podemos utilizar esta función agregándola a nuestro menú llamado "Editar contenido".

En conclusión

Personalmente, estamos muy entusiasmados con esta nueva característica. Vemos muchas oportunidades en ello. Desafortunadamente, al momento de escribir este material, solo Firefox admitía esta propiedad. Esperamos que otros navegadores se conecten pronto.

Puede ver una demostración a continuación (solo funciona en Firefox).

16/11/15 1.2K

En este artículo, proporcionaré una descripción general de dos elementos HTML5: y, que se incluyen en la especificación de elementos interactivos. Estos dos elementos se encuentran entre los menos discutidos entre los desarrolladores, probablemente debido a su falta de soporte en los principales navegadores. Firefox es el único navegador que admite esta etiqueta.

Elemento de menú frente a elemento de navegación

Cuando hablamos de menú, es importante no confundirlo con una etiqueta, que es un elemento de navegación HTML. Crea un bloque de navegación de página web con enlaces que le permiten navegar a través de secciones de una página o hacia otras páginas del sitio.

Un elemento es un conjunto de comandos de menú. El principio de funcionamiento es similar al de las aplicaciones de escritorio o móviles. Las aplicaciones de escritorio suelen utilizar menús para realizar diversas tareas. Por ejemplo, el menú "Desenfocar" en Photoshop. Está diseñado para realizar tareas de difuminado de la capa seleccionada:

Menú Desenfocar en Photoshop

Ésta es la principal diferencia entre estos dos elementos;

debe contener enlaces que ayuden a los usuarios a navegar por páginas web y al mismo tiempo les permitan realizar tareas específicas.

Usando el elemento

El elemento está destinado a crear menús contextuales, menús emergentes y menús de barra de herramientas. Pero la compatibilidad con las dos últimas funciones de etiquetas aún no se ha implementado en ningún navegador, incluido Firefox.

Por ahora, nos centraremos en crear el menú contextual.

Menú contextual

El menú contextual aparece cuando hacemos clic derecho en la aplicación. Las opciones de visualización dependen de dónde hizo clic el usuario:

El menú contextual original en OS X y Ubuntu

Puede agregar menús contextuales a páginas web a través de complementos de JavaScript o JQuery. El problema es que estos métodos utilizan una gran cantidad de marcas y el script en sí elimina el menú contextual original del navegador. Esto puede resultar en una implementación que no cumpla con las expectativas del usuario:

Menú contextual personalizado en Google Drive

Solución original

Elementos y agregará nuevos elementos a la versión del menú contextual original. En el siguiente ejemplo, agregaremos un nuevo elemento del menú contextual a la etiqueta llamada "Hola mundo":

Hola Mundo

Las partes principales del fragmento de código anterior son los atributos: id, tipo y menú contextual, que definen el tipo de menú como contexto, así como el área donde se debe mostrar el nuevo menú.

En nuestro caso, al hacer clic derecho, aparecerá un nuevo menú en cualquier parte del documento, ya que lo asignamos usando el atributo de menú contextual para toda la sección del cuerpo.

Puede limitar el rango dentro de una sección específica de la página asignando un valor al atributo del menú contextual en los elementos, etc.:

Hola Mundo

Cuando vemos este código en un navegador (actualmente solo Firefox), veremos que el elemento de menú que declaramos aparece en la parte superior de la lista:

Nuevo elemento de menú, "Hola mundo", que se carga como parte del menú contextual original

Agregar submenús e íconos

Los submenús son un grupo de elementos con acciones relacionadas o similares. El menú Rotación de imagen en Photoshop es un gran ejemplo de esto. Incluye varios elementos de submenú que permiten al usuario seleccionar el ángulo de rotación y la dirección de rotación.

Usar el elemento de menú al agregar submenús es simple y directo. Anida otro elemento con un atributo de etiqueta para declarar el nombre del menú, así:

Girar 90 grados Girar 180 grados Voltear horizontalmente Voltear verticalmente

Cuando ejecutamos este código en el navegador, encontraremos un nuevo menú con cuatro elementos de submenú:

Iconos

También se introdujo un nuevo atributo de ícono para agregar íconos a la izquierda de los elementos del menú. Vale la pena señalar que este atributo solo se aplica a . Especifique la ruta al ícono para icon , por ejemplo así:

Girar 900 Girar 1800 Voltear horizontalmente Voltear verticalmente

Y aparecerán iconos en nuestro menú, como puedes ver en la imagen a continuación:

Cada elemento del submenú ahora está ilustrado con un icono.

Agregar funciones al menú

Hemos creado lo que parece un menú contextual, pero aún no funciona como un menú funcional. Podemos solucionar este problema usando JavaScript.

Tomemos nuestro ejemplo con el submenú "Rotar imagen" y agreguemos una función que rotará la imagen en la que hicimos clic derecho. Las transformaciones y transiciones CSS3 pueden realizar la rotación de imágenes en el navegador. Aquí hay un estilo que rotará la imagen 90 grados:

Girar-90 ( transformar: girar (90 grados); )

Después de especificar el estilo, debemos escribir una función para aplicarlo a la imagen.

Rara vez se utiliza un menú contextual personalizado en la interfaz de una página web. Después de todo, no es del todo obvio para el usuario que en algún elemento deba hacer clic no con el botón izquierdo, sino con el derecho del mouse y seleccionar un elemento de la lista. Además, no a todos los visitantes de un sitio web les gusta utilizar el botón derecho del ratón, y en los teléfonos inteligentes no existe ningún botón derecho, sólo una imitación. A pesar de estas características, HTML5 tiene la capacidad de crear sus propios menús contextuales; esto se implementa hasta ahora sólo en Firefox, y aun así de una manera única.

Primero, veamos cómo se crean los diferentes menús en general. Para hacer esto, use una combinación de etiquetas y (ejemplo 1).

Ejemplo 1: menú contextual

HTML5 IE Cr Op Sa Fx

Menú contextual

El atributo contextmenu nos dice que nuestro menú es contextual y al mismo tiempo apunta a una etiqueta con el identificador dado (en este caso edit).

Hasta el momento, ningún navegador entiende el ejemplo anterior, incluido Firefox. Para ello, en lugar de una etiqueta, debes insertar una etiqueta no estándar (ejemplo 2).

HTML5 IE Cr Op Sa Fx

Menú contextual

Ejemplo 2: Menú en Firefox

El código resultó no ser válido, pero cuando haces clic en la imagen en Firefox, aparece un hermoso menú (Fig. 1).

Este menú aún no funciona como se esperaba, así que rediseñémoslo. Primero, agreguemos un ícono al lado del elemento del menú usando el atributo de ícono, para que el menú se vea más bonito. El valor es una ruta relativa o absoluta al archivo gráfico. Luego debe asegurarse de que cuando haga clic en un elemento del menú, se produzca alguna acción. Para hacer esto, usaremos el evento onclick y lo usaremos para llamar a la función deseada. El ejemplo 3 muestra la creación de un menú contextual para texto; si selecciona "Editar" en él, el texto se puede editar. De hecho, se utiliza un campo de texto oculto, que se vuelve visible cuando se llama a la función edit(), mientras que el texto en sí se oculta durante la edición. Después de presionar Enter, el texto del formulario se inserta en lugar del párrafo de texto, creando la impresión de que esto es lo que editamos. El formulario se vuelve a ocultar una vez finalizada la edición.

Ejemplo 3: edición de texto

HTML5 IE Cr Op Sa Fx

Menú contextual #edit ( ancho: 200px; borde: 1px sólido #ccc; pantalla: ninguna; ) función editar() ( document.getElementById("text").style.display = "none"; document.getElementById("edit" ).style.display = "bloquear"; document.getElementById("edit").value = document.getElementById("text").innerHTML; document.getElementById("edit").focus() ( document.getElementById( "texto").innerHTML = document.getElementById("edit").value; document.getElementById("edit").style.display = "none"; document.getElementById("text").style .display = "bloque " )

Texto de ejemplo

El nuevo menú se muestra en la Fig. 2.

Arroz. 2. Menú con icono

Como puede ver en el ejemplo, crear un menú contextual no es diferente de crear otros elementos interactivos. Cuando hacemos clic en un elemento del menú, nuestra función se llama usando el controlador onclick, y luego esta función hará lo que queramos. Firefox 8 fue el primer navegador que admitió menús contextuales HTML5, pero es sorprendente por qué los desarrolladores de Firefox introdujeron sus propios menús contextuales personalizados. Hay varios escenarios posibles aquí: