JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<br /><br /><br /><br /><br /><br />
<span class='ui-toolbar'>
<div class='ui-jqgrid-buttondiv ui-jqgrid-splitbuttondiv
'>
<button class='ui-jqgrid-button' id="test">Test</button>
</div>
<div class='ui-jqgrid-buttondiv'>
<button class='ui-jqgrid-button ui-jqgrid-splitbuttonleft
' id="rerun">Base DA</button>
<button class='ui-jqgrid-button ui-jqgrid-splitbuttonright
' id="select">Select an action</button>
</div>
<ul>
<li><a href="#">Child DA1</a></li>
<li><a href="#">Child DA2</a></li>
<li><a href="#">Child DA3</a></li>
</ul>
</span>
CSS
.ui-jqgrid-buttondiv
{
display: inline-block;
/* IE 7- fixes */
zoom: 1;
*display: inline;
}
.ui-toolbar
{
display: inline-block !important;
padding: 0px 3px;
*zoom: 1;
}
.ui-jqgrid-button
{
border: 1px solid #15428B !important;
color: #15428B !important;
font-weight: bold !important;
border-radius: 5px 5px 5px 5px !important;
background: #bbdaff url(images/ui-bg_glass_100_bbdaff_1x400.png) 50% 50% repeat-x !important;
margin: 2px !important;
height: 22px;
}
.ui-jqgrid-splitbuttonright
{
border-left: 0px !important;
border-radius: 0px 5px 5px 0px !important;
margin: 2px 2px 2px 0px !important;
padding-left: 0px !important;
}
.ui-jqgrid-splitbuttonleft
{
border-radius: 5px 0px 0px 5px !important;
margin: 2px 0px 2px 2px !important;
padding-right: 0px !important;
}
.ui-jqgrid-splitbuttondiv
{
margin-right: 0px !important;
}
JavaScript
$("#rerun").button().click(function() {
alert("Running the last action");
}).next().button({
text: false,
icons: {
primary: "ui-icon-triangle-1-n"
}
}).click(function() {
var menu = $(this).parent().next().show().position({
my: "right bottom",
at: "left top",
of: this
});
$(document).one("click", function() {
menu.hide();
});
return false;
}).parent().buttonset().next().hide().menu();
$('#test').button();