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" >
< 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"
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 >
