Click here to Skip to main content
11,922,641 members (57,446 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


7 bookmarked

jQuery button dropdown

, 21 Aug 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
CodeProjectIntroductionOn the jQueryUI documentation for the .button() widget we have an example illustrates the split button functionality See here.The problem is that the example isn't finished and clicking on the small button will only fire an alert.My requirementsI had few requirements but they


On the jQueryUI documentation for the .button() widget we have an example illustrates the split button functionality See here.

The problem is that the example isn't finished and clicking on the small button will only fire an alert.

My requirements

I had few requirements but they were very important to me:
  • Dropdown shold perfectly integrate with the selected theme
  • Only the small '+' button should interact with the dropdown
  • Consider both buttons as a single block so that the dropdown would show beneath that block and not only bellow the '+' button
  • All the buttons should be able to be hidden and shown on demand to reflect different form display modes

Limitations and work to be done

Code reuse
Right now I don't have the time to make this a JQueryUI widget but sure it would be nicer to handle. Anyway, what I did was writing all this inside a user control ( ASCX) and reuse it on every Item Edit page. To do this just create a new ASCX and drop all the code I have on the bottom of this post (CSS, HTML and Javascript) and you're done.

Multiple instances on the page
A true limitation it that there can only be one of these per page.
So if you need this behavior more than once on the page you need to abstract it inside a JQuery UI widget.

Getting it done

The code I'm posting here will render like the picture above and behaves like this:
  • Click '+': Toggles open/close the dropdown menu
  • Click dropdown item: Closes dropdown and performs action
  • Mouse leave dropdown: Closes dropdown

The code

Dropping all the code bellow into a page will do the trick.
After that, all you have to do is override the click events callbacks:
ItemActionButtons.onSaveClick = function(){ alert('Save button have been clicked'); };

We can also hide/show a button this way:

See the ItemActionButtons object for more.
Feel free to add your own actions and events to customise it as you need.


<div class="ItemActionButtons">
    <div style="FLOAT: right" class="buttonset">
        <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 style="FLOAT: right" id="divSaveButton" class="buttonset">
        <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 id="btnSaveExtraOptions" class="SaveExtraOptions ui-corner-bottom">
           <li onclick="$('#btnSaveExtraOptions').toggle(); 
                  ItemActionButtons.SaveAndNewClick.apply(this)">Save and New</li>
           <li onclick="$('#btnSaveExtraOptions').toggle(); 
                  ItemActionButtons.SaveAndCopyClick.apply(this)">Save and Copy</li>


<style type="text/css">

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


<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 () {

  $('#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 () {

   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 () { }



This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Switzerland Switzerland
Senior IT Consultant working in Switzerland as Senior Software Engineer.

Find more at on my blog.

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
Armand Szoke11-Nov-11 2:45
memberArmand Szoke11-Nov-11 2:45 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.151125.1 | Last Updated 21 Aug 2011
Article Copyright 2011 by AlexCode
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid