Skip to content

Commit 13ae5b7

Browse files
rodneyrehmrodneyrehm
committed
Adding Menu Title Demo
1 parent 75c0e8c commit 13ae5b7

22 files changed

+245
-2
lines changed

‎demo.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,8 @@ <h2>jQuery Context Menu Demo Gallery</h2>
104104

105105
<li><a href="demo/input.html">Input Commands</a></li>
106106
<li><a href="demo/custom-command.html">Custom Command Types</a></li>
107+
108+
<li><a href="demo/menu-title.html">Menus with titles</a></li>
107109

108110
<li><a href="demo/html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
109111
<li><a href="demo/html5-polyfill.html">HTML5 Polyfill</a></li>

‎demo/accesskeys.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,8 @@ <h2>jQuery Context Menu Demo Gallery</h2>
101101

102102
<li><a href="input.html">Input Commands</a></li>
103103
<li><a href="custom-command.html">Custom Command Types</a></li>
104+
105+
<li><a href="menu-title.html">Menus with titles</a></li>
104106

105107
<li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
106108
<li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>

‎demo/async-create.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,8 @@ <h2>jQuery Context Menu Demo Gallery</h2>
121121

122122
<li><a href="input.html">Input Commands</a></li>
123123
<li><a href="custom-command.html">Custom Command Types</a></li>
124+
125+
<li><a href="menu-title.html">Menus with titles</a></li>
124126

125127
<li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
126128
<li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>

‎demo/callback.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,8 @@ <h2>jQuery Context Menu Demo Gallery</h2>
108108

109109
<li><a href="input.html">Input Commands</a></li>
110110
<li><a href="custom-command.html">Custom Command Types</a></li>
111+
112+
<li><a href="menu-title.html">Menus with titles</a></li>
111113

112114
<li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
113115
<li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>

‎demo/custom-command.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -152,8 +152,10 @@ <h2>jQuery Context Menu Demo Gallery</h2>
152152
<li><a href="sub-menus.html">Submenus</a></li>
153153

154154
<li><a href="input.html">Input Commands</a></li>
155-
<li class="current"><a href="custom-command.html">Custom Command Types</a></li>
156-
155+
<li><a href="custom-command.html">Custom Command Types</a></li>
156+
157+
<li class="current"><a href="menu-title.html">Menus with titles</a></li>
158+
157159
<li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
158160
<li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>
159161
<li><a href="html5-polyfill-firefox8.html">HTML5 Polyfill (Firefox 8)</a></li>

‎demo/disabled-callback.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,8 @@ <h2>jQuery Context Menu Demo Gallery</h2>
102102

103103
<li><a href="input.html">Input Commands</a></li>
104104
<li><a href="custom-command.html">Custom Command Types</a></li>
105+
106+
<li><a href="menu-title.html">Menus with titles</a></li>
105107

106108
<li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
107109
<li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>

‎demo/disabled-changing.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,8 @@ <h2>jQuery Context Menu Demo Gallery</h2>
109109

110110
<li><a href="input.html">Input Commands</a></li>
111111
<li><a href="custom-command.html">Custom Command Types</a></li>
112+
113+
<li><a href="menu-title.html">Menus with titles</a></li>
112114

113115
<li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
114116
<li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>

‎demo/disabled-menu.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,8 @@ <h2>jQuery Context Menu Demo Gallery</h2>
114114

115115
<li><a href="input.html">Input Commands</a></li>
116116
<li><a href="custom-command.html">Custom Command Types</a></li>
117+
118+
<li><a href="menu-title.html">Menus with titles</a></li>
117119

118120
<li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
119121
<li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>

‎demo/disabled.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,8 @@ <h2>jQuery Context Menu Demo Gallery</h2>
9494

9595
<li><a href="input.html">Input Commands</a></li>
9696
<li><a href="custom-command.html">Custom Command Types</a></li>
97+
98+
<li><a href="menu-title.html">Menus with titles</a></li>
9799

98100
<li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
99101
<li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>

