1 <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
3 <html xmlns=
"http://www.w3.org/1999/xhtml">
6 <title>jQuery Context Menu Plugin Demo
</title>
7 <meta http-equiv=
"Content-Type" content=
"text/html;charset=utf-8" />
9 <style type=
"text/css">
16 font-family: Verdana
, Arial
, Helvetica
, sans-serif
;
23 font-family: Georgia
, serif
;
29 font-family: Georgia
, serif
;
32 margin: 0px 0px 10px 0px;
37 border: solid
1px #2AA7DE;
56 border: solid
1px #CCC;
68 font-family: Verdana
, Arial
, Helvetica
, sans-serif
;
75 <script src=
"http://abeautifulsite.net/includes/jquery.js" type=
"text/javascript"></script>
76 <script src=
"jquery.contextMenu.js" type=
"text/javascript"></script>
77 <link href=
"jquery.contextMenu.css" rel=
"stylesheet" type=
"text/css" />
79 <script type=
"text/javascript">
81 $(document
).ready( function() {
83 // Show menu when #myDiv is clicked
84 $("#myDiv").contextMenu({
87 function(action
, el
, pos
) {
89 'Action: ' + action
+ '\n\n' +
90 'Element ID: ' + $(el
).attr('id') + '\n\n' +
91 'X: ' + pos
.x
+ ' Y: ' + pos
.y
+ ' (relative to element)\n\n' +
92 'X: ' + pos
.docX
+ ' Y: ' + pos
.docY
+ ' (relative to document)'
96 // Show menu when a list item is clicked
97 $("#myList UL LI").contextMenu({
99 }, function(action
, el
, pos
) {
101 'Action: ' + action
+ '\n\n' +
102 'Element text: ' + $(el
).text() + '\n\n' +
103 'X: ' + pos
.x
+ ' Y: ' + pos
.y
+ ' (relative to element)\n\n' +
104 'X: ' + pos
.docX
+ ' Y: ' + pos
.docY
+ ' (relative to document)'
109 $("#disableMenus").click( function() {
110 $('#myDiv, #myList UL LI').disableContextMenu();
111 $(this).attr('disabled', true);
112 $("#enableMenus").attr('disabled', false);
116 $("#enableMenus").click( function() {
117 $('#myDiv, #myList UL LI').enableContextMenu();
118 $(this).attr('disabled', true);
119 $("#disableMenus").attr('disabled', false);
123 $("#disableItems").click( function() {
124 $('#myMenu').disableContextMenuItems('#cut,#copy');
125 $(this).attr('disabled', true);
126 $("#enableItems").attr('disabled', false);
130 $("#enableItems").click( function() {
131 $('#myMenu').enableContextMenuItems('#cut,#copy');
132 $(this).attr('disabled', true);
133 $("#disableItems").attr('disabled', false);
143 <h1>jQuery Context Menu Plugin Demo
</h1>
145 This plugin lets you add context menu functionality to your web applications.
149 <strong>Tip:
</strong> Try using your keyboard to make a selection.
153 <a href=
"/notebook.php?article=69">Back to the project page
</a>
159 Right click for the standard context menu
175 <input type=
"button" id=
"disableItems" value=
"Disable Cut/Copy" />
176 <input type=
"button" id=
"enableItems" value=
"Enable Cut/Copy" disabled=
"disabled" />
180 <input type=
"button" id=
"disableMenus" value=
"Disable Context Menus" />
181 <input type=
"button" id=
"enableMenus" value=
"Enable Context Menus" disabled=
"disabled" />
185 <ul id=
"myMenu" class=
"contextMenu">
186 <li class=
"edit"><a href=
"#edit">Edit
</a></li>
187 <li class=
"cut separator"><a href=
"#cut">Cut
</a></li>
188 <li class=
"copy"><a href=
"#copy">Copy
</a></li>
189 <li class=
"paste"><a href=
"#paste">Paste
</a></li>
190 <li class=
"delete"><a href=
"#delete">Delete
</a></li>
191 <li class=
"quit separator"><a href=
"#quit">Quit
</a></li>