diff options
| author | Alexander Schmitz <arschmitz@gmail.com> | 2014-08-22 23:39:35 -0400 |
|---|---|---|
| committer | Alexander Schmitz <arschmitz@gmail.com> | 2015-10-07 10:57:59 -0400 |
| commit | 40a9d1dfdb6a341904ae7bcd4600b0ef201d14df (patch) | |
| tree | b4eaf29211bd94d9f947e8f0613f7798efe98126 /demos/controlgroup/splitbutton.html | |
| parent | 6e2bbcaa5e19bb933d8024ff5d6fcff34f91e034 (diff) | |
| download | jquery-ui-40a9d1dfdb6a341904ae7bcd4600b0ef201d14df.tar.gz jquery-ui-40a9d1dfdb6a341904ae7bcd4600b0ef201d14df.zip | |
Controlgroup: Inital commit of new widget
This widget replaces the buttonset widget
Diffstat (limited to 'demos/controlgroup/splitbutton.html')
| -rw-r--r-- | demos/controlgroup/splitbutton.html | 23 |
1 files changed, 9 insertions, 14 deletions
diff --git a/demos/controlgroup/splitbutton.html b/demos/controlgroup/splitbutton.html index 5d4c7b3ce..a72cefd96 100644 --- a/demos/controlgroup/splitbutton.html +++ b/demos/controlgroup/splitbutton.html @@ -19,27 +19,19 @@ $( "select" ).selectmenu({ classes: { "ui-selectmenu-button": "ui-button-icon-only" + }, + change: function(){ + $( ".output" ).append( "<li>" + this.value + "</li>" ); } - }).selectmenu( "widget" ).removeClass( "ui-icon-end" ); - $( ".controlgroup" ).controlgroup(); - $( "select" ).on( "selectmenuchange", function(){ - alert( this.value ); }); + $( ".controlgroup" ).controlgroup(); $( "button" ).click(function() { - alert( "Running the last action" ); + $( ".output" ).append( "<li>Running Last Action...</li>" ); }); }); </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"> @@ -50,9 +42,12 @@ <option>Delete</option> </select> </div> + <br/> + <h3>Output:</h3> + <ul class="output"></ul> </div> <div class="demo-description"> - <p>A Controlgroup creating a split button</p> + <p>A controlgroup creating a split button, by combining a button and a selectmenu. We adjust the classes option on the selectmenu to show only the icon</p> </div> </body> </html> |