aboutsummaryrefslogtreecommitdiffstats
path: root/demos/controlgroup/splitbutton.html
diff options
context:
space:
mode:
authorAlexander Schmitz <arschmitz@gmail.com>2014-08-28 15:16:51 -0400
committerAlexander Schmitz <arschmitz@gmail.com>2015-10-07 10:57:59 -0400
commit25d0c857188c19347c869f803530289762199f92 (patch)
tree768afcbc456f878fb35e96546f468f9ffaa46b80 /demos/controlgroup/splitbutton.html
parent02033262ee0fb1d9f33c361b3c2ddfa168604854 (diff)
downloadjquery-ui-25d0c857188c19347c869f803530289762199f92.tar.gz
jquery-ui-25d0c857188c19347c869f803530289762199f92.zip
Checkboxradio: Initial commit of new widget
Diffstat (limited to 'demos/controlgroup/splitbutton.html')
-rw-r--r--demos/controlgroup/splitbutton.html58
1 files changed, 58 insertions, 0 deletions
diff --git a/demos/controlgroup/splitbutton.html b/demos/controlgroup/splitbutton.html
new file mode 100644
index 000000000..5d4c7b3ce
--- /dev/null
+++ b/demos/controlgroup/splitbutton.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Controlgroup - Split Button</title>
+ <link rel="stylesheet" href="../../themes/base/all.css">
+ <script src="../../external/jquery/jquery.js"></script>
+ <script src="../../ui/core.js"></script>
+ <script src="../../ui/widget.js"></script>
+ <script src="../../ui/button.js"></script>
+ <script src="../../ui/checkboxradio.js"></script>
+ <script src="../../ui/menu.js"></script>
+ <script src="../../ui/position.js"></script>
+ <script src="../../ui/selectmenu.js"></script>
+ <script src="../../ui/controlgroup.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
+ $(function() {
+ $( "select" ).selectmenu({
+ classes: {
+ "ui-selectmenu-button": "ui-button-icon-only"
+ }
+ }).selectmenu( "widget" ).removeClass( "ui-icon-end" );
+ $( ".controlgroup" ).controlgroup();
+ $( "select" ).on( "selectmenuchange", function(){
+ alert( this.value );
+ });
+ $( "button" ).click(function() {
+ alert( "Running the last action" );
+ });
+ });
+ </script>
+ <style>
+ select {
+ width: 2em;
+ }
+ </style>
+</head>
+<body>
+<div class="demo-description">
+<p>A Controlgroup creating a split button</p>
+</div>
+<div class="widget">
+ <h1>Split button</h1>
+ <div class="controlgroup">
+ <button>Run last option</button>
+ <select>
+ <option>Open...</option>
+ <option>Save</option>
+ <option>Delete</option>
+ </select>
+ </div>
+</div>
+<div class="demo-description">
+ <p>A Controlgroup creating a split button</p>
+</div>
+</body>
+</html>