Skip to content

Commit 41623fb

Browse files
rodneyrehmrodneyrehm
committed
playing with jQuery UI Theme integration
1 parent 5ac410a commit 41623fb

File tree

4 files changed

+659
-33
lines changed

4 files changed

+659
-33
lines changed

‎demo/jquery-ui-theme.html

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
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>jQuery contextMenu Plugin Demo</title>
7+
<meta name="description" content="simple contextMenu generator for interactive web applications based on jQuery" />
8+
9+
<script src="../jquery-1.8.2.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.ui.css" rel="stylesheet" type="text/css" />
16+
<style>
17+
/* overwrite position:fixed */
18+
.ui-menu.context-menu-list {
19+
position: absolute;
20+
}
21+
/* bad jQueryUI selector */
22+
.ui-menu.context-menu-list .ui-menu-item span {
23+
text-decoration: none;
24+
display: block;
25+
padding: 2px .4em;
26+
line-height: 1.5;
27+
zoom: 1;
28+
font-weight: normal;
29+
}
30+
/*
31+
open questions
32+
* span.ui-state-focus but li.ui-state-focus given, problem
33+
* how to handle <input><select> and co?
34+
* how to handle separator?
35+
* how to handle sub-menu?
36+
*/
37+
</style>
38+
<link href="../screen.css" rel="stylesheet" type="text/css" />
39+
<link href="../prettify/prettify.sunburst.css" rel="stylesheet" type="text/css" />
40+
41+
<script type="text/javascript">
42+
43+
var _gaq = _gaq || [];
44+
_gaq.push(['_setAccount', 'UA-8922143-3']);
45+
_gaq.push(['_trackPageview']);
46+
47+
(function() {
48+
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
49+
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
50+
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
51+
})();
52+
53+
</script>
54+
</head>
55+
<body>
56+
<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>
57+
<div id="container">
58+
<h1><a href="https://github.com/medialize/jQuery-contextMenu">jQuery contextMenu</a></h1>
59+
60+
<ul class="menu">
61+
<li><a href="../index.html">About</a></li>
62+
<li class="active"><a href="../demo.html">Demo</a></li>
63+
<li><a href="../docs.html">Documentation</a></li>
64+
<li><a href="http://rodneyrehm.de/en/">Author</a></li>
65+
</ul>
66+
67+
<h2 id="demo">Demo: Simple Context Menu</h2>
68+
<div class="inline-spaces">
69+
<div class="context-menu-one box menu-1">
70+
<strong>right click me</strong>
71+
</div>
72+
</div>
73+
74+
<h3 id="code">Example code: Simple Context Menu</h3>
75+
<script type="text/javascript" class="showcase">
76+
$(function(){
77+
$.contextMenu({
78+
selector: '.context-menu-one',
79+
callback: function(key, options) {
80+
var m = "clicked: " + key;
81+
window.console && console.log(m) || alert(m);
82+
},
83+
items: {
84+
"edit": {name: "Edit", icon: "edit"},
85+
"sep1": "---------",
86+
name: {
87+
name: "Text",
88+
type: 'text',
89+
value: "Hello World"
90+
},
91+
yesno: {
92+
name: "Boolean",
93+
type: 'checkbox',
94+
selected: true
95+
},
96+
"sep1": "---------",
97+
"sub": {name: "Sub menu", items: {
98+
"edit": {name: "Edit", icon: "edit"},
99+
"cut": {name: "Cut", icon: "cut"},
100+
"copy": {name: "Copy", icon: "copy"},
101+
"paste": {name: "Paste", icon: "paste"},
102+
"delete": {name: "Delete", icon: "delete"},
103+
}}
104+
}
105+
});
106+
107+
$('.context-menu-one').on('click', function(e){
108+
console.log('clicked', this);
109+
})
110+
});
111+
</script>
112+
113+
<h3 id="html">Example HTML: Simple Context Menu</h3>
114+
<div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>
115+
116+
117+
<h2>jQuery Context Menu Demo Gallery</h2>
118+
<ul id="demo-list">
119+
<li class="current"><a href="../demo.html">Simple Context Menu</a></li>
120+
<li><a href="on-dom-element.html">Context Menu on DOM Element</a></li>
121+
<li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
122+
<li><a href="dynamic-create.html">Create Context Menu on demand</a></li>
123+
<li><a href="async-create.html">Create Context Menu (asynchronous)</a></li>
124+
125+
<li><a href="keeping-contextmenu-open.html">Keeping the context menu open</a></li>
126+
<li><a href="callback.html">Command's action (callbacks)</a></li>
127+
128+
<li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
129+
<li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
130+
<li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
131+
<li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
132+
133+
<li><a href="disabled-menu.html">Disabled Menu</a></li>
134+
<li><a href="disabled.html">Disabled Command</a></li>
135+
<li><a href="disabled-callback.html">Disabled Callback Command</a></li>
136+
<li><a href="disabled-changing.html">Changing Command's disabled status</a></li>
137+
138+
<li><a href="accesskeys.html">Accesskeys</a></li>
139+
<li><a href="sub-menus.html">Submenus</a></li>
140+
141+
<li><a href="input.html">Input Commands</a></li>
142+
<li><a href="custom-command.html">Custom Command Types</a></li>
143+
144+
<li><a href="menu-title.html">Menus with titles</a></li>
145+
146+
<li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
147+
<li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>
148+
<li><a href="html5-polyfill-firefox8.html">HTML5 Polyfill (Firefox 8)</a></li>
149+
</ul>
150+
</div>
151+
</body>
152+
</html>

