Skip to content

Commit 08ef36f

Browse files
mar10mar10
committed
Conflicts: demo/index.html
1 parent 250d567 commit 08ef36f

File tree

4 files changed

+123
-87
lines changed

4 files changed

+123
-87
lines changed

‎README.md

+55-15
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ A jQuery plugin that provides a context menu (based on the standard [jQueryUI me
77
* Themable using [jQuery ThemeRoller](http://jqueryui.com/themeroller/).
88
* Supports delegation (i.e. can be bound to elements that don't exist at the
99
time the context menu is initialized).
10-
* Exposes events from [jQueryUI menu]: `blur`, `create`, `focus`, `select`.
1110
* Optional support for touch devices.
1211

1312

@@ -27,7 +26,22 @@ See also the [Change Log](https://github.com/mar10/jquery-ui-contextmenu/blob/ma
2726

2827
## Example
2928

30-
Say we have some HTML elements that we want to attach a popup menu to:
29+
First, include dependencies, i.e.
30+
31+
* jQuery 1.7+ (1.10 recommended)
32+
* jQuery UI 1.9+ (at least core, widhet, menu), 1.11 recommended
33+
* One of the ThemeRoller CSS themes or a custom one
34+
* jquery.ui-contextmenu.js (also [available as CDN](http://www.jsdelivr.com/#!jquery.ui-contextmenu))
35+
36+
```html
37+
<head>
38+
<link href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet" />
39+
<script src="//code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
40+
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js" type="text/javascript"></script>
41+
<script src="assets/jquery.ui-contextmenu.min.js"></script>
42+
```
43+
44+
We have some HTML elements that we want to attach a popup menu to:
3145

3246
```html
3347
<div id="container">
@@ -56,7 +70,6 @@ $("#container").contextmenu({
5670
});
5771
```
5872

59-
6073
Instead of handling all menu commands in the `select` event, it is also possible
6174
to attach callbacks directly to menu entries:
6275
```js
@@ -71,15 +84,16 @@ $(document).contextmenu({
7184
});
7285
```
7386

74-
7587
To attach menus to *all* elements on the page that have `class="hasmenu"`,
76-
we use `document` as context:
88+
we may use `document` as context:
7789
```js
7890
$(document).contextmenu({
7991
delegate: ".hasmenu",
8092
...
8193
});
8294
```
95+
**Note:** only one contextmenu widget instance can be bound to one element.
96+
8397

8498
### Initialize menu from an existing `<ul>` element
8599

@@ -94,21 +108,27 @@ $(document).contextmenu({
94108
}
95109
});
96110
```
97-
98-
We also have to provide some HTML markup that defines the context menu structure, see
99-
[jQueryUI menu] for details. jQuery UI 1.11 removed the requirement to use anchors in menu
100-
items, so the `<a>` tags should be omitted:
111+
We also have to provide some HTML markup that defines the context menu structure,
112+
see [jQueryUI menu] for details:
101113

102114
```html
103115
<ul id="options" class="ui-helper-hidden">
104-
<li data-command="copy"><a href="#"><span class="ui-icon ui-icon-copy"></span>Copy</a>
105-
<li data-command="paste" class="ui-state-disabled"><a href="#">Paste</a>
106-
<li>----
107-
<li><a>More</a>
116+
<li data-command="copy"><span class="ui-icon ui-icon-copy"></span>Copy</li>
117+
<li data-command="paste" class="ui-state-disabled">Paste</li>
118+
<li>----</li>
119+
<li>More
108120
<ul>
109-
<li data-command="sub1"><a href="#">Sub 1</a>
110-
<li data-command="sub2"><a href="#">Sub 2</a>
121+
<li data-command="sub1">Sub 1</li>
122+
<li data-command="sub2">Sub 2</li>
111123
</ul>
124+
</li>
125+
</ul>
126+
```
127+
128+
**Note:** until jQuery UI 1.10 the use of anchors (`<a>`) in menu items was required:
129+
```html
130+
<ul id="options" class="ui-helper-hidden">
131+
<li data-command="copy"><a href="#"><span class="ui-icon ui-icon-copy"></span>Copy</a>
112132
</ul>
113133
```
114134

@@ -349,6 +369,26 @@ $("#container").bind("contextmenuselect", function(event, ui) {
349369
</dl>
350370
351371
372+
# Tips and Tricks
373+
### Add right-aligned shortcut hints
374+
375+
Simply add a tag of your choice to the title (for example `<kbd>`)
376+
```js
377+
$(document).contextmenu({
378+
delegate: ".hasmenu",
379+
menu: [
380+
{title: "Edit title<kbd>[F2]</kbd>", cmd: "rename"},
381+
{title: "Copy <kbd>[Ctrl+C]</kbd>", cmd: "copy"}, ...
382+
],
383+
```
384+
and make it right aligned via CSS:
385+
```css
386+
.ui-menu kbd {
387+
float: right;
388+
}
389+
```
390+
391+
352392
# Credits
353393
354394
Thanks to all [contributors](https://github.com/mar10/jquery-ui-contextmenu/contributors).

‎demo/index-1-11.html renamed to ‎demo/index-1-10.html

+22-32
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,9 @@
44
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
55
<title>jquery.ui-contextmenu.js - Demo</title>
66

7-
<!-- min requirements:
8-
<script src="http://code.jquery.com/jquery-1.7.js" type="text/javascript"></script>
9-
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js" type="text/javascript"></script>
10-
11-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
12-
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>
13-
-->
14-
<link type="text/css" rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/ui-lightness/jquery-ui.css" />
15-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
16-
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js" type="text/javascript"></script>
7+
<link href="//code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
8+
<script src="//code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
9+
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
1710

1811
<!-- Some custom library to enable 'taphold' events -->
1912
<script src="jquery-taphold/taphold.js" type="text/javascript"></script>
@@ -51,7 +44,7 @@
5144
width: 30px;
5245
}
5346

54-
.ui-widget{
47+
.ui-widget {
5548
font-size: .8em;
5649
}
5750
.ui-menu {
@@ -72,7 +65,7 @@
7265
$(function(){
7366
/* Enable a themeroller theme-switching using a combobox. */
7467
$("#switcher").themeswitcher({
75-
jqueryuiversion: "1.11.0",
68+
jqueryuiversion: "1",
7669
imgpath: "../lib/Super-Theme-Switcher/images/",
7770
loadTheme: "Smoothness"
7871
});
@@ -91,7 +84,7 @@
9184
{title: "----"},
9285
{title: "More", children: [
9386
{title: "Sub 1 (using callback)", action: function(event, ui) { alert("action callback sub1");} },
94-
{title: "Sub 2", cmd: "sub1"}
87+
{title: "Sub 2", cmd: "sub2"}
9588
]}
9689
],
9790
// Handle menu selection to implement a fake-clipboard
@@ -134,15 +127,18 @@
134127

135128
$("#container").contextmenu({
136129
delegate: ".hasmenu2",
130+
hide: { effect: "explode", duration: "slow" },
137131
menu: "#options",
138132
// position: {my: "left top", at: "left bottom"},
139133
position: function(event, ui){
140134
return {my: "left top", at: "left bottom", of: ui.target};
141135
},
142136
preventSelect: true,
143-
taphold: true,
144137
show: { effect: "fold", duration: "slow"},
145-
hide: { effect: "explode", duration: "slow" },
138+
taphold: true,
139+
uiMenuOptions: { // Additional options, used when UI Menu is created
140+
position: { my: "left top", at: "right+10 top+10" }
141+
},
146142
focus: function(event, ui) {
147143
var menuId = ui.item.find(">a").attr("href");
148144
$("#info").text("focus " + menuId);
@@ -181,20 +177,13 @@
181177
<h1>jquery.ui-contextmenu.js</h1>
182178

183179
<p>
184-
<!--
185-
<a href="https://github.com/mar10/jquery-ui-contextmenu">View project on GitHub</a>
186-
&mdash;
187-
-->
188-
<a href="index.html">Demo with jQuery UI 1.10</a>
180+
<a href="index.html">Demo with jQuery UI 1.11</a>
189181
&mdash;
190-
<a href="index-1-11.html">Demo with jQuery UI 1.11</a>
182+
<b>Demo with jQuery UI 1.10</b>
191183
</p>
192184

193185
<div>
194186
<label for="switcher">Theme:</label> <div id="switcher"></div>
195-
<!--
196-
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
197-
-->
198187
</div>
199188

200189
<h3>Sample 1</h3>
@@ -219,7 +208,8 @@ <h3>Sample 2</h3>
219208
<ul>
220209
<li>Initialized by hidden &lt;ul> element.
221210
<li>Use custom show/hide effects.
222-
<li>Define custom position.
211+
<li>Define custom position for initial popup.
212+
<li>Define custom position for submenus.
223213
</ul>
224214
<div id="container">
225215
<span class="hasmenu2">AAA</span>
@@ -228,20 +218,20 @@ <h3>Sample 2</h3>
228218
</div>
229219

230220
<ul id="options" style="display: none;">
231-
<li><a href="#action1"><span class="ui-icon custom-icon-firefox"></span>Action 1</a>
232-
<li><a href="#action2"><span class="ui-icon ui-icon-heart"></span>Action 2</a>
233-
<li class="ui-state-disabled"><a href="#action3">Action 3</a>
221+
<li data-command="action1"><a href="#"><span class="ui-icon custom-icon-firefox"></span>Action 1</a>
222+
<li data-command="action2"><a href="#"><span class="ui-icon ui-icon-heart"></span>Action 2</a>
223+
<li data-command="action3" class="ui-state-disabled"><a href="#">Action 3</a>
234224
<li>----
235225
<li><a>Extra</a>
236226
<ul>
237-
<li><a href="#action4">sub4</a>
238-
<li><a href="#action5">sub5</a>
227+
<li data-command="action4"><a href="#">sub4</a>
228+
<li data-command="action5"><a href="#">sub5</a>
239229
</ul>
240230
</ul>
241231

242232
<ul id="options2" class="ui-helper-hidden">
243-
<li><a href="#action2"><span class="ui-icon ui-icon-heart"></span>Action 2</a>
244-
<li class="ui-state-disabled"><a href="#action3">Action 3</a>
233+
<li data-command="action2"><a href="#action2"><span class="ui-icon ui-icon-heart"></span>Action 2</a>
234+
<li data-command="action3" class="ui-state-disabled"><a href="#">Action 3</a>
245235
</ul>
246236

247237
<h3>Sample 3</h3>

0 commit comments

Comments
 (0)