Skip to content

Commit 7943b35

Browse files
mar10mar10
committed
Added demo page for jQuery UI 1.11/1.10
1 parent 479e964 commit 7943b35

File tree

5 files changed

+537
-32
lines changed

5 files changed

+537
-32
lines changed

‎demo/index-1-11.html

Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
5+
<title>jquery.ui-contextmenu.js - Demo</title>
6+
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>
17+
18+
<!-- Some custom library to enable 'taphold' events -->
19+
<script src="jquery-taphold/taphold.js" type="text/javascript"></script>
20+
21+
<!-- Custom library to add a dynamic themeroller switcher -->
22+
<script type="text/javascript" src="../lib/Super-Theme-Switcher/jquery.themeswitcher.js"></script>
23+
24+
<script src="../jquery.ui-contextmenu.js" type="text/javascript"></script>
25+
26+
<style type="text/css">
27+
28+
/* Some styling */
29+
30+
body{
31+
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
32+
font-size: .8em;
33+
/* Prevent tablets from selecting text on taphold, etc:
34+
Note:
35+
If only the potential menu trigger elements should be protected, simply
36+
use the 'preventSelect: true' option.
37+
But we disable it more globally for table pcs, because the whole line
38+
or paragraph will still be selected otherwise.
39+
*/
40+
-webkit-user-select: none;
41+
-khtml-user-select: none;
42+
-moz-user-select: none;
43+
-ms-user-select: none;
44+
user-select: none;
45+
}
46+
47+
.hasmenu, .hasmenu2 {
48+
border: 1px solid #008;
49+
margin: 3px;
50+
padding: 5px;
51+
width: 30px;
52+
}
53+
54+
.ui-widget{
55+
font-size: .8em;
56+
}
57+
.ui-menu {
58+
width: 150px;
59+
}
60+
61+
/* Define a custom icon */
62+
63+
.ui-icon.custom-icon-firefox {
64+
background-image: url(application_firefox.gif);
65+
background-position: 0 0;
66+
}
67+
</style>
68+
69+
70+
<script type="text/javascript">
71+
var CLIPBOARD = "";
72+
$(function(){
73+
/* Enable a themeroller theme-switching using a combobox. */
74+
$("#switcher").themeswitcher({
75+
jqueryuiversion: "1.11.0",
76+
imgpath: "../lib/Super-Theme-Switcher/images/",
77+
loadTheme: "Smoothness"
78+
});
79+
80+
/* Menu 1: init by passing an array of entries. */
81+
82+
$(document).contextmenu({
83+
delegate: ".hasmenu",
84+
preventContextMenuForPopup: true,
85+
preventSelect: true,
86+
taphold: true,
87+
menu: [
88+
{title: "Cut", cmd: "cut", uiIcon: "ui-icon-scissors"},
89+
{title: "Copy", cmd: "copy", uiIcon: "ui-icon-copy"},
90+
{title: "Paste", cmd: "paste", uiIcon: "ui-icon-clipboard", disabled: true },
91+
{title: "----"},
92+
{title: "More", children: [
93+
{title: "Sub 1 (using callback)", action: function(event, ui) { alert("action callback sub1");} },
94+
{title: "Sub 2", cmd: "sub1"}
95+
]}
96+
],
97+
// Handle menu selection to implement a fake-clipboard
98+
select: function(event, ui) {
99+
var $target = ui.target;
100+
switch(ui.cmd){
101+
case "copy":
102+
CLIPBOARD = $target.text();
103+
break
104+
case "paste":
105+
CLIPBOARD = "";
106+
break
107+
}
108+
alert("select " + ui.cmd + " on " + $target.text());
109+
// Optionally return false, to prevent closing the menu now
110+
},
111+
// Implement the beforeOpen callback to dynamically change the entries
112+
beforeOpen: function(event, ui) {
113+
var $menu = ui.menu,
114+
$target = ui.target,
115+
extraData = ui.extraData; // passed when menu was opened by call to open()
116+
117+
// console.log("beforeOpen", event, ui, event.originalEvent.type);
118+
119+
ui.menu.zIndex( $(event.target).zIndex() + 1);
120+
121+
$(document)
122+
// .contextmenu("replaceMenu", [{title: "aaa"}, {title: "bbb"}])
123+
// .contextmenu("replaceMenu", "#options2")
124+
// .contextmenu("setEntry", "cut", {title: "Cuty", uiIcon: "ui-icon-heart", disabled: true})
125+
.contextmenu("setEntry", "copy", "Copy '" + $target.text() + "'")
126+
.contextmenu("setEntry", "paste", "Paste" + (CLIPBOARD ? " '" + CLIPBOARD + "'" : ""))
127+
.contextmenu("enableEntry", "paste", (CLIPBOARD !== ""));
128+
129+
// Optionally return false, to prevent opening the menu now
130+
}
131+
});
132+
133+
/* Menu 2: init menu by passing an <ul> element. */
134+
135+
$("#container").contextmenu({
136+
delegate: ".hasmenu2",
137+
menu: "#options",
138+
// position: {my: "left top", at: "left bottom"},
139+
position: function(event, ui){
140+
return {my: "left top", at: "left bottom", of: ui.target};
141+
},
142+
preventSelect: true,
143+
taphold: true,
144+
show: { effect: "fold", duration: "slow"},
145+
hide: { effect: "explode", duration: "slow" },
146+
focus: function(event, ui) {
147+
var menuId = ui.item.find(">a").attr("href");
148+
$("#info").text("focus " + menuId);
149+
console.log("focus", ui.item);
150+
},
151+
blur: function(event, ui) {
152+
$("#info").text("");
153+
console.log("blur", ui.item);
154+
},
155+
beforeOpen: function(event, ui) {
156+
// $("#container").contextmenu("replaceMenu", "#options2");
157+
// $("#container").contextmenu("replaceMenu", [{title: "aaa"}, {title: "bbb"}]);
158+
},
159+
open: function(event, ui) {
160+
// alert("open on " + ui.target.text());
161+
},
162+
select: function(event, ui) {
163+
alert("select " + ui.cmd + " on " + ui.target.text());
164+
}
165+
});
166+
167+
/* Open and close an existing menu without programatically. */
168+
169+
$("#triggerPopup").click(function(){
170+
// Trigger popup menu on the first target element
171+
$(document).contextmenu("open", $(".hasmenu:first"), {foo: "bar"});
172+
setTimeout(function(){
173+
$(document).contextmenu("close");
174+
}, 2000);
175+
});
176+
});
177+
</script>
178+
</head>
179+
180+
<body class="example">
181+
<h1>jquery.ui-contextmenu.js</h1>
182+
183+
<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>
189+
&mdash;
190+
<a href="index-1-11.html">Demo with jQuery UI 1.11</a>
191+
</p>
192+
193+
<div>
194+
<label for="switcher">Theme:</label> <div id="switcher"></div>
195+
<!--
196+
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
197+
-->
198+
</div>
199+
200+
<h3>Sample 1</h3>
201+
<ul>
202+
<li>Initialized using a command-array.
203+
<li>Entry 'More - Sub1' uses the callback syntax.
204+
<li>The menu is modified in the `beforeOpen` event (disabling an renaming entries).
205+
<li>`preventSelect: true` prevents accidential selection of the menu
206+
targets (i.e. 'AAA') when double-clicking or dragging the mouse.
207+
<li>`taphold: true` enables long-press to open the menu (useful on
208+
tablet computers).
209+
<li>Ctrl+Click or two-finger-click on the touchpad also works (MacBook).
210+
</ul>
211+
<p>Right-click in an element to open the context menu:</p>
212+
<div>
213+
<span class="hasmenu">AAA</span>
214+
<span class="hasmenu">BBB</span>
215+
<span class="hasmenu">CCC</span>
216+
</div>
217+
218+
<h3>Sample 2</h3>
219+
<ul>
220+
<li>Initialized by hidden &lt;ul> element.
221+
<li>Use custom show/hide effects.
222+
<li>Define custom position.
223+
</ul>
224+
<div id="container">
225+
<span class="hasmenu2">AAA</span>
226+
<span class="hasmenu2">BBB</span>
227+
<span class="hasmenu2">CCC</span>
228+
</div>
229+
230+
<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>
234+
<li>----
235+
<li><a>Extra</a>
236+
<ul>
237+
<li><a href="#action4">sub4</a>
238+
<li><a href="#action5">sub5</a>
239+
</ul>
240+
</ul>
241+
242+
<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>
245+
</ul>
246+
247+
<h3>Sample 3</h3>
248+
<p>Open context menu using <code>$("#container").contextmenu("open", $(".hasmenu:first"))</code> and close after 2 sec.:</p>
249+
<button id="triggerPopup">Trigger popup</button>
250+
251+
<a href="https://github.com/mar10/jquery-ui-contextmenu/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkmerightorange_ff7600.png"></a>
252+
</body>
253+
</html>

