Question

143

Making a JQuery button act as a dropdown

rated 0 times [ 149] [ 6] / answers: 1 / hits: 37669 / 13 Years ago, fri, july 1, 2011, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

keric

Add To Favorites

Follow

Total Points: 572

Total Questions: 93

Total Answers: 97

Location: Cyprus

Member since Mon, Oct 24, 2022

2 Years ago

keric questions

1 Event.target.dataset returning undefined javascript

Thu, Dec 2, 21, 00:00, 3 Years ago

1 How to make a horizontal line without using < hr> tag?

Mon, Jul 19, 21, 00:00, 3 Years ago

1 Input with type=number that allows only numbers to be typed

Thu, Jul 15, 21, 00:00, 3 Years ago

1 Does declaring a React.memo inside another functional component provide the memoization performance as it is intended?

Sat, Jan 30, 21, 00:00, 3 Years ago

1 ReactJS useEffect() is running every time on page load

Thu, Nov 5, 20, 00:00, 4 Years ago

View All

answered 13 Years ago hollievalerier · Accepted Answer

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