1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
---
title: contextmenu
slug: Web/HTML/Atributos_Globales/contextmenu
tags:
- Atributos globales
- HTML
- Referencia
translation_of: Web/HTML/Global_attributes/contextmenu
---
<p>{{HTMLSidebar("Global_attributes")}}</p>
<p>El <a href="/es/docs/Web/HTML/Atributos_Globales">atributo global</a> <strong>contextmenu </strong>es el <a href="/es/docs/Web/HTML/Atributos_Globales/id"><strong>id</strong></a> de un {{HTMLElement("menu")}} para nosotros como el menu contextual para este elemento .</p>
<p>Un <em>menu contextual </em>es un menu que aparece sobre la interacción del usuario , como por ejemplo un click derecho . HTML5 ahora permite modificar este menú . Aquí hay unos ejemplos de implementación , incluyendo menús anidados .</p>
<div id="ContextMenu_Example">
<h2 id="Ejemplo">Ejemplo</h2>
<p> </p>
<pre class="brush:html; highlight:[1,10,15]"><body contextmenu="share">
<menu type="context" id="share">
<menu label="share">
<menuitem label="Twitter" onclick="window.open('https://twitter.com/intent/tweet?text=Hurra! Estos aprendiendo sobre ContextMenuI en MDN a través de Mozilla ');"></menuitem>
<menuitem label="Facebook" onclick="window.open('https://facebook.com/sharer/sharer.php?u=https://https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus');"></menuitem>
</menu>
</menu>
<ol>
<li>En cualquier parte del ejemplo puedes compartir la página en twitter y Facebook usando el menú de compartir de tu menú contextual.</li>
<li><pre contextmenu="changeFont" id="fontSizing">En este elemento específico de la lista , puedes cambiar el tamaño del texto usando las acciones "Incremenrar/Decrementar" de tu menú contextual ./pre></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">En la imagen de abajo , puedes accionar la accion "Cambio de Imagen " en tu menú contextual .</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="Change Image" onclick="changeImage()"></menuitem>
</menu>
</ol>
</body>
</pre>
<p>en conjunto con este Javascript</p>
<pre class="brush:js">function incFont(){
document.getElementById("fontSizing").style.fontSize="larger";
}
function decFont(){
document.getElementById("fontSizing").style.fontSize="smaller";
}
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>
<p>resulta en :</p>
<div>{{EmbedLiveSample("ContextMenu_Example",550,200)}}</div>
</div>
<h2 id="Especificaciones">Especificaciones</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>Sin cambio desde el último 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 de {{SpecName('HTML WHATWG')}}, definición inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Caracterísitica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{ CompatNo }}</td>
<td>{{ CompatGeckoDesktop(9) }}</td>
<td>{{ CompatNo }}</td>
<td>{{ CompatNo }}</td>
<td>{{ CompatNo }}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</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>Soporte básico</td>
<td>{{ CompatNo }}</td>
<td>{{ CompatNo }}</td>
<td>{{ CompatGeckoDesktop(20) }}</td>
<td>{{ CompatNo }}</td>
<td>{{ CompatNo }}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Ver_también">Ver también</h2>
<ul>
<li> <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a></li>
</ul>
|
