Making a JQuery button act as a dropdown

Question

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

Answer 1

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.

CSS

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

HTML

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

JavaScript

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

Answer 2

A pluggin is also available to do this.

jQuery DropDown Button