contextmenu

Jump to:
  1. Exemple
  2. Especificacions
  3. Navegadors compatibles
  4. Veure

This translation is incomplete. Please help translate this article from English.

L'atribut global contextmenu és l'id d'un <menu> per ser utilitzat com el menú contextual d'aquest element.

Un menú contextual és un menú que apareix després de la interacció de l'usuari, com un clic dret. HTML5 ara ens permet personalitzar aquest menú. Aquests són alguns exemples d'implementació, incloent menús niats.

Exemple

HTML

<body contextmenu="share">
  <menu type="context" id="share">
    <menu label="share">
      <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem>
      <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem>
    </menu>
  </menu>
  <ol>
    <li>
      Anywhere in the example you can share the page on Twitter and
      Facebook using the Share menu from your context menu.
    </li>
    <li contextmenu="changeFont" id="fontSizing">
      On this specific list element, you can change the size of the text
      by using the "Increase/Decrease font" actions from your context menu
    </li>
    <menu type="context" id="changeFont">
      <menuitem label="Increase Font" onclick="incFont()"></menuitem>
      <menuitem label="Decrease Font" onclick="decFont()"></menuitem>
    </menu>
    <li contextmenu="ChangeImage" id="changeImage">
      On the image below, you can fire the "Change Image" action
      in your Context Menu.<br />
      <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png"
          contextmenu="ChangeImage" id="promoButton" />
      <menu type="context" id="ChangeImage">
        <menuitem label="Change Image" onclick="changeImage()"></menuitem>
      </menu>
    </li>
  </ol>
</body>

JavaScript

function shareViaTwitter() {
  window.open("https://twitter.com/intent/tweet?text=" +
      "Hurray! I am learning ContextMenu from MDN via Mozilla");
}

function shareViaFacebook() {
  window.open("https://facebook.com/sharer/sharer.php?u=" +
      "https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus");
}

function incFont() {
  document.getElementById("fontSizing").style.fontSize = "larger";
}

function decFont() {
  document.getElementById("fontSizing").style.fontSize = "smaller";
}

function changeImage() {
  var index = Math.ceil(Math.random() * 39 + 1);
  document.images[0].src =
      "https://developer.mozilla.org/media/img/promote/promobutton_mdn" +
      index + ".png";
}

Resultat

Especificacions

Especificació Estat Comentari
HTML Living Standard
The definition of 'contextmenu' in that specification.		 Living Standard Sense canvis des de l'última instantània, HTML 5.1
HTML 5.1
The definition of 'contextmenu' in that specification.		 Recommendation Instantània de HTML Living Standard, definició inicial.

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic No support[1] 9 (9) No support No support[1] No support
Característica Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic No support No support 20 (20) No support No support ?

[1] Una implementació experimental està disponible a través de l'opció de línia d'ordres --enable-blink-features=ContextMenu. Fins Chrome 52 i Opera  39 estava disponible l'opció d'habilitació de les característiques de la Plataforma Web Experimental, però va ser eliminada a causa d'un problema de compatibilitat web. El suport per aquesta caracteristica se sol·licita en Chromium errada 87553.

Veure

Document Tags and Contributors

Tags: 
Contributors to this page: Legioinvicta
Last updated by: Legioinvicta,