library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Menu: Extended button's splitbutton demo to use an actual menu

Browse Source
This commit is contained in:
jzaefferer 2010-06-23 16:58:20 +02:00
parent bf977a6770
commit 5f4a6009e9
1 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
demos/button/splitbutton.html
View File

@ -8,6 +8,8 @@
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
@ -24,14 +26,25 @@
}
})
.click( function() {
alert( "Could display a menu to select an action" );
var menu = $(this).parent().next().show().position({
my: "left top",
at: "left bottom",
of: this
});
$(document).one("click", function() {
menu.hide();
});
return false;
})
.parent()
.buttonset();
.buttonset()
.next()
.hide()
.menu();
});
</script>
<style>
.ui-menu { position: absolute; width: 100px; }
</style>
</head>
<body>
@ -39,8 +52,15 @@
<div class="demo">
<div>
<button id="rerun">Run last action</button>
<button id="select">Select an action</button>
<div>
<button id="rerun">Run last action</button>
<button id="select">Select an action</button>
</div>
<ul>
<li><a href="#">Open...</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>
</div>
</div><!-- End demo -->
@ -49,7 +69,7 @@
<div class="demo-description">
<p>An example of a split button built with two buttons: A plan button with just text, one with only a primary icon
<p>An example of a split button built with two buttons: A plain button with just text, one with only a primary icon
and no text. Both are grouped together in a set.</p>
</div><!-- End demo-description -->