‎src/jquery.contextMenu.css

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
font-size: 11px;
3636
}
3737

38-
.context-menu-item {
38+
.ui-menu-item {
3939
padding: 2px 2px 2px 24px;
4040
background-color: #EEE;
4141
position: relative;
@@ -50,25 +50,25 @@
5050
border-bottom: 1px solid #DDD;
5151
}
5252

53-
.context-menu-item > label > input,
54-
.context-menu-item > label > textarea {
53+
.ui-menu-item > label > input,
54+
.ui-menu-item > label > textarea {
5555
-webkit-user-select: text;
5656
-moz-user-select: text;
5757
-ms-user-select: text;
5858
user-select: text;
5959
}
6060

61-
.context-menu-item.hover {
61+
.ui-menu-item.ui-state-focus {
6262
cursor: pointer;
6363
background-color: #39F;
6464
}
6565

66-
.context-menu-item.disabled {
66+
.ui-menu-item.disabled {
6767
color: #666;
6868
}
6969

70-
.context-menu-input.hover,
71-
.context-menu-item.disabled.hover {
70+
.context-menu-input.ui-state-focus,
71+
.ui-menu-item.disabled.ui-state-focus {
7272
cursor: default;
7373
background-color: #EEE;
7474
}
@@ -86,16 +86,16 @@
8686
#protip:
8787
In case you want to use sprites for icons (which I would suggest you do) have a look at
8888
http://css-tricks.com/13224-pseudo-spriting/ to get an idea of how to implement
89-
.context-menu-item.icon:before {}
89+
.ui-menu-item.icon:before {}
9090
*/
91-
.context-menu-item.icon { min-height: 18px; background-repeat: no-repeat; background-position: 4px 2px; }
92-
.context-menu-item.icon-edit { background-image: url(images/page_white_edit.png); }
93-
.context-menu-item.icon-cut { background-image: url(images/cut.png); }
94-
.context-menu-item.icon-copy { background-image: url(images/page_white_copy.png); }
95-
.context-menu-item.icon-paste { background-image: url(images/page_white_paste.png); }
96-
.context-menu-item.icon-delete { background-image: url(images/page_white_delete.png); }
97-
.context-menu-item.icon-add { background-image: url(images/page_white_add.png); }
98-
.context-menu-item.icon-quit { background-image: url(images/door.png); }
91+
.ui-menu-item.icon { min-height: 18px; background-repeat: no-repeat; background-position: 4px 2px; }
92+
.ui-menu-item.icon-edit { background-image: url(images/page_white_edit.png); }
93+
.ui-menu-item.icon-cut { background-image: url(images/cut.png); }
94+
.ui-menu-item.icon-copy { background-image: url(images/page_white_copy.png); }
95+
.ui-menu-item.icon-paste { background-image: url(images/page_white_paste.png); }
96+
.ui-menu-item.icon-delete { background-image: url(images/page_white_delete.png); }
97+
.ui-menu-item.icon-add { background-image: url(images/page_white_add.png); }
98+
.ui-menu-item.icon-quit { background-image: url(images/door.png); }
9999

100100
/* vertically align inside labels */
101101
.context-menu-input > label > * { vertical-align: top; }
@@ -126,14 +126,14 @@
126126
.context-menu-input > label > textarea {
127127
height: 100px;
128128
}
129-
.context-menu-item > .context-menu-list {
129+
.ui-menu-item > .context-menu-list {
130130
display: none;
131131
/* re-positioned by js */
132132
right: -5px;
133133
top: 5px;
134134
}
135135

136-
.context-menu-item.hover > .context-menu-list {
136+
.ui-menu-item.ui-state-focus > .context-menu-list {
137137
display: block;
138138
}
139139

‎src/jquery.contextMenu.js

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -463,8 +463,8 @@ var // currently active contextMenu trigger
463463
if (opt.isInput || !opt.$selected || !opt.$selected.length) {
464464
break;
465465
}
466-
467-
if (!opt.$selected.parent().hasClass('context-menu-root')) {
466+
467+
if (!opt.$selected.parent().hasClass('ui-menu')) {
468468
var $parent = opt.$selected.parent().parent();
469469
opt.$selected.trigger('contextmenu:blur');
470470
opt.$selected = $parent;
@@ -631,7 +631,7 @@ var // currently active contextMenu trigger
631631

632632
// flag that we're inside an input so the key handler can act accordingly
633633
focusInput: function(e) {
634-
var $this = $(this).closest('.context-menu-item'),
634+
var $this = $(this).closest('.ui-menu-item'),
635635
data = $this.data(),
636636
opt = data.contextMenu,
637637
root = data.contextMenuRoot;
@@ -641,7 +641,7 @@ var // currently active contextMenu trigger
641641
},
642642
// flag that we're inside an input so the key handler can act accordingly
643643
blurInput: function(e) {
644-
var $this = $(this).closest('.context-menu-item'),
644+
var $this = $(this).closest('.ui-menu-item'),
645645
data = $this.data(),
646646
opt = data.contextMenu,
647647
root = data.contextMenuRoot;
@@ -679,7 +679,7 @@ var // currently active contextMenu trigger
679679

680680
// make sure only one item is selected
681681
(opt.$menu ? opt : root).$menu
682-
.children('.hover').trigger('contextmenu:blur');
682+
.children('.ui-state-focus').trigger('contextmenu:blur');
683683

684684
if ($this.hasClass('disabled') || $this.hasClass('not-selectable')) {
685685
opt.$selected = null;
@@ -758,8 +758,8 @@ var // currently active contextMenu trigger
758758
opt = data.contextMenu,
759759
root = data.contextMenuRoot;
760760

761-
$this.addClass('hover')
762-
.siblings('.hover').trigger('contextmenu:blur');
761+
$this.addClass('ui-state-focus')
762+
.siblings('.ui-state-focus').trigger('contextmenu:blur');
763763

764764
// remember selected
765765
opt.$selected = root.$selected = $this;
@@ -777,7 +777,7 @@ var // currently active contextMenu trigger
777777
opt = data.contextMenu,
778778
root = data.contextMenuRoot;
779779

780-
$this.removeClass('hover');
780+
$this.removeClass('ui-state-focus');
781781
opt.$selected = null;
782782
}
783783
},
@@ -866,7 +866,7 @@ var // currently active contextMenu trigger
866866
// remove handle
867867
$currentTrigger = null;
868868
// remove selected
869-
opt.$menu.find('.hover').trigger('contextmenu:blur');
869+
opt.$menu.find('.ui-state-focus').trigger('contextmenu:blur');
870870
opt.$selected = null;
871871
// unregister key and mouse handlers
872872
//$(document).off('.contextMenuAutoHide keydown.contextMenu'); // http://bugs.jquery.com/ticket/10705
@@ -916,7 +916,7 @@ var // currently active contextMenu trigger
916916

917917
// create contextMenu items
918918
$.each(opt.items, function(key, item){
919-
var $t = $('<li class="context-menu-item ' + (item.className || "") +'"></li>'),
919+
var $t = $('<li class="context-menu-item ui-menu-item ' + (item.className || "") +'"></li>'),
920920
$label = null,
921921
$input = null;
922922

@@ -957,7 +957,7 @@ var // currently active contextMenu trigger
957957
$t.addClass('context-menu-html not-selectable');
958958
} else if (item.type) {
959959
$label = $('<label></label>').appendTo($t);
960-
$('<span></span>').html(item._name || item.name).appendTo($label);
960+
$('<span></span>').addClass('ui-corner-all').html(item._name || item.name).appendTo($label);
961961
$t.addClass('context-menu-input');
962962
opt.hasTypes = true;
963963
$.each([opt, root], function(i,k){
@@ -1004,7 +1004,7 @@ var // currently active contextMenu trigger
10041004
break;
10051005

10061006
case 'sub':
1007-
$('<span></span>').html(item._name || item.name).appendTo($t);
1007+
$('<span></span>').addClass('ui-corner-all').html(item._name || item.name).appendTo($t);
10081008
item.appendTo = item.$node;
10091009
op.create(item, root);
10101010
$t.data('contextMenu', item).addClass('context-menu-submenu');
@@ -1023,7 +1023,7 @@ var // currently active contextMenu trigger
10231023
}
10241024
});
10251025

1026-
$('<span></span>').html(item._name || item.name || "").appendTo($t);
1026+
$('<span></span>').addClass('ui-corner-all').html(item._name || item.name || "").appendTo($t);
10271027
break;
10281028
}
10291029

@@ -1061,7 +1061,8 @@ var // currently active contextMenu trigger
10611061
});
10621062
// attach contextMenu to <body> (to bypass any possible overflow:hidden issues on parents of the trigger element)
10631063
if (!opt.$node) {
1064-
opt.$menu.css('display', 'none').addClass('context-menu-root');
1064+
// FIXME: remove context-menu-root
1065+
opt.$menu.css('display', 'none').addClass('context-menu-root ui-menu ui-widget ui-widget-content ui-corner-all');
10651066
}
10661067
opt.$menu.appendTo(opt.appendTo || document.body);
10671068
},
@@ -1248,7 +1249,7 @@ $.contextMenu = function(operation, options) {
12481249
'contextmenu.contextMenu': handle.abortevent,
12491250
'mouseenter.contextMenu': handle.itemMouseenter,
12501251
'mouseleave.contextMenu': handle.itemMouseleave
1251-
}, '.context-menu-item');
1252+
}, '.ui-menu-item');
12521253

12531254
initialized = true;
12541255
}

0 commit comments

Comments
 (0)