Gli elementi menu e command fanno parte della famiglia degli interactive elements, che comprende anche details e summary. Come suggerisce la classificazione sono pensati per implementare interazioni con l’utente.
Sebbene il tag menu non sia propriamente di nuova introduzione lo inserisco nella lista dei nuovi elementi perchè ha subito un significativo cambiamento semantico atto a renderlo il fulcro delle nuove interfacce interattive.
menu
Definizione formale
L’elemento menu rappresenta una lista di comandi.
Possiede gli attributi type (non obbligatorio) e label; type è una enumerazione indicante il tipo di menu che si vuole implementare e prevede tre stati:
- context: per indicare un context menu (menu contestuale). L’utente può interagire con i comandi solo se il context menu è attivato.
- toolbar: per indicare una barra degli strumenti. L’utente può immediatamente interagire con i comandi.
- list (default): per indicare che si vuole implementare una semplice lista di comandi non rientrante nelle precedenti classificazioni; il menu potrebbe contenere una lista di elementi li ciascuno rappresentante un comando oppure del contenuto che descriva le funzionalità a disposizione.
L’attributo label fornisce il nome al menu od al sottomenu in modo che il browser possa mostrarlo all’utente;
Non è obbligatorio utilizzare degli elementi command (che vedremo a breve) per le voci del menu, vediamo un esempio replicante parte del menu (toolbar) dell’editor Eclipse:
<menu type="toolbar">
<li>
<menu label="File">
<button type="button" onclick="new()">New</button>
<button type="button" onclick="open()">Open File ...</button>
</menu>
</li>
<li>
<menu label="Edit">
<button type="button" onclick="undo">Undo Text Change</button>
<button type="button" onclick="redo()">Redo Text Change</button>
</menu>
</li>
<li>
<menu label="Source">
<button type="button" onclick="toggleC()">Toggle Comment</button>
<button type="button" onclick="addBC()">Add Block Comment</button>
</menu>
</li>
</menu>Un elemento menu può contenere comandi, separatori, options, select, elementi li ed altri menu (sottomenu con o senza attributo label).
Laddove un elemento nella pagina preveda l’associazione ad un menu contestuale deve fornire un attributo contextmenu indicante l’id di un elemento menu facente parte del DOM.
<input name="copiaincolla" type="text" contextmenu="copiaincollacm" required>
<menu type="context" id="copiaincollacm">
<command label="Copia" onclick="copia()">
<command label="Incolla" onclick="incolla()">
</menu>command
Definizione formale
L’elemento command rappresenta un comando che l’utente ha la possibilità di invocare.
Un elemento command può utilmente fare parte di un menu contestuale o di una toolbar nel contesto di elemento menu.
Gli elementi command vengono renderizzati se e solo se parte di un elemento menu.
Possiede 7 attributi:
- type: è una enumerazione che può valere command, checkbox o radio. Ogni valore mappa lo stato corrispondente
- command: l’elemento rappresenta un comando associato ad una azione.
- checkbox: l’elemento rappresenta una opzione che può essere selezionata/deselezionata.
- radio: l’elemento rappresenta la selezione di una voce appartenente ad una lista di items.
- label: fornisce un nome da mostrare all’utente per il comando; è obbligatorio e non deve essere valorizzato alla stringa vuota.
- icon: fornisce una immagine da utilizzare come icona del comando (deve essere una URL valida)
- disabled: booleano; se valorizzato a false indica che il comando non è disponibile nello stato attuale.
- checked: booleano; se presente indica che il comando è attualmente selezionato. Da omettere quando il type valga command.
- radiogroup: fornisce il nome al gruppo di comandi che verrà selezionato/deselezionato alla selezione/deselezione del comando stesso. (se e solo se type = radio).
- title: fornisce una indicazione sulle funzionalità del comando, che potrebbero essere mostrate come help all’utente.
Un esempio mimimale che utilizza jQuery per intercettare l’evento click sui vari commands:
<!doctype html>
<html>
<head>
<title>L'elemento command</title>
<script src="jquery.js"></script>
<script>
// # Al DOM Ready
$(function() {
$("#c_open").click(function() {
alert("file aperto");
/* esercita una azione per l'apertura del file */
});
$("#c_close").click(function() { /* esercita una azione per la chiusura */ });
$("#c_save").click(function() { /* esercita una azione per il salvataggio */ });
});
</script>
</head>
<body>
<menu>
<command type="command" id="c_open" label="Apri" icon="open.png">Apri</command>
<command type="command" id="c_close" label="Chiudi" icon="close.png">Chiudi</command>
<command type="command" id="c_save" label="Salva" icon="save.png">Salva</command>
</menu>
</body>
</html>Ci sono vie alternative per definire un comando; eccone alcune:
- un elemento a con attributo href
- un elemento button
- un elemento input con type compreso in: submit, button, reset, image, radio, checkbox.
- una option valorizzata (non a stringa vuota) figlia di un select.
- un elemento label o legend con attributo acccesskey definito.