‎demo/dynamic-create.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,8 @@ <h2>jQuery Context Menu Demo Gallery</h2>
107107

108108
<li><a href="input.html">Input Commands</a></li>
109109
<li><a href="custom-command.html">Custom Command Types</a></li>
110+
111+
<li><a href="menu-title.html">Menus with titles</a></li>
110112

111113
<li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
112114
<li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>

‎demo/dynamic.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,8 @@ <h2>jQuery Context Menu Demo Gallery</h2>
110110

111111
<li><a href="input.html">Input Commands</a></li>
112112
<li><a href="custom-command.html">Custom Command Types</a></li>
113+
114+
<li><a href="menu-title.html">Menus with titles</a></li>
113115

114116
<li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
115117
<li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>

‎demo/html5-import.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,8 @@ <h2>jQuery Context Menu Demo Gallery</h2>
9797

9898
<li><a href="input.html">Input Commands</a></li>
9999
<li><a href="custom-command.html">Custom Command Types</a></li>
100+
101+
<li><a href="menu-title.html">Menus with titles</a></li>
100102

101103
<li class="current"><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
102104
<li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>

‎demo/html5-polyfill-firefox8.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,8 @@ <h2>jQuery Context Menu Demo Gallery</h2>
101101

102102
<li><a href="input.html">Input Commands</a></li>
103103
<li><a href="custom-command.html">Custom Command Types</a></li>
104+
105+
<li><a href="menu-title.html">Menus with titles</a></li>
104106

105107
<li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
106108
<li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>

‎demo/html5-polyfill.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,8 @@ <h2>jQuery Context Menu Demo Gallery</h2>
9595

9696
<li><a href="input.html">Input Commands</a></li>
9797
<li><a href="custom-command.html">Custom Command Types</a></li>
98+
99+
<li><a href="menu-title.html">Menus with titles</a></li>
98100

99101
<li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
100102
<li class="current"><a href="html5-polyfill.html">HTML5 Polyfill</a></li>

‎demo/input.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,8 @@ <h2>jQuery Context Menu Demo Gallery</h2>
179179

180180
<li class="current"><a href="input.html">Input Commands</a></li>
181181
<li><a href="custom-command.html">Custom Command Types</a></li>
182+
183+
<li><a href="menu-title.html">Menus with titles</a></li>
182184

183185
<li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
184186
<li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>

‎demo/keeping-contextmenu-open.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,8 @@ <h2>jQuery Context Menu Demo Gallery</h2>
103103

104104
<li><a href="input.html">Input Commands</a></li>
105105
<li><a href="custom-command.html">Custom Command Types</a></li>
106+
107+
<li><a href="menu-title.html">Menus with titles</a></li>
106108

107109
<li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
108110
<li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>

