Take this JQuery UI Button sample as a reference: http://jqueryui.com/demos/button/#splitbutton
Now, how would you implement that dropdown when click the small button? My caution is mainly with the transformation .button() does to the actual button that messes the offset coordenates.
To sum it, I need opinions on how to correctly implement a dropdown on the click of a JQuery button that integrates with the current theme.
Thanks! Alex
Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.
$('#Crd'). val() will give you the selected value of the drop down element. Use this to get the selected options text.
A dropdown button lets the user select from a number of items. The button shows the currently selected item as well as an arrow that opens a menu for selecting another item.
The <select> tab is used with <option> tab to create the simple dropdown list in HTML. After that JavaScript helps to perform operation with this list. Other than this, you can use the container tab <div> to create the dropdown list. Add the dropdown items and links inside it.
I finally made it and looks like the picture above.
I blogged about it here and I'm also posting all the code bellow.
Please refer to the blog post for deeper explanation.
<style type="text/css">
.ItemActionButtons{}
.ItemActionButtons .SaveExtraOptions
{
display: none; list-style-type: none; padding: 5px; margin: 0; border: 1px solid #DCDCDC; background-color: #fff; z-index: 999; position: absolute;
}
.ItemActionButtons .SaveExtraOptions li
{
padding: 5px 3px 5px 3px; margin: 0; width: 150px; border: 1px solid #fff;
}
.ItemActionButtons .SaveExtraOptions li:hover
{
cursor: pointer;
background-color: #DCDCDC;
}
.ItemActionButtons .SaveExtraOptions li a
{
text-transform: none;
}
</style>
<div class="ItemActionButtons">
<div class="buttonset" style="float: right;">
<input id="btnDelete" type="button" value="Delete" class="button" onclick="ItemActionButtons.onDeleteClick.apply(this)" />
<input id="btnCancel" type="button" value="Cancel" class="button"onclick="ItemActionButtons.onCancelClick.apply(this)" />
</div>
<div id="divSaveButton" class="buttonset" style="float: right;">
<input id="btnSave" type="button" value="Save" class="button" onclick="ItemActionButtons.onSaveClick.apply(this)" />
<input id="btnSaveExtra" type="button" class="button" value="+" onclick="ItemActionButtons.onSaveExtraClick.apply(this)" />
<ul class="SaveExtraOptions ui-corner-bottom" id="btnSaveExtraOptions">
<li onclick="$('#btnSaveExtraOptions').toggle(); ItemActionButtons.SaveAndNewClick.apply(this)">Save and New</li>
<li onclick="$('#btnSaveExtraOptions').toggle(); ItemActionButtons.SaveAndCopyClick.apply(this)">Save and Copy</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(document).delegate('#btnSaveExtra', 'mouseleave', function () { setTimeout(function(){ if (!ItemActionButtons.isHoverMenu) { $('#btnSaveExtraOptions').hide(); }}, 100, 1) });
$(document).delegate('#btnSaveExtraOptions', 'mouseenter', function () { ItemActionButtons.isHoverMenu = true; });
$(document).delegate('#btnSaveExtraOptions', 'mouseleave', function () { $('#btnSaveExtraOptions').hide(); ItemActionButtons.isHoverMenu = false; });
var $IsHoverExtraOptionsFlag = 0;
$(document).ready(function () {
$(".button").button();
$(".buttonset").buttonset();
$('#btnSaveExtra').button({ icons: { primary: "ui-icon-plusthick" } });
$('#btnSaveExtraOptions li').addClass('ui-corner-all ui-widget');
$('#btnSaveExtraOptions li').hover(
function () { $(this).addClass('ui-state-default'); },
function () { $(this).removeClass('ui-state-default'); }
);
$('#btnSaveExtraOptions li').mousedown(function () { $(this).addClass('ui-state-active'); });
$('#btnSaveExtraOptions li').mouseup(function () { $(this).removeClass('ui-state-active'); });
});
var ItemActionButtons = {
isHoverMenu: false,
AllowDelete: function (value) { value ? $("#btnDelete").show() : $("#btnDelete").hide() },
AllowCancel: function (value) { value ? $("#btnCancel").show() : $("#btnCancel").hide(); },
AllowSave: function (value) { value ? $("#btnSave").show() : $("#btnSave").hide() },
AllowSaveExtra: function (value) { value ? $("#btnSaveExtra").show() : $("#btnSaveExtra").hide() },
onDeleteClick: function () { },
onCancelClick: function () { },
onSaveClick: function () { },
onSaveExtraClick: function () {
$('#btnSaveExtraOptions').toggle();
var btnLeft = $('#divSaveButton').offset().left;
var btnTop = $('#divSaveButton').offset().top + $('#divSaveButton').outerHeight(); // +$('#divSaveButton').css('padding');
var btnWidth = $('#divSaveButton').outerWidth();
$('#btnSaveExtraOptions').css('left', btnLeft).css('top', btnTop);
},
SaveAndNewClick: function () { },
SaveAndCopyClick: function () { }
}
</script>
A pluggin is also available to do this.
jQuery DropDown Button
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With