8000 Menu: Extended button's splitbutton demo to use an actual menu · adamlogic/jquery-ui@5f4a600 · GitHub
[go: up one dir, main page]
Skip to content

Commit 5f4a600

Browse files
jzaeffererjzaefferer
committed
Menu: Extended button's splitbutton demo to use an actual menu
1 parent bf977a6 commit 5f4a600

File tree

1 file changed

+26
-6
lines changed

1 file changed

+26
-6
lines changed

‎demos/button/splitbutton.html

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
99
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
1010
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
11+
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
12+
<script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
1113
<link type="text/css" href="../demos.css" rel="stylesheet" />
1214
<script type="text/javascript">
1315
$(function() {
@@ -24,23 +26,41 @@
2426
}
2527
})
2628
.click( function() {
27-
alert( "Could display a menu to select an action" );
29+
var menu = $(this).parent().next().show().position({
30+
my: "left top",
31+
at: "left bottom",
32+
of: this
33+
});
34+
$(document).one("click", function() {
35+
menu.hide();
36+
});
37+
return false;
2838
})
2939
.parent()
30-
.buttonset();
40+
.buttonset()
41+
.next()
42+
.hide()
43+
.menu();
3144
});
3245
</script>
3346
<style>
34-
47+
.ui-menu { position: absolute; width: 100px; }
3548
</style>
3649
</head>
3750
<body>
3851

3952
<div class="demo">
4053

4154
<div>
42-
<button id="rerun">Run last action</button>
43-
<button id="select">Select an action</button>
55+
<div>
56+
<button id="rerun">Run last action</button>
57+
<button id="select">Select an action</button>
58+
</div>
59+
<ul>
60+
<li><a href="#">Open...</a></li>
61+
<li><a href="#">Save</a></li>
62+
<li><a href="#">Delete</a></li>
63+
</ul>
4464
</div>
4565

4666
</div><!-- End demo -->
@@ -49,7 +69,7 @@
4969

5070
<div class="demo-description">
5171

52-
<p>An example of a split button built with two buttons: A plan button with just text, one with only a primary icon
72+
<p>An example of a split button built with two buttons: A plain button with just text, one with only a primary icon
5373
and no text. Both are grouped together in a set.</p>
5474

5575
</div><!-- End demo-description -->

0 commit comments

Comments
 (0)
0