‎demo/index.html

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
<head>
44
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
55
<title>jquery.ui-contextmenu.js - Demo</title>
6-
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/start/jquery-ui.min.css" />
76
<!-- min requirements:
87
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
98
<script src="http://code.jquery.com/jquery-1.7.js" type="text/javascript"></script>
109
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js" type="text/javascript"></script>
1110
-->
11+
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/start/jquery-ui.min.css" />
1212
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
1313
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>
1414
<!-- Some custom library to enable 'taphold' events -->
@@ -176,7 +176,15 @@
176176
<body class="example">
177177
<h1>jquery.ui-contextmenu.js</h1>
178178

179-
<p><a href="https://github.com/mar10/jquery-ui-contextmenu">View project on GitHub</a></p>
179+
<p>
180+
<!--
181+
<a href="https://github.com/mar10/jquery-ui-contextmenu">View project on GitHub</a>
182+
&mdash;
183+
-->
184+
<a href="index.html">Demo with jQuery UI 1.10</a>
185+
&mdash;
186+
<a href="index-1-11.html">Demo with jQuery UI 1.11.0</a>
187+
</p>
180188

181189
<div>
182190
<label for="switcher">Theme:</label> <div id="switcher"></div>
@@ -235,5 +243,7 @@ <h3>Sample 2</h3>
235243
<h3>Sample 3</h3>
236244
<p>Open context menu using <code>$("#container").contextmenu("open", $(".hasmenu:first"))</code> and close after 2 sec.:</p>
237245
<button id="triggerPopup">Trigger popup</button>
246+
247+
<a href="https://github.com/mar10/jquery-ui-contextmenu/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkmerightorange_ff7600.png"></a>
238248
</body>
239249
</html>

0 commit comments

Comments
 (0)