2014-08-28 19:16:51 +00:00
<!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" >
< link rel = "stylesheet" href = "../demos.css" >
2015-08-09 15:48:43 +00:00
< style >
.ui-button-icon-only.demo-splitbutton-select {
width: 1em;
}
< / style >
2015-08-09 04:30:34 +00:00
< script src = "../../external/requirejs/require.js" > < / script >
< script src = "../bootstrap.js" data-modules = "button checkboxradio selectmenu" >
2014-08-28 19:16:51 +00:00
$( "select" ).selectmenu({
classes: {
2015-08-09 15:48:43 +00:00
"ui-selectmenu-button": "ui-button-icon-only demo-splitbutton-select"
2014-08-23 03:39:35 +00:00
},
change: function(){
$( ".output" ).append( "< li > " + this.value + "< / li > " );
2014-08-28 19:16:51 +00:00
}
});
2014-08-23 03:39:35 +00:00
$( ".controlgroup" ).controlgroup();
2014-08-28 19:16:51 +00:00
$( "button" ).click(function() {
2014-08-23 03:39:35 +00:00
$( ".output" ).append( "< li > Running Last Action...< / li > " );
2014-08-28 19:16:51 +00:00
});
< / script >
< / head >
< body >
< 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 >
2014-08-23 03:39:35 +00:00
< br / >
< h3 > Output:< / h3 >
< ul class = "output" > < / ul >
2014-08-28 19:16:51 +00:00
< / div >
< div class = "demo-description" >
2014-08-23 03:39:35 +00:00
< 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 >
2014-08-28 19:16:51 +00:00
< / div >
< / body >
< / html >
