diff options
Diffstat (limited to 'demos/button')
| -rw-r--r-- | demos/button/splitbutton.html | 59 |
1 files changed, 41 insertions, 18 deletions
diff --git a/demos/button/splitbutton.html b/demos/button/splitbutton.html index 580c49cc5..8baf12f00 100644 --- a/demos/button/splitbutton.html +++ b/demos/button/splitbutton.html @@ -8,6 +8,8 @@ <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.button.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.menu.js"></script> <link rel="stylesheet" href="../demos.css"> <script> $(function() { @@ -16,39 +18,60 @@ .click(function() { alert( "Running the last action" ); }) - .next() - .button( { - text: false, - icons: { - primary: "ui-icon-triangle-1-s" - } - }) - .click(function() { - alert( "Could display a menu to select an action" ); - }) - .parent() - .buttonset(); + .next() + .button( { + text: false, + icons: { + primary: "ui-icon-triangle-1-s" + } + }) + .click( function() { + 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() + .next() + .hide() + .menu(); }); </script> <style> - + .ui-menu { position: absolute; width: 100px; } </style> </head> <body> <div class="demo"> -<div> - <button id="rerun">Run last action</button> - <button id="select">Select an action</button> -</div> + <div> + <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 --> <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 and no text. Both are grouped together in a set.</p> + +<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 --> </body> |