diff options
Diffstat (limited to 'files/fr/web/html/element/menuitem')
| -rw-r--r-- | files/fr/web/html/element/menuitem/index.html | 155 |
1 files changed, 155 insertions, 0 deletions
diff --git a/files/fr/web/html/element/menuitem/index.html b/files/fr/web/html/element/menuitem/index.html new file mode 100644 index 0000000000..da6873ec18 --- /dev/null +++ b/files/fr/web/html/element/menuitem/index.html @@ -0,0 +1,155 @@ +--- +title: <menuitem> +slug: Web/HTML/Element/menuitem +tags: + - Déprécié + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/menuitem +--- +<p>{{HTMLRef}}{{Deprecated_Header("HTML5.2")}}</p> + +<p>L'élément HTML <strong><code><menuitem></code></strong> représente une commande qu'un utilisateur peut utiliser via un menu contextuel ou un menu rattaché à un bouton.</p> + +<p>Une commande peut être définie explicitement, avec un texte et éventuellement une icône ou bien faire référence à une commande décrite dans un autre élément. Une commande peut prendre la forme d'une case à cocher ou d’un groupe de boutons radio.</p> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément inclut également <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> et notamment <code>title</code> qui peut être utilisé afin de décrire une commande ou pour fournir des indications quant à l'utilisation de celle-ci.</p> + +<dl> + <dt>{{htmlattrdef("checked")}}</dt> + <dd>Un attribut booléen qui indique si la commande est sélectionné. Cet attribut peut uniquement être utilisé lorsque l'attribut <code>type</code> vaut <code>checkbox</code> ou <code>radio</code>.</dd> + <dt>{{htmlattrdef("command")}}</dt> + <dd>Cet attribut définit l'identifiant d'un autre élément qui indique une commande invoquée indirectement. Cet attribut ne peut pas être utilisé si les attributs <code>checked</code>, <code>disabled</code>, <code>icon</code>, <code>label</code>, <code>radiogroup</code> ou <code>type</code> sont utilisés.</dd> + <dt>{{htmlattrdef("default")}}</dt> + <dd>Un attribut booléen qui indique la commande par défaut du menu.</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>Un attribut booléen qui indique que la commande n'est pas disponible dans l'état actuel. On notera que <code>disabled</code> est sémantiquement différent de <code>hidden</code>.</dd> + <dt>{{htmlattrdef("icon")}}</dt> + <dd>Une URL vers image qui représente la commande.</dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>Le nom de la commande affiché pour l'utilisateur. Cet attribut est obligatoire lorsque l'attribut <code>command</code> est absent.</dd> + <dt>{{htmlattrdef("radiogroup")}}</dt> + <dd>Cet attribut indique le nom d'un groupe de commandes étant des boutons radio. Cet attribut peut uniquement être utilisé lorsque <code>type</code> vaut <code>radio</code>.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>Cet attribut indique le type de commande dans le menu. C'est un attribut à valeur contrainte qui peut prendre une des valeurs suivantes : + <ul> + <li><code>command</code> : une commande associée à une action donnée. C'est la valeur par défaut de l'attribut.</li> + <li><code>checkbox</code> : une commande qui peut avoir un état parmi deux états différents.</li> + <li><code>radio</code> : une commande qui représente une sélection au sein d'un groupe de commandes qui sont des boutons radio.</li> + </ul> + </dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><!-- Un élément <div> avec un menu contextuel --> +<div contextmenu="popup-menu"> + Effectuez un clic-droit pour voir le menu contextuel +</div> + +<menu type="context" id="popup-menu"> + <menuitem type="checkbox" checked>Une case à cocher</menuitem> + <hr> + <menuitem type="command" label="Cette commande ne fait rien" icon="https://developer.cdn.mozilla.net/static/img/favicon144.png"> + Les commandes n'affichent pas leurs contenus. + </menuitem> + <menuitem type="command" label="Cette commande contient du JavAScript" onclick="alert('command clicked')"> + Les commandes n'affichent pas leurs contenus. + </menuitem> + <hr> + <menuitem type="radio" radiogroup="group1">Bouton radio 1</menuitem> + <menuitem type="radio" radiogroup="group1">Bouton radio 2</menuitem> +</menu> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + width: 300px; + height: 80px; + background-color: lightgreen; +} +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample('Exemples', '300', '80')}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th> + <td>Aucune.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Aucun, c'est un élément vide.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Cet élément doit avoir une balise ouvrante et ne doit pas avoir de balise fermante.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Un élément {{HTMLElement("menu")}} lorsque son attribut vaut <code>type</code> ou que cet élément <code><menu></code> est lui même le fils d'un élément <code><menu</code>>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLMenuItemElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "obsolete.html#menuitem", "<menuitem>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Aucune modification depuis la dernière dérivation {{SpecName("HTML5.2")}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "obsolete.html#elementdef-menuitem", "<menuitem>")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>Dérivation de {{SpecName("HTML WHATWG")}}, rendue obsolète.</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "interactive-elements.html#the-menuitem-element", "<menuitem>")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Dérivation de {{SpecName("HTML WHATWG")}}, définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("html.elements.menuitem")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("menu")}}</li> + <li><a href="https://hacks.mozilla.org/2011/11/html5-context-menus-in-firefox-screencast-and-code/">Les menus contextuels HTML5 dans Firefox</a></li> +</ul> |