‎demo/menu-title.html

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
6+
<title>Menu Title Demo - jQuery contextMenu Plugin</title>
7+
<meta name="description" content="simple contextMenu generator for interactive web applications based on jQuery" />
8+
9+
<script src="../jquery-1.7.1.min.js" type="text/javascript"></script>
10+
<script src="../src/jquery.ui.position.js" type="text/javascript"></script>
11+
<script src="../src/jquery.contextMenu.js" type="text/javascript"></script>
12+
<script src="../screen.js" type="text/javascript"></script>
13+
<script src="../prettify/prettify.js" type="text/javascript"></script>
14+
15+
<link href="../src/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
16+
<link href="../screen.css" rel="stylesheet" type="text/css" />
17+
<link href="../prettify/prettify.sunburst.css" rel="stylesheet" type="text/css" />
18+
19+
<script type="text/javascript">
20+
21+
var _gaq = _gaq || [];
22+
_gaq.push(['_setAccount', 'UA-8922143-3']);
23+
_gaq.push(['_trackPageview']);
24+
25+
(function() {
26+
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
27+
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
28+
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
29+
})();
30+
31+
</script>
32+
</head>
33+
<body>
34+
<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>
35+
<div id="container">
36+
<h1><a href="https://github.com/medialize/jQuery-contextMenu">jQuery contextMenu</a></h1>
37+
38+
<ul class="menu">
39+
<li><a href="../index.html">About</a></li>
40+
<li class="active"><a href="../demo.html">Demo</a></li>
41+
<li><a href="../docs.html">Documentation</a></li>
42+
<li><a href="http://rodneyrehm.de/en/">Author</a></li>
43+
</ul>
44+
45+
<h2 id="demo">Demo: Menu Title</h2>
46+
<div class="inline-spaces">
47+
<div class="context-menu-one box menu-1">
48+
<strong>without title</strong>
49+
</div>
50+
<div class="context-menu-two box menu-1">
51+
<strong>with CSS title</strong>
52+
</div>
53+
<div class="context-menu-three box menu-1">
54+
<strong>with data title</strong>
55+
</div>
56+
</div>
57+
58+
<h3 id="css">Example CSS: Menu Title</h3>
59+
<style type="text/css" class="showcase">
60+
/* menu header */
61+
.css-title:before {
62+
content: "some CSS title";
63+
display: block;
64+
position: absolute;
65+
top: 0;
66+
right: 0;
67+
left: 0;
68+
background: #DDD;
69+
padding: 2px;
70+
71+
font-family: Verdana, Arial, Helvetica, sans-serif;
72+
font-size: 11px;
73+
font-weight: bold;
74+
}
75+
.css-title :first-child {
76+
margin-top: 20px;
77+
}
78+
79+
/* menu header via data attribute */
80+
.data-title:before {
81+
content: attr(data-menutitle);
82+
display: block;
83+
position: absolute;
84+
top: 0;
85+
right: 0;
86+
left: 0;
87+
background: #DDD;
88+
padding: 2px;
89+
90+
font-family: Verdana, Arial, Helvetica, sans-serif;
91+
font-size: 11px;
92+
font-weight: bold;
93+
}
94+
.data-title :first-child {
95+
margin-top: 20px;
96+
}
97+
</style>
98+
99+
<h3 id="code">Example code: Menu Title</h3>
100+
<script type="text/javascript" class="showcase">
101+
$(function(){
102+
// register regular menu
103+
$.contextMenu({
104+
selector: '.context-menu-one',
105+
callback: function(key, options) {
106+
var m = "clicked: " + key;
107+
window.console && console.log(m) || alert(m);
108+
},
109+
items: {
110+
"edit": {name: "Edit", icon: "edit"},
111+
"cut": {name: "Cut", icon: "cut"},
112+
"copy": {name: "Copy", icon: "copy"},
113+
"paste": {name: "Paste", icon: "paste"},
114+
"delete": {name: "Delete", icon: "delete"},
115+
"sep1": "---------",
116+
"quit": {name: "Quit", icon: "quit"}
117+
}
118+
});
119+
120+
// register menu with title provided by CSS
121+
$.contextMenu({
122+
selector: '.context-menu-two',
123+
className: 'css-title',
124+
callback: function(key, options) {
125+
var m = "clicked: " + key;
126+
window.console && console.log(m) || alert(m);
127+
},
128+
items: {
129+
"edit": {name: "Edit", icon: "edit"},
130+
"cut": {name: "Cut", icon: "cut"},
131+
"copy": {name: "Copy", icon: "copy"},
132+
"paste": {name: "Paste", icon: "paste"},
133+
"delete": {name: "Delete", icon: "delete"},
134+
"sep1": "---------",
135+
"quit": {name: "Quit", icon: "quit"}
136+
}
137+
});
138+
139+
// register menu with title provided by data-attribute
140+
$.contextMenu({
141+
selector: '.context-menu-three',
142+
className: 'data-title',
143+
callback: function(key, options) {
144+
var m = "clicked: " + key;
145+
window.console && console.log(m) || alert(m);
146+
},
147+
items: {
148+
"edit": {name: "Edit", icon: "edit"},
149+
"cut": {name: "Cut", icon: "cut"},
150+
"copy": {name: "Copy", icon: "copy"},
151+
"paste": {name: "Paste", icon: "paste"},
152+
"delete": {name: "Delete", icon: "delete"},
153+
"sep1": "---------",
154+
"quit": {name: "Quit", icon: "quit"}
155+
}
156+
});
157+
158+
// set a title
159+
$('.data-title').attr('data-menutitle', "Some JS Title");
160+
});
161+
</script>
162+
163+
<h3 id="html">Example HTML: Menu Title</h3>
164+
<div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>
165+
166+
167+
<h2>jQuery Context Menu Demo Gallery</h2>
168+
<ul id="demo-list">
169+
<li><a href="../demo.html">Simple Context Menu</a></li>
170+
<li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
171+
<li><a href="dynamic-create.html">Create Context Menu on demand</a></li>
172+
<li><a href="async-create.html">Create Context Menu (asynchronous)</a></li>
173+
174+
<li><a href="keeping-contextmenu-open.html">Keeping the context menu open</a></li>
175+
<li><a href="callback.html">Command's action (callbacks)</a></li>
176+
177+
<li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
178+
<li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
179+
<li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
180+
<li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
181+
182+
<li><a href="disabled-menu.html">Disabled Menu</a></li>
183+
<li><a href="disabled.html">Disabled Command</a></li>
184+
<li><a href="disabled-callback.html">Disabled Callback Command</a></li>
185+
<li><a href="disabled-changing.html">Changing Command's disabled status</a></li>
186+
187+
<li><a href="accesskeys.html">Accesskeys</a></li>
188+
<li><a href="sub-menus.html">Submenus</a></li>
189+
190+
<li><a href="input.html">Input Commands</a></li>
191+
<li><a href="custom-command.html">Custom Command Types</a></li>
192+
193+
<li class="current"><a href="menu-title.html">Menus with titles</a></li>
194+
195+
<li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
196+
<li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>
197+
<li><a href="html5-polyfill-firefox8.html">HTML5 Polyfill (Firefox 8)</a></li>
198+
</ul>
199+
</div>
200+
</body>
201+
</html>

