Skip to content

Commit e6d1ab7

Browse files
jzaeffererjzaefferer
committed
Popup and Menubar demos
1 parent 24c0d91 commit e6d1ab7

File tree

13 files changed

+376
-431
lines changed

13 files changed

+376
-431
lines changed

‎demos/demos.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,8 +129,7 @@ eventually we should convert the font sizes to ems -- using px for now to minimi
129129

130130
.normal h3.demo-header { font-size:32px; padding:0 0 5px; border-bottom:1px solid #eee; text-transform: capitalize; }
131131
.normal h4.demo-subheader { font-size:10px; text-transform: uppercase; color:#999; padding:8px 0 3px; border:0; margin:0; }
132-
.normal a:link,
133-
.normal a:visited { color:#1b75bb; text-decoration:none; }
132+
#demo-notes a, #demo-link a, #demo-source a { color:#1b75bb; text-decoration:none; }
134133
.normal a:hover,
135134
.normal a:active { color:#0b559b; }
136135

‎demos/index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@
2020
<script src="../ui/jquery.ui.draggable.js"></script>
2121
<script src="../ui/jquery.ui.droppable.js"></script>
2222
<script src="../ui/jquery.ui.menu.js"></script>
23+
<script src="../ui/jquery.ui.menubar.js"></script>
24+
<script src="../ui/jquery.ui.popup.js"></script>
2325
<script src="../ui/jquery.ui.position.js"></script>
2426
<script src="../ui/jquery.ui.progressbar.js"></script>
2527
<script src="../ui/jquery.ui.resizable.js"></script>
@@ -279,6 +281,8 @@
279281
<dd><a href="datepicker/index.html">Datepicker</a></dd>
280282
<dd><a href="dialog/index.html">Dialog</a></dd>
281283
<dd><a href="menu/index.html">Menu</a></dd>
284+
<dd><a href="menubar/index.html">Menubar</a></dd>
285+
<dd><a href="popup/index.html">Popup</a></dd>
282286
<dd><a href="progressbar/index.html">Progressbar</a></dd>
283287
<dd><a href="slider/index.html">Slider</a></dd>
284288
<dd><a href="spinner/index.html">Spinner</a></dd>

‎demos/menu/contextmenu.html

Lines changed: 16 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,44 +3,28 @@
33
<head>
44
<meta charset="UTF-8" />
55
<title>jQuery UI Menu - Contextmenu demo</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.5.1.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
12-
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
13-
<link type="text/css" href="../demos.css" rel="stylesheet" />
14-
<script type="text/javascript">
6+
<link href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7+
<script src="../../jquery-1.5.1.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.position.js"></script>
10+
<script src="../../ui/jquery.ui.widget.js"></script>
11+
<script src="../../ui/jquery.ui.menu.js"></script>
12+
<script src="../../ui/jquery.ui.button.js"></script>
13+
<script src="../../ui/jquery.ui.popup.js"></script>
14+
<link href="../demos.css" rel="stylesheet" />
15+
<script>
1516
$(function() {
1617
$(".demo button").button({
1718
icons: {
1819
primary: "ui-icon-home",
1920
secondary: "ui-icon-triangle-1-s"
2021
}
21-
}).each(function() {
22-
$(this).next().menu({
23-
select: function(event, ui) {
24-
$(this).hide();
25-
$("#log").append("<div>Selected " + ui.item.text() + "</div>");
26-
}
27-
}).hide();
28-
}).click(function(event) {
29-
var menu = $(this).next();
30-
if (menu.is(":visible")) {
31-
menu.hide();
32-
return false;
22+
}).next().menu({
23+
select: function(event, ui) {
24+
$(this).hide();
25+
$("#log").append("<div>Selected " + ui.item.text() + "</div>");
3326
}
34-
menu.menu("blur").show().position({
35-
my: "left top",
36-
at: "right top",
37-
of: this
38-
});
39-
$(document).one("click", function() {
40-
menu.hide();
41-
});
42-
return false;
43-
})
27+
}).popup();
4428
});
4529
</script>
4630
<style>
@@ -69,7 +53,7 @@
6953

7054
<div class="demo-description">
7155

72-
<p>A simple contextmenu: Click the button, or tab to it and hit space to open the menu. Use the mouse or cursor keys to select an item, click it or hit enter to select it.</p>
56+
<p>TODO update - A simple contextmenu: Click the button, or tab to it and hit space to open the menu. Use the mouse or cursor keys to select an item, click it or hit enter to select it.</p>
7357

7458
<p>The keyboard handling is part of the menu. Using the input option to menu is configured to add the key event handlers to the button, as that button gets focused when clicked.</p>
7559

‎demos/menu/default.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@
44
<meta charset="UTF-8" />
55
<title>jQuery UI Menu - Default demo</title>
66
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.5.1.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
11-
<link type="text/css" href="../demos.css" rel="stylesheet" />
12-
<script type="text/javascript">
7+
<script src="../../jquery-1.5.1.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.menu.js"></script>
11+
<link href="../demos.css" rel="stylesheet" />
12+
<script>
1313
$(function() {
1414
$(".demo ul").menu();
1515
});

‎demos/menu/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<title>jQuery UI Menu Demos</title>
6-
<link type="text/css" href="../demos.css" rel="stylesheet" />
6+
<link href="../demos.css" rel="stylesheet" />
77
</head>
88
<body>
99
<div class="demos-nav">

‎tests/visual/menu/menubar.html renamed to ‎demos/menubar/default.html

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,18 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>Menu Visual Test: Default</title>
5-
<link rel="stylesheet" href="../visual.css" type="text/css" />
6-
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
7-
<script type="text/javascript" src="../../../jquery-1.5.1.js"></script>
8-
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
9-
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
10-
<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
11-
<script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script>
12-
<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
13-
<script type="text/javascript" src="../../../ui/jquery.ui.menubar.js"></script>
14-
<!--
15-
<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
16-
-->
17-
<script type="text/javascript">
4+
<title>jQuery UI Menubar - Default demo</title>
5+
<link rel="stylesheet" href="../demos.css" type="text/css" />
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
7+
<script src="../../jquery-1.5.1.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.position.js"></script>
11+
<script src="../../ui/jquery.ui.button.js"></script>
12+
<script src="../../ui/jquery.ui.menu.js"></script>
13+
<script src="../../ui/jquery.ui.menubar.js"></script>
14+
<script>
1815
$(function() {
19-
$.fn.themeswitcher && $('<div/>').css({
20-
position: "absolute",
21-
right: 10,
22-
top: 10
23-
}).appendTo(document.body).themeswitcher();
24-
2516
$("td:has(.menubar)").clone().appendTo("tbody tr:not(:first)");
2617

2718
$("#bar1, .menubar").menubar({
@@ -40,7 +31,6 @@
4031
});
4132
</script>
4233
<style type="text/css">
43-
body { font-size:62.5%; }
4434
#bar1, #bar2 { margin: 0 0 4em; } /* style for this page only */
4535
.ui-menu { width: 200px; position: absolute; outline: none; z-index: 9999; }
4636
.ui-menu .ui-icon { float: right; }
@@ -64,18 +54,20 @@
6454
.ui-menubar-item {
6555
float: left;
6656
}
67-
57+
/*
6858
table {
6959
border-collapse: collapse;
7060
}
7161
th, td {
7262
padding: 0.5em;
7363
border: 1px solid black;
7464
}
65+
*/
7566
</style>
7667
</head>
7768
<body>
7869

70+
<div class="demo">
7971
<ul id="bar1" class="menubar">
8072
<li>
8173
<a href="#">File</a>
@@ -168,6 +160,7 @@
168160
</li>
169161
</ul>
170162

163+
<!--
171164
<table id="movies" class="ui-widget">
172165
<thead>
173166
<tr>
@@ -222,11 +215,20 @@
222215
</tr>
223216
</tbody>
224217
</table>
218+
-->
225219

226220
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
227221
Log:
228-
<div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
222+
<div id="log" style="height: 100px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
229223
</div>
224+
</div>
225+
226+
<div class="demo-description">
227+
228+
<p>TODO</p>
229+
230+
</div><!-- End demo-description -->
231+
230232

231233
</body>
232234
</html>

‎demos/menubar/index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>jQuery UI Menubar Demos</title>
6+
<link href="../demos.css" rel="stylesheet" />
7+
</head>
8+
<body>
9+
<div class="demos-nav">
10+
<h4>Examples</h4>
11+
<ul>
12+
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
13+
</ul>
14+
</div>
15+
</body>
16+
</html>

‎demos/popup/default.html

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>jQuery UI Popup - Default demo</title>
5+
<link rel="stylesheet" href="../demos.css" />
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" title="ui-theme" />
7+
<script src="../../jquery-1.5.1.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.position.js"></script>
11+
<script src="../../ui/jquery.ui.button.js"></script>
12+
<script src="../../ui/jquery.ui.menu.js"></script>
13+
<script src="../../ui/jquery.ui.popup.js"></script>
14+
<script>
15+
$(function() {
16+
var selected = {
17+
select: function( event, ui ) {
18+
$( "<div/>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" );
19+
$(this).popup("close");
20+
}
21+
};
22+
23+
$("#login-form").popup()
24+
.find(":submit").button().click(function(event) {
25+
event.preventDefault();
26+
});
27+
});
28+
</script>
29+
<style type="text/css">
30+
.ui-popup { position: absolute; z-index: 5000; }
31+
.ui-menu { width: 200px; }
32+
33+
/*
34+
table {
35+
border-collapse: collapse;
36+
}
37+
th, td {
38+
padding: 0.5em;
39+
border: 1px solid black;
40+
}
41+
*/
42+
43+
#login-form {
44+
width: 16em; border: 1px solid gray; border-radius: 5px;
45+
padding: 1em;
46+
box-shadow: 3px 3px 5px -1px rgba(0, 0, 0, 0.5);
47+
background: lightgray; background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
48+
font-size: 1.3em; outline: none;
49+
}
50+
#login-form label { display: inline-block; width: 5em; }
51+
#login-form .submit { margin-left: 5em; }
52+
</style>
53+
</head>
54+
<body>
55+
56+
<div class="demo">
57+
<a href="#login-form">Log In</a>
58+
<div id="login-form" class="ui-widget-content" tabIndex="0">
59+
<form>
60+
<div>
61+
<label>Username</label>
62+
<input type="username" />
63+
</div>
64+
<div>
65+
<label>Password</label>
66+
<input type="password" />
67+
</div>
68+
<div>
69+
<input type="submit" class="submit" value="Login" />
70+
</div>
71+
</form>
72+
</div>
73+
</div>
74+
75+
<div class="demo-description">
76+
77+
<p>A link to a login form that opens as a popup. [Not quite functional, focus handling needs to get better]</p>
78+
79+
</div><!-- End demo-description -->
80+
81+
82+
</body>
83+
</html>

‎demos/popup/index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>jQuery UI Popup Demos</title>
6+
<link href="../demos.css" rel="stylesheet" />
7+
</head>
8+
<body>
9+
<div class="demos-nav">
10+
<h4>Examples</h4>
11+
<ul>
12+
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
13+
<li><a href="popup-menu.html">Menu's as popup</a></li>
14+
<li><a href="popup-menu-table.html">Menu's as popup in a table</a></li>
15+
</ul>
16+
</div>
17+
</body>
18+
</html>

0 commit comments

Comments
 (0)