diff options
| author | julieng <julien.gattelier@gmail.com> | 2021-10-13 07:13:08 +0200 |
|---|---|---|
| committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-07 11:56:53 +0100 |
| commit | dea9d1f019d9e14357c58cf18653df1ac779d9d8 (patch) | |
| tree | d20318111821d4e935a6c53409240078c4f687e5 /files/fr/web/html/global_attributes/contextmenu/index.md | |
| parent | 8829a7c9eb82f180bac76ed5836aaef95be209a1 (diff) | |
| download | translated-content-dea9d1f019d9e14357c58cf18653df1ac779d9d8.tar.gz translated-content-dea9d1f019d9e14357c58cf18653df1ac779d9d8.tar.bz2 translated-content-dea9d1f019d9e14357c58cf18653df1ac779d9d8.zip | |
convert content to md
Diffstat (limited to 'files/fr/web/html/global_attributes/contextmenu/index.md')
| -rw-r--r-- | files/fr/web/html/global_attributes/contextmenu/index.md | 134 |
1 files changed, 59 insertions, 75 deletions
diff --git a/files/fr/web/html/global_attributes/contextmenu/index.md b/files/fr/web/html/global_attributes/contextmenu/index.md index ef40b4361f..5dc068c1cf 100644 --- a/files/fr/web/html/global_attributes/contextmenu/index.md +++ b/files/fr/web/html/global_attributes/contextmenu/index.md @@ -9,53 +9,53 @@ tags: translation_of: Web/HTML/Global_attributes/contextmenu original_slug: Web/HTML/Attributs_universels/contextmenu --- -<div>{{HTMLSidebar("Global_attributes")}}{{obsolete_header}}</div> +{{HTMLSidebar("Global_attributes")}}{{obsolete_header}} -<div class="warning"> -<p><strong>Attention :</strong> Cet attribut est <a href="https://html.spec.whatwg.org/multipage/obsolete.html#attr-contextmenu">obsolète</a> et sera retiré de l'ensemble des navigateurs.</p> -</div> +> **Attention :** Cet attribut est [obsolète](https://html.spec.whatwg.org/multipage/obsolete.html#attr-contextmenu) et sera retiré de l'ensemble des navigateurs. -<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>contextmenu</strong></code> correspond à l'{{htmlattrxref("id","","identifiant",1)}} d'un élément {{HTMLElement("menu")}} qu'on souhaite utiliser comme menu contextuel pour l'élément courant.</p> +L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`contextmenu`** correspond à l'{{htmlattrxref("id","","identifiant",1)}} d'un élément {{HTMLElement("menu")}} qu'on souhaite utiliser comme menu contextuel pour l'élément courant. -<p>Un menu contextuel est un menu qui apparaît suite à une action utilisateur (par exemple un clic-droit). HTML5 permet désormais de personnaliser ce menu.</p> +Un menu contextuel est un menu qui apparaît suite à une action utilisateur (par exemple un clic-droit). HTML5 permet désormais de personnaliser ce menu. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Voici quelques exemples de personnalisations de menus. Le code HTML pourra être :</p> +Voici quelques exemples de personnalisations de menus. Le code HTML pourra être : -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush:html"><body contextmenu="share"> - <menu type="context" id="share"> - <menu label="Partager"> - <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem> - <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem> - </menu> - </menu> - <ol> - <li> +```html +<body contextmenu="share"> + <menu type="context" id="share"> + <menu label="Partager"> + <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem> + <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem> + </menu> + </menu> + <ol> + <li> Dans cet exemple, vous pouvez partager un lien vers cette page sur Facebook et/ou Twitter via le groupe Partager du menu contextuel - </li> - <li>Sur cette ligne : on peut partager la page sur Twitter ou Facebook grâce au menu Partager du menu contextuel.</li> - <li><pre contextmenu="changeFont" id="fontSizing">Sur cette ligne : on peut changer la taille de la police en utilisant les options "Augmenter/Réduire la taille de la police" du menu contextuel</pre></li> - <menu type="context" id="changeFont"> - <menuitem label="Augmenter la taille de la police" onclick="incFont()"></menuitem> - <menuitem label="Réduire la taille de la police" onclick="decFont()"></menuitem> - </menu> - <li contextmenu="ChangeImage" id="changeImage">Sur cette ligne : on peut utiliser l'option "Changer l'image" du menu.</li><br /> - <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" contextmenu="ChangeImage" id="promoButton" /> - <menu type="context" id="ChangeImage"> - <menuitem label="Changer l'image" onclick="changeImage()"></menuitem> - </menu> - </ol> -</body> -</pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush:js">function shareViaTwitter() { + </li> + <li>Sur cette ligne : on peut partager la page sur Twitter ou Facebook grâce au menu Partager du menu contextuel.</li> + <li><pre contextmenu="changeFont" id="fontSizing">Sur cette ligne : on peut changer la taille de la police en utilisant les options "Augmenter/Réduire la taille de la police" du menu contextuel</pre></li> + <menu type="context" id="changeFont"> + <menuitem label="Augmenter la taille de la police" onclick="incFont()"></menuitem> + <menuitem label="Réduire la taille de la police" onclick="decFont()"></menuitem> + </menu> + <li contextmenu="ChangeImage" id="changeImage">Sur cette ligne : on peut utiliser l'option "Changer l'image" du menu.</li><br /> + <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" contextmenu="ChangeImage" id="promoButton" /> + <menu type="context" id="ChangeImage"> + <menuitem label="Changer l'image" onclick="changeImage()"></menuitem> + </menu> + </ol> +</body> +``` + +### JavaScript + +```js +function shareViaTwitter() { window.open("https://twitter.com/intent/tweet?text=" + "Je découvre ContextMenu avec MDN."); } @@ -75,41 +75,25 @@ function decFont(){ function changeImage(){ var j = Math.ceil((Math.random()*39)+1); document.images[0].src="https://developer.mozilla.org/media/img/promote/promobutton_mdn" + j + ".png"; -}</pre> - -<h3 id="Résultat">Résultat</h3> - -<div>{{EmbedLiveSample("Exemples",600,500)}}</div> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName("HTML WHATWG", "obsolete.html#attr-contextmenu", "contextmenu")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Rendu obsolète</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "interactive-elements.html#context-menus", "contextmenu")}}</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> - -<p>{{Compat("html.global_attributes.contextmenu")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> - <li>{{domxref("HTMLElement.contextMenu")}}</li> -</ul> +} +``` + +### Résultat + +{{EmbedLiveSample("Exemples",600,500)}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------ | +| {{SpecName("HTML WHATWG", "obsolete.html#attr-contextmenu", "contextmenu")}} | {{Spec2('HTML WHATWG')}} | Rendu obsolète | +| {{SpecName('HTML5.1', "interactive-elements.html#context-menus", "contextmenu")}} | {{Spec2('HTML5.1')}} | Dérivation de {{SpecName('HTML WHATWG')}}, définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("html.global_attributes.contextmenu")}} + +## Voir aussi + +- [Les différents attributs universels](/fr/docs/Web/HTML/Attributs_universels) +- {{domxref("HTMLElement.contextMenu")}} |