‎demo/sub-menus.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,8 @@ <h2>jQuery Context Menu Demo Gallery</h2>
124124

125125
<li><a href="input.html">Input Commands</a></li>
126126
<li><a href="custom-command.html">Custom Command Types</a></li>
127+
128+
<li><a href="menu-title.html">Menus with titles</a></li>
127129

128130
<li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
129131
<li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>

‎demo/trigger-custom.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,8 @@ <h2>jQuery Context Menu Demo Gallery</h2>
109109

110110
<li><a href="input.html">Input Commands</a></li>
111111
<li><a href="custom-command.html">Custom Command Types</a></li>
112+
113+
<li><a href="menu-title.html">Menus with titles</a></li>
112114

113115
<li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
114116
<li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>

‎demo/trigger-hover-autohide.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,8 @@ <h2>jQuery Context Menu Demo Gallery</h2>
103103

104104
<li><a href="input.html">Input Commands</a></li>
105105
<li><a href="custom-command.html">Custom Command Types</a></li>
106+
107+
<li><a href="menu-title.html">Menus with titles</a></li>
106108

107109
<li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
108110
<li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>

‎demo/trigger-hover.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,8 @@ <h2>jQuery Context Menu Demo Gallery</h2>
102102

103103
<li><a href="input.html">Input Commands</a></li>
104104
<li><a href="custom-command.html">Custom Command Types</a></li>
105+
106+
<li><a href="menu-title.html">Menus with titles</a></li>
105107

106108
<li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
107109
<li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>

‎demo/trigger-left-click.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,8 @@ <h2>jQuery Context Menu Demo Gallery</h2>
101101

102102
<li><a href="input.html">Input Commands</a></li>
103103
<li><a href="custom-command.html">Custom Command Types</a></li>
104+
105+
<li><a href="menu-title.html">Menus with titles</a></li>
104106

105107
<li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
106108
<li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>

0 commit comments

Comments
 (0)