|
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