Skip to content

Commit c966ac0

Browse files
mar10mar10
committed
Add JS Bin demo
1 parent 2d6595b commit c966ac0

File tree

7 files changed

+305
-250
lines changed

7 files changed

+305
-250
lines changed

‎demo/demo.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
body {
2+
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
3+
font-size: 0.8em;
4+
}
5+
6+
p.menu {
7+
padding: 5px 16px;
8+
background-color: #ccc;
9+
border: 2px outset;
10+
}

‎demo/index-1-10.html

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
55
<title>jquery.ui-contextmenu.js - Demo (jQuery UI 1.10)</title>
66

7+
<link href="demo.css" rel="stylesheet" />
78
<link href="//code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
9+
810
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
911
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
1012

@@ -21,8 +23,6 @@
2123
/* Some styling */
2224

2325
body{
24-
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
25-
font-size: .8em;
2626
/* Prevent tablets from selecting text on taphold, etc:
2727
Note:
2828
If only the potential menu trigger elements should be protected, simply
@@ -178,12 +178,19 @@
178178
<body class="example">
179179
<h1>jquery.ui-contextmenu.js</h1>
180180

181-
<p>
181+
<iframe id="ghButton"
182+
src="http://ghbtns.com/github-btn.html?user=mar10&repo=jquery-ui-contextmenu&type=watch&count=true"
183+
allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20">
184+
</iframe>
185+
186+
<p class="menu">
187+
<a href="index.html">Demo Playground</a>
188+
&mdash;
182189
<b>Demo with jQuery UI 1.10</b>
183190
&mdash;
184191
<a href="index-1-11.html">Demo with jQuery UI 1.11</a>
185192
&mdash;
186-
<a href="index.html">Demo with jQuery UI 1.12</a>
193+
<a href="index-1-12.html">Demo with jQuery UI 1.12</a>
187194
</p>
188195

189196
<div>

‎demo/index-1-11.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
55
<title>jquery.ui-contextmenu.js - Demo</title>
66

7+
<link href="demo.css" rel="stylesheet" />
78
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
89

910
<!-- <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> -->
@@ -25,8 +26,6 @@
2526
<style type="text/css">
2627

2728
body{
28-
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
29-
font-size: .8em;
3029
/* Prevent tablets from selecting text on taphold, etc:
3130
Note:
3231
If only the potential menu trigger elements should be protected, simply
@@ -191,12 +190,14 @@ <h1>jquery.ui-contextmenu.js</h1>
191190
allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20">
192191
</iframe>
193192

194-
<p>
193+
<p class="menu">
194+
<a href="index.html">Demo Playground</a>
195+
&mdash;
195196
<a href="index-1-10.html">Demo with jQuery UI 1.10</a>
196197
&mdash;
197198
<b>Demo with jQuery UI 1.11</b>
198199
&mdash;
199-
<a href="index.html">Demo with jQuery UI 1.12</a>
200+
<a href="index-1-12.html">Demo with jQuery UI 1.12</a>
200201
</p>
201202

202203
<div>

‎demo/index-1-12.html

Lines changed: 266 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,266 @@
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 (jQuery UI 1.12)</title>
6+
7+
<link href="demo.css" rel="stylesheet" />
8+
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
9+
10+
<!-- <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> -->
11+
<!-- <script src="//code.jquery.com/jquery-1.12.4.min.js"></script> -->
12+
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
13+
<!-- <script src="//code.jquery.com/jquery-migrate-3.0.0.min.js"></script> -->
14+
15+
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
16+
17+
<!-- Optional custom library to enable 'taphold' events -->
18+
<script src="jquery-taphold/taphold.js"></script>
19+
20+
<!-- Just for this demo: Custom library to add a dynamic themeroller switcher -->
21+
<!--
22+
<script src="../lib/Super-Theme-Switcher/jquery.themeswitcher.js"></script>
23+
-->
24+
<!-- Finally this plugin itself -->
25+
<script src="../jquery.ui-contextmenu.js"></script>
26+
27+
<style type="text/css">
28+
29+
body{
30+
/* Prevent tablets from selecting text on taphold, etc:
31+
Note:
32+
If only the potential menu trigger elements should be protected, simply
33+
use the 'preventSelect: true' option.
34+
But we disable it more globally for tablet pc's, because the whole line
35+
or paragraph will still be selected otherwise.
36+
37+
-webkit-user-select: none;
38+
-khtml-user-select: none;
39+
-moz-user-select: none;
40+
-ms-user-select: none;
41+
user-select: none;
42+
*/
43+
}
44+
45+
/* Only for the demo */
46+
.hasmenu, .hasmenu2 {
47+
border: 1px solid #008;
48+
margin: 3px;
49+
padding: 5px;
50+
width: 30px;
51+
}
52+
53+
/* Optionally define a fixed width for menus */
54+
.ui-menu {
55+
width: 220px;
56+
}
57+
/* Allow to use <kbd> elements inside the title to define shortcut hints. */
58+
.ui-menu kbd {
59+
padding-left: 1em;
60+
float: right;
61+
}
62+
63+
/* Define a custom icon */
64+
.ui-icon.custom-icon-firefox {
65+
background-image: url(application_firefox.gif);
66+
background-position: 0 0;
67+
}
68+
</style>
69+
70+
71+
<script type="text/javascript">
72+
var CLIPBOARD = "";
73+
$(function(){
74+
/* Enable a themeroller theme-switching using a combobox. */
75+
/*
76+
$("#switcher").themeswitcher({
77+
jqueryuiversion: "1.12.1",
78+
themepath: "//code.jquery.com/ui/",
79+
imgpath: "../lib/Super-Theme-Switcher/images/",
80+
loadTheme: "Base"
81+
});
82+
*/
83+
/* Menu 1: init by passing an array of entries. */
84+
85+
$(document).contextmenu({
86+
delegate: ".hasmenu",
87+
autoFocus: true,
88+
preventContextMenuForPopup: true,
89+
preventSelect: true,
90+
taphold: true,
91+
menu: [
92+
{title: "Menu Header", cmd: "cat1", isHeader: true},
93+
{title: "Cut <kbd>Ctrl+X</kbd>", cmd: "cut", uiIcon: "ui-icon-scissors"},
94+
{title: "Copy <kbd>Ctrl+C</kbd>", cmd: "copy", uiIcon: "ui-icon-copy"},
95+
{title: "Paste <kbd>Ctrl+V</kbd>", cmd: "paste", uiIcon: "ui-icon-clipboard", disabled: true },
96+
{title: "----"},
97+
{title: "More", children: [
98+
{title: "Sub 1 (callback)", action: function(event, ui) { alert("action callback sub1");} },
99+
{title: "Edit <kbd>[F2]</kbd>", cmd: "sub2", tooltip: "Edit the title"},
100+
]}
101+
],
102+
// Handle menu selection to implement a fake-clipboard
103+
select: function(event, ui) {
104+
var $target = ui.target;
105+
switch(ui.cmd){
106+
case "copy":
107+
CLIPBOARD = $target.text();
108+
break
109+
case "paste":
110+
CLIPBOARD = "";
111+
break
112+
}
113+
alert("select " + ui.cmd + " on " + $target.text());
114+
// Optionally return false, to prevent closing the menu now
115+
},
116+
// Implement the beforeOpen callback to dynamically change the entries
117+
beforeOpen: function(event, ui) {
118+
var $menu = ui.menu,
119+
$target = ui.target,
120+
extraData = ui.extraData; // passed when menu was opened by call to open()
121+
122+
// console.log("beforeOpen", event, ui, event.originalEvent.type);
123+
124+
// NOTE: zIndex() was removed in jQuery 1.12:
125+
// https://jqueryui.com/upgrade-guide/1.12/#removed-zindex
126+
// ui.menu.zIndex( $(event.target).zIndex() + 1);
127+
128+
$(document)
129+
// .contextmenu("replaceMenu", [{title: "aaa"}, {title: "bbb"}])
130+
// .contextmenu("replaceMenu", "#options2")
131+
// .contextmenu("setEntry", "cut", {title: "Cuty", uiIcon: "ui-icon-heart", disabled: true})
132+
.contextmenu("setEntry", "copy", "Copy '" + $target.text() + "'")
133+
.contextmenu("setEntry", "paste", "Paste" + (CLIPBOARD ? " '" + CLIPBOARD + "'" : ""))
134+
.contextmenu("enableEntry", "paste", (CLIPBOARD !== ""));
135+
136+
// Optionally return false, to prevent opening the menu now
137+
}
138+
});
139+
140+
/* Menu 2: init menu by passing an <ul> element. */
141+
142+
$("#container").contextmenu({
143+
delegate: ".hasmenu2",
144+
hide: { effect: "explode", duration: "slow" },
145+
menu: "#options",
146+
// position: {my: "left top", at: "left bottom"},
147+
position: function(event, ui){
148+
return {my: "left top", at: "left bottom", of: ui.target};
149+
},
150+
preventSelect: true,
151+
show: { effect: "fold", duration: "slow"},
152+
taphold: true,
153+
uiMenuOptions: { // Additional options, used when UI Menu is created
154+
position: { my: "left top", at: "right+10 top+10" }
155+
},
156+
focus: function(event, ui) {
157+
var menuId = ui.item.find(">a").attr("href");
158+
$("#info").text("focus " + menuId);
159+
console.log("focus", ui.item);
160+
},
161+
blur: function(event, ui) {
162+
$("#info").text("");
163+
console.log("blur", ui.item);
164+
},
165+
beforeOpen: function(event, ui) {
166+
// $("#container").contextmenu("replaceMenu", "#options2");
167+
// $("#container").contextmenu("replaceMenu", [{title: "aaa"}, {title: "bbb"}]);
168+
},
169+
open: function(event, ui) {
170+
// alert("open on " + ui.target.text());
171+
},
172+
select: function(event, ui) {
173+
alert("select " + ui.cmd + " on " + ui.target.text());
174+
}
175+
});
176+
177+
/* Open and close an existing menu without programatically. */
178+
179+
$("#triggerPopup").click(function(){
180+
// Trigger popup menu on the first target element
181+
$(document).contextmenu("open", $(".hasmenu:first"), {foo: "bar"});
182+
setTimeout(function(){
183+
$(document).contextmenu("close");
184+
}, 2000);
185+
});
186+
});
187+
</script>
188+
</head>
189+
190+
<body class="example">
191+
<h1>jquery.ui-contextmenu.js</h1>
192+
<iframe id="ghButton"
193+
src="http://ghbtns.com/github-btn.html?user=mar10&repo=jquery-ui-contextmenu&type=watch&count=true"
194+
allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20">
195+
</iframe>
196+
197+
<p class="menu">
198+
<a href="index.html">Demo Playground</a>
199+
&mdash;
200+
<a href="index-1-10.html">Demo with jQuery UI 1.10</a>
201+
&mdash;
202+
<a href="index-1-11.html">Demo with jQuery UI 1.11</a>
203+
&mdash;
204+
<b>Demo with jQuery UI 1.12</b>
205+
</p>
206+
<!--
207+
<div>
208+
<label for="switcher">Theme:</label> <div id="switcher"></div>
209+
</div>
210+
-->
211+
<h3>Sample 1</h3>
212+
<ul>
213+
<li>Initialized using a command-array.
214+
<li>Entry 'More - Sub1' uses the callback syntax.
215+
<li>The menu is modified in the `beforeOpen` event (disabling an renaming entries).
216+
<li>`preventSelect: true` prevents accidential selection of the menu
217+
targets (i.e. 'AAA') when double-clicking or dragging the mouse.
218+
<li>`taphold: true` enables long-press to open the menu (useful on
219+
tablet computers).
220+
<li>Ctrl+Click or two-finger-click on the touchpad also works (MacBook).
221+
</ul>
222+
<p>Right-click in an element to open the context menu:</p>
223+
<div>
224+
<span class="hasmenu" tabindex="0">AAA</span>
225+
<span class="hasmenu" tabindex="0">BBB</span>
226+
<span class="hasmenu" tabindex="0">CCC</span>
227+
</div>
228+
229+
<h3>Sample 2</h3>
230+
<ul>
231+
<li>Initialized by hidden &lt;ul> element.
232+
<li>Use custom show/hide effects.
233+
<li>Define custom position for initial popup.
234+
<li>Define custom position for submenus.
235+
</ul>
236+
<div id="container">
237+
<span class="hasmenu2">AAA</span>
238+
<span class="hasmenu2">BBB</span>
239+
<span class="hasmenu2">CCC</span>
240+
</div>
241+
242+
<ul id="options" style="display: none;">
243+
<li data-command="action1"><div><span class="ui-icon custom-icon-firefox"></span>Action 1</div></li>
244+
<li data-command="action2"><div><span class="ui-icon ui-icon-heart"></span>Action 2</div></li>
245+
<li data-command="action3" class="ui-state-disabled"><div>Action 3</div></li>
246+
<li>----</li>
247+
<li>Extra
248+
<ul>
249+
<li data-command="action4"><div>sub4</div></li>
250+
<li data-command="action5"><div>sub5</div></li>
251+
</ul>
252+
</li>
253+
</ul>
254+
255+
<ul id="options2" class="ui-helper-hidden">
256+
<li data-command="action2"><span class="ui-icon ui-icon-heart"></span>Action 2</li>
257+
<li data-command="action3" class="ui-state-disabled">Action 3</li>
258+
</ul>
259+
260+
<h3>Sample 3</h3>
261+
<p>Open context menu using <code>$("#container").contextmenu("open", $(".hasmenu:first"))</code> and close after 2 sec.:</p>
262+
<button id="triggerPopup">Trigger popup</button>
263+
264+
<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>
265+
</body>
266+
</html>

0 commit comments

Comments
 (0)