Click here to Skip to main content
15,114,643 members
Articles / jQuery
Technical Blog
Posted 20 Jul 2011

Tagged as

Stats

34.5K views
7 bookmarked

jQuery Button Dropdown

Rate me:
Please Sign up or sign in to vote.
4.75/5 (4 votes)
21 Aug 2011CPOL2 min read
jQuery button dropdown

Introduction

On the jQueryUI documentation for the .button() widget, we have an example that 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 should 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 below 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 (ASP.ne 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 is 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 below into a page will do the trick.

After that, all you have to do is override the click events callbacks:

JavaScript
ItemActionButtons.onSaveClick = function(){ alert('Save button have been clicked'); };

We can also hide/show a button this way:

JavaScript
ItemActionButtons.AllowCancel(false);

See the ItemActionButtons object for more.

Feel free to add your own actions and events to customise it as you need.

HTML

HTML
<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>
    
    <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>
        </ul>
    </div>
</div>

CSS

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>

JavaScript

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>
This article was originally posted at http://www.instanceofanobject.com/feeds/posts/default

License

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

Share

About the Author

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

Find more at on my blog.

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.