forked from swisnl/jQuery-contextMenu
/
demo.html
executable file
·119 lines (99 loc) · 5.25 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta charset="utf-8" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>jQuery contextMenu Plugin Demo</title>
<meta name="description" content="simple contextMenu generator for interactive web applications based on jQuery" />
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="src/jquery.ui.position.js" type="text/javascript"></script>
<script src="src/jquery.contextMenu.js" type="text/javascript"></script>
<script src="screen.js" type="text/javascript"></script>
<script src="prettify/prettify.js" type="text/javascript"></script>
<link href="src/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
<link href="screen.css" rel="stylesheet" type="text/css" />
<link href="prettify/prettify.sunburst.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-8922143-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<a id="github-forkme" href="https://github.com/medialize/jQuery-contextMenu"><img src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
<div id="container">
<h1><a href="https://github.com/medialize/jQuery-contextMenu">jQuery contextMenu</a></h1>
<ul class="menu">
<li><a href="index.html">About</a></li>
<li class="active"><a href="demo.html">Demo</a></li>
<li><a href="docs.html">Documentation</a></li>
<li><a href="http://rodneyrehm.de/en/">Author</a></li>
</ul>
<h2 id="demo">Demo: Simple Context Menu</h2>
<div class="inline-spaces">
<div class="context-menu-one box menu-1">
<strong>right click me</strong>
</div>
</div>
<h3 id="code">Example code: Simple Context Menu</h3>
<script type="text/javascript" class="showcase">
$(function(){
$.contextMenu({
selector: '.context-menu-one',
callback: function(key, options) {
var m = "clicked: " + key;
window.console && console.log(m) || alert(m);
},
items: {
"edit": {name: "Edit", icon: "edit"},
"cut": {name: "Cut", icon: "cut"},
"copy": {name: "Copy", icon: "copy"},
"paste": {name: "Paste", icon: "paste"},
"delete": {name: "Delete", icon: "delete"},
"sep1": "---------",
"quit": {name: "Quit", icon: "quit"}
}
});
$('.context-menu-one').on('click', function(e){
console.log('clicked', this);
})
});
</script>
<h3 id="html">Example HTML: Simple Context Menu</h3>
<div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>
<h2>jQuery Context Menu Demo Gallery</h2>
<ul id="demo-list">
<li class="current"><a href="demo.html">Simple Context Menu</a></li>
<li><a href="demo/on-dom-element.html">Context Menu on DOM Element</a></li>
<li><a href="demo/dynamic.html">Adding new Context Menu Triggers</a></li>
<li><a href="demo/dynamic-create.html">Create Context Menu on demand</a></li>
<li><a href="demo/async-create.html">Create Context Menu (asynchronous)</a></li>
<li><a href="demo/keeping-contextmenu-open.html">Keeping the context menu open</a></li>
<li><a href="demo/callback.html">Command's action (callbacks)</a></li>
<li><a href="demo/trigger-left-click.html">Left-Click Trigger</a></li>
<li><a href="demo/trigger-left-right-click.html">Left-Right-Click Trigger</a></li>
<li><a href="demo/trigger-swipe.html">Swipe Trigger</a></li>
<li><a href="demo/trigger-hover.html">Hover Activated Context Menu</a></li>
<li><a href="demo/trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
<li><a href="demo/trigger-custom.html">Custom Activated Context Menu</a></li>
<li><a href="demo/disabled-menu.html">Disabled Menu</a></li>
<li><a href="demo/disabled.html">Disabled Command</a></li>
<li><a href="demo/disabled-callback.html">Disabled Callback Command</a></li>
<li><a href="demo/disabled-changing.html">Changing Command's disabled status</a></li>
<li><a href="demo/accesskeys.html">Accesskeys</a></li>
<li><a href="demo/sub-menus.html">Submenus</a></li>
<li><a href="demo/input.html">Input Commands</a></li>
<li><a href="demo/custom-command.html">Custom Command Types</a></li>
<li><a href="demo/menu-title.html">Menus with titles</a></li>
<li><a href="demo/html5-import.html">Importing HTML5 <menu type="context"></a></li>
<li><a href="demo/html5-polyfill.html">HTML5 Polyfill</a></li>
<li><a href="demo/html5-polyfill-firefox8.html">HTML5 Polyfill (Firefox 8)</a></li>
</ul>
</div>
</body>
</html>