diff options
Diffstat (limited to 'files/de/web/html/global_attributes/contextmenu/index.html')
| -rw-r--r-- | files/de/web/html/global_attributes/contextmenu/index.html | 170 |
1 files changed, 170 insertions, 0 deletions
diff --git a/files/de/web/html/global_attributes/contextmenu/index.html b/files/de/web/html/global_attributes/contextmenu/index.html new file mode 100644 index 0000000000..ba909b7e07 --- /dev/null +++ b/files/de/web/html/global_attributes/contextmenu/index.html @@ -0,0 +1,170 @@ +--- +title: Kontextmenü +slug: Web/HTML/Global_attributes/contextmenu +tags: + - Globale Attribute + - HTML + - Kontextmenü + - Referenz +translation_of: Web/HTML/Global_attributes/contextmenu +original_slug: Web/HTML/Globale_Attribute/kontextmenu +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<div class="warning"> +<p>Das <a href="https://html.spec.whatwg.org/multipage/obsolete.html#attr-contextmenu">contextmenu Attrbut ist obsolet</a> und die Unterstützung wird aus allen Browsern entfernt werden.</p> +</div> + +<p>Das <a href="/en-US/docs/Web/HTML/Global_attributes">globale Attribut </a><code><strong>contextmenu</strong></code> ist die <a href="/en-US/docs/Web/HTML/Global_attributes/id"><strong>id</strong></a> von einem {{HTMLElement("menu")}}, welches als Kontextmenü benutzt werden soll.</p> + +<p>Ein <em>Kontextmenü</em> ist ein Menü, dass nach einer Interaktion des Benutzers erscheint. HTML5 erlaubt nun, dieses Menü anzupassen. Hier sind ein paar Beispiele, inklusive verschachtelter Menüs.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html; highlight:[1,10,15]"><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> + Überall in diesem Beispiel kannst du die Seite über das Kontextmenü auf Twitter und Facebook teilen. + </li> + <li contextmenu="changeFont" id="fontSizing"> + In diesem besonderen Listen-Element kannst du die Schriftgröße eines + Textes über das Kontextmenü vergrößern und verkleinern. + </li> + <menu type="context" id="changeFont"> + <menuitem label="Schrift vergrößern" onclick="incFont()"></menuitem> + <menuitem label="Schrift verkleinern" onclick="decFont()"></menuitem> + </menu> + <li contextmenu="ChangeImage" id="changeImage"> + Auf dem unteren Bild kannst du die Option + "Wechsele Bild" im Kontextmenü auswählen.<br /> + <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" + contextmenu="ChangeImage" id="promoButton" /> + <menu type="context" id="ChangeImage"> + <menuitem label="Wechsele Bild" onclick="changeImage()"></menuitem> + </menu> + </li> + </ol> +</body> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush:js">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"; +}</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{EmbedLiveSample("Beispiel", "100%", 400)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "forms.html#attr-contextmenu", "contextmenu")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Änderungen seit dem letzten Snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "interactive-elements.html#context-menus", "contextmenu")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot von {{SpecName('HTML WHATWG')}}, initiale Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop(9)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(20)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Eine experimentelle Implementation war zwischenzeitlich mit der Kommandozeilen-Option <code>--enable-blink-features=ContextMenu</code> verfügbar. Bis Chrome 52 und Opera 39 war diese außerdem durch Aktivieren der Option <em>Experimental Web Platform</em> verfügbar, welche aber aufgrund eines Kompatibilitätsproblems entfernt wurde. Dies ist dokumentiert in <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=87553">Chromium bug 87553</a>.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Alle <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a></li> + <li>{{domxref("HTMLElement.contextMenu")}}</li> +</ul> |