|
3 | 3 | <head> |
4 | 4 | <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> |
5 | 5 | <title>jquery.ui-contextmenu.js - Demo</title> |
| 6 | +<!-- |
| 7 | + <link href="../node_modules/jquery-ui/themes/base/jquery.ui.all.css" rel="stylesheet"> |
| 8 | + <script src="../lib/jquery.js"></script> |
| 9 | + <script src="../lib/jquery-ui.custom.js"></script> |
| 10 | +--> |
| 11 | + <link href="../node_modules/jquery-ui-dist/jquery-ui.css" rel="stylesheet"> |
6 | 12 |
|
7 | | - <link rel="stylesheet" href="../node_modules/jquery-ui/themes/base/jquery.ui.all.css"> |
8 | 13 | <script src="../node_modules/jquery/dist/jquery.js"></script> |
9 | | - <script src="../node_modules/jquery-ui/ui/jquery-ui.js"></script> |
10 | | - |
| 14 | + <script src="../node_modules/jquery-ui-dist/jquery-ui.js"></script> |
11 | 15 | <!-- Some custom library to enable 'taphold' events --> |
12 | | - <script src="jquery-taphold/taphold.js" type="text/javascript"></script> |
13 | | - |
14 | | - <!-- Custom library to add a dynamic themeroller switcher --> |
15 | | - <script type="text/javascript" src="../lib/Super-Theme-Switcher/jquery.themeswitcher.js"></script> |
| 16 | + <script src="jquery-taphold/taphold.js"></script> |
16 | 17 |
|
17 | | - <script src="../jquery.ui-contextmenu.js" type="text/javascript"></script> |
| 18 | + <script src="../jquery.ui-contextmenu.js"></script> |
18 | 19 |
|
19 | 20 | <style type="text/css"> |
20 | 21 |
|
21 | | -body{ |
22 | | - font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; |
23 | | - font-size: .8em; |
24 | | - /* Prevent tablets from selecting text on taphold, etc: |
25 | | - Note: |
26 | | - If only the potential menu trigger elements should be protected, simply |
27 | | - use the 'preventSelect: true' option. |
28 | | - But we disable it more globally for tablet PCs, because the whole line |
29 | | - or paragraph will still be selected otherwise. |
30 | | - */ |
31 | | - -webkit-user-select: none; |
32 | | - -khtml-user-select: none; |
33 | | - -moz-user-select: none; |
34 | | - -ms-user-select: none; |
35 | | - user-select: none; |
36 | | -} |
37 | | - |
38 | 22 | .hasmenu, .hasmenu2 { |
39 | 23 | border: 1px solid #008; |
40 | 24 | margin: 3px; |
|
61 | 45 | <script type="text/javascript"> |
62 | 46 | var CLIPBOARD = ""; |
63 | 47 | $(function(){ |
64 | | - /* Enable a themeroller theme-switching using a combobox. */ |
65 | | - $("#switcher").themeswitcher({ |
66 | | - jqueryuiversion: "1", |
67 | | - imgpath: "../lib/Super-Theme-Switcher/images/", |
68 | | - loadTheme: "Smoothness" |
69 | | - }); |
70 | 48 |
|
71 | 49 | /* Menu 1: init by passing an array of entries. */ |
72 | 50 |
|
73 | 51 | $(document).contextmenu({ |
| 52 | + autoFocus: true, |
74 | 53 | delegate: ".hasmenu", |
75 | 54 | preventContextMenuForPopup: true, |
76 | 55 | preventSelect: true, |
77 | 56 | taphold: true, |
78 | 57 | menu: [ |
79 | | - {title: "Cut", cmd: "cut", uiIcon: "ui-icon-scissors"}, |
| 58 | + {title: "Cut", cmd: "cut", uiIcon: "ui-icon-scissors" }, |
80 | 59 | {title: "Copy", cmd: "copy", uiIcon: "ui-icon-copy"}, |
81 | 60 | {title: "Paste", cmd: "paste", uiIcon: "ui-icon-clipboard", disabled: true }, |
82 | 61 | {title: "----"}, |
83 | 62 | {title: "More", children: [ |
84 | | - {title: "Sub 1 (using callback)", action: function(event, ui) { alert("action callback sub1");} }, |
85 | | - {title: "Sub 2", cmd: "sub1"} |
| 63 | + {title: "Sub 1 (using callback)", cmd: "sub1", action: function(event, ui) { alert("action callback sub1");} }, |
| 64 | + {title: "Sub 2", cmd: "sub2", disabled: function(){ return true; } }, |
| 65 | + {title: "Sub 3", cmd: "sub3", disabled: function(){ return "hide"; } }, |
| 66 | + {cmd: "sub4", title: function(){ return "Sub 4" + Date.now(); } } |
86 | 67 | ]} |
87 | 68 | ], |
88 | 69 | // Handle menu selection to implement a fake-clipboard |
|
107 | 88 |
|
108 | 89 | // console.log("beforeOpen", event, ui, event.originalEvent.type); |
109 | 90 | console.log("beforeOpen", event, ui); |
110 | | - alert(JSON.stringify(extraData)); |
111 | 91 |
|
112 | | - ui.menu.zIndex( $(event.target).zIndex() + 1); |
| 92 | + // ui.menu.zIndex( $(event.target).zIndex() + 1); |
113 | 93 |
|
114 | 94 | $(document) |
115 | 95 | // .contextmenu("replaceMenu", [{title: "aaa"}, {title: "bbb"}]) |
@@ -175,13 +155,6 @@ <h1>jquery.ui-contextmenu.js</h1> |
175 | 155 |
|
176 | 156 | <p><a href="https://github.com/mar10/jquery-ui-contextmenu">View project on GitHub</a></p> |
177 | 157 |
|
178 | | - <div> |
179 | | - <label for="switcher">Theme:</label> <div id="switcher"></div> |
180 | | - <!-- |
181 | | - <label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select> |
182 | | - --> |
183 | | - </div> |
184 | | - |
185 | 158 | <h3>Sample 1</h3> |
186 | 159 | <ul> |
187 | 160 | <li>Initialized using a command-array. |
|
0 commit comments