Skip to content

Commit c3d3249

Browse files
committed
First attempt at a menubar
1 parent ca36569 commit c3d3249

File tree

1 file changed

+94
-0
lines changed

1 file changed

+94
-0
lines changed

tests/visual/menu/menubar.html

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<!doctype html>
2+
<html>
3+
<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.4.2.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="http://jqueryui.com/themeroller/themeswitchertool/"></script>
14+
<script type="text/javascript">
15+
$(function() {
16+
$.fn.themeswitcher && $('<div/>').css({
17+
position: "absolute",
18+
right: 10,
19+
top: 10
20+
}).appendTo(document.body).themeswitcher();
21+
22+
$(".menubar").children("a")
23+
.button()
24+
.click(function() {
25+
var button = $(this);
26+
var menu = button.next();
27+
if (menu.is(":visible")) {
28+
menu.hide();
29+
return false;
30+
}
31+
menu.parent().find(".ui-menu").not(menu).hide();
32+
menu.show().css({ left:0, top: 0 }).position({
33+
my: "left top",
34+
at: "left bottom",
35+
of: button
36+
});
37+
$(document).bind("click.menubar", function(event) {
38+
if ($(event.target).closest(".ui-menu")[0] == menu[0]) {
39+
return;
40+
}
41+
$(this).unbind(".menubar");
42+
menu.hide();
43+
});
44+
return false;
45+
})
46+
.each(function() {
47+
$(this).next().hide().menu({
48+
input: $(this),
49+
select: function(event, ui) {
50+
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
51+
}
52+
});
53+
});
54+
55+
});
56+
</script>
57+
<style>
58+
body { font-size:62.5%; }
59+
.ui-menu { width: 200px; }
60+
.menubar .ui-menu { position: absolute; }
61+
</style>
62+
</head>
63+
<body>
64+
65+
<div class="menubar ui-widget-header">
66+
<a href="#">File</a>
67+
<ul>
68+
<li><a href="#">Open...</a></li>
69+
<li><a href="#">Save</a></li>
70+
<li><a href="#">Save as...</a></li>
71+
<li><a href="#">Close</a></li>
72+
<li><a href="#">Quit</a></li>
73+
</ul>
74+
<a href="#">Edit</a>
75+
<ul>
76+
<li><a href="#">Copy</a></li>
77+
<li><a href="#">Cut</a></li>
78+
<li><a href="#">Paste</a></li>
79+
</ul>
80+
<a href="#">View</a>
81+
<ul>
82+
<li><a href="#">Fullscreen</a></li>
83+
<li><a href="#">Fit into view</a></li>
84+
<li><a href="#">Customize...</a></li>
85+
</ul>
86+
</div>
87+
88+
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
89+
Log:
90+
<div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
91+
</div>
92+
93+
</body>
94+
</html>

0 commit comments

Comments
 (0)