Line | |
---|
1 | <!doctype html> |
---|
2 | <html lang="en"> |
---|
3 | <head> |
---|
4 | <meta charset="utf-8"> |
---|
5 | <title>jQuery UI Button - Split button</title> |
---|
6 | <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> |
---|
7 | <script src="../../jquery-1.10.2.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.button.js"></script> |
---|
11 | <script src="../../ui/jquery.ui.position.js"></script> |
---|
12 | <script src="../../ui/jquery.ui.menu.js"></script> |
---|
13 | <link rel="stylesheet" href="../demos.css"> |
---|
14 | <style> |
---|
15 | .ui-menu { position: absolute; width: 100px; } |
---|
16 | </style> |
---|
17 | <script> |
---|
18 | $(function() { |
---|
19 | $( "#rerun" ) |
---|
20 | .button() |
---|
21 | .click(function() { |
---|
22 | alert( "Running the last action" ); |
---|
23 | }) |
---|
24 | .next() |
---|
25 | .button({ |
---|
26 | text: false, |
---|
27 | icons: { |
---|
28 | primary: "ui-icon-triangle-1-s" |
---|
29 | } |
---|
30 | }) |
---|
31 | .click(function() { |
---|
32 | var menu = $( this ).parent().next().show().position({ |
---|
33 | my: "left top", |
---|
34 | at: "left bottom", |
---|
35 | of: this |
---|
36 | }); |
---|
37 | $( document ).one( "click", function() { |
---|
38 | menu.hide(); |
---|
39 | }); |
---|
40 | return false; |
---|
41 | }) |
---|
42 | .parent() |
---|
43 | .buttonset() |
---|
44 | .next() |
---|
45 | .hide() |
---|
46 | .menu(); |
---|
47 | }); |
---|
48 | </script> |
---|
49 | </head> |
---|
50 | <body> |
---|
51 | |
---|
52 | <div> |
---|
53 | <div> |
---|
54 | <button id="rerun">Run last action</button> |
---|
55 | <button id="select">Select an action</button> |
---|
56 | </div> |
---|
57 | <ul> |
---|
58 | <li><a href="#">Open...</a></li> |
---|
59 | <li><a href="#">Save</a></li> |
---|
60 | <li><a href="#">Delete</a></li> |
---|
61 | </ul> |
---|
62 | </div> |
---|
63 | |
---|
64 | <div class="demo-description"> |
---|
65 | <p>An example of a split button built with two buttons: A plain button with just text, one with only a primary icon |
---|
66 | and no text. Both are grouped together in a set.</p> |
---|
67 | </div> |
---|
68 | </body> |
---|
69 | </html> |
---|
Note: See
TracBrowser
for help on using the repository browser.