Skip to content

Commit da5ec33

Browse files
committed
Added page about the contextmenu() alias
Fixes gh-806 Closes gh-807
1 parent f7e567f commit da5ec33

File tree

1 file changed

+86
-0
lines changed

1 file changed

+86
-0
lines changed

entries/contextmenu.xml

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<?xml version="1.0"?>
2+
<entry type="method" name="contextmenu" return="jQuery">
3+
<title>.contextmenu()</title>
4+
<desc>Bind an event handler to the "contextmenu" JavaScript event, or trigger that event on an element.</desc>
5+
<signature>
6+
<added>1.0</added>
7+
<argument name="handler" type="Function">
8+
<desc>A function to execute each time the event is triggered.</desc>
9+
<argument name="eventObject" type="Event" />
10+
</argument>
11+
</signature>
12+
<signature>
13+
<added>1.4.3</added>
14+
<argument name="eventData" type="Anything" optional="true">
15+
<desc>An object containing data that will be passed to the event handler.</desc>
16+
</argument>
17+
<argument name="handler" type="Function">
18+
<desc>A function to execute each time the event is triggered.</desc>
19+
<argument name="eventObject" type="Event" />
20+
</argument>
21+
</signature>
22+
<signature>
23+
<added>1.0</added>
24+
</signature>
25+
<longdesc>
26+
<p>This method is a shortcut for <code>.on( "contextmenu", handler )</code> in the first two variations, and <code>.trigger( "contextmenu" )</code> in the third.
27+
The <code>contextmenu</code> event is sent to an element when the right button of the mouse is clicked on it, but before the context menu is displayed. In case the context menu key is pressed, the event is triggered on the <code>html</code> element. Any HTML element can receive this event.
28+
For example, consider the HTML:</p>
29+
<pre><code>
30+
&lt;div id="target"&gt;
31+
Right-click here
32+
&lt;/div&gt;
33+
</code></pre>
34+
<p>The event handler can be bound to the <code>&lt;div&gt;</code> as follows:</p>
35+
<pre><code>
36+
$( "#target" ).contextmenu(function() {
37+
alert( "Handler for .contextmenu() called." );
38+
});
39+
</code></pre>
40+
<p>Now right-clicking on this element displays the alert:</p>
41+
<p>
42+
<samp>Handler for .contextmenu() called.</samp>
43+
</p>
44+
<p>To trigger the event manually, call <code>.contextmenu()</code> without an argument:</p>
45+
<pre><code>
46+
$( "#target" ).contextmenu();
47+
</code></pre>
48+
</longdesc>
49+
<note id="detach-shorthand" type="additional" data-event="contextmenu"/>
50+
<example>
51+
<desc>To show a "Hello World!" alert box when the contextmenu event is triggered on a paragraph on the page:</desc>
52+
<code><![CDATA[
53+
$( "p" ).contextmenu(function() {
54+
alert( "Hello World!" );
55+
});
56+
]]></code>
57+
</example>
58+
<example>
59+
<desc>Right click to toggle background color.</desc>
60+
<code><![CDATA[
61+
var div = $( "div:first" );
62+
div.contextmenu(function() {
63+
div.toggleClass( "contextmenu" );
64+
});
65+
]]></code>
66+
<css><![CDATA[
67+
div {
68+
background: blue;
69+
color: white;
70+
height: 100px;
71+
width: 150px;
72+
}
73+
div.contextmenu {
74+
background: yellow;
75+
color: black;
76+
}
77+
]]></css>
78+
<html><![CDATA[
79+
<div></div>
80+
<span>Right click the block</span>
81+
]]></html>
82+
</example>
83+
<category slug="events/mouse-events"/>
84+
<category slug="version/1.0"/>
85+
<category slug="version/1.4.3"/>
86+
</entry>

0 commit comments

Comments
 (0)