Introdução

Na
documentação jQueryUI para o  widget .button(), temos um exemplo que
ilustra a funcionalidade de divisão do botão. Veja aqui.

O problema é que o exemplo não está finalizado e,
ao clicar no pequeno botão, somente um alerta será acionado.

Meus requisitos

Eu tinha poucos requisitos, mas eles eram muito
importantes para mim:

• O dropdown deve se integrar
  perfeitamente ao tema selecionado
• Somente o pequeno botão ‘+’
  deve interagir com o dropdown
• Considere ambos os botões
  como um único bloco, de modo que o dropdown apareça somente abaixo deste
  bloco e não somente abaixo do botão ‘+’
• Todos os botões devem ser
  capazes de ser escondidos e mostrados sob demanda para refletir diferentes
  modos de visualização

Limitações e trabalho a ser feito

Reutilização
de código

No momento, eu não tenho tempo para fazer disso um
widget do JQueryUI, mas com certeza ele seria melhor de manusear. De qualquer maneira,
o que eu fiz foi escrever tudo isso dentro de um controle de usuário (ASP.ne
ASCX) e reutilizar em toda página de edição de item. Para fazer isso, apenas
crie um novo ASCX e coloque todo o código que está no final deste post (CSS,
HTML e Javascript) e já está pronto.

Instâncias múltiplas na página

Uma limitação real é que somente pode existir
uma destas por página.

Portanto, se você precisa deste comportamento mais
de uma vez na página, você deve abstraí-lo dentro de um widget JQuery UI.

Finalizando

O código que estou postando aqui irá renderizar
como a imagem acima e se comporta assim:

• Clique em ‘+’: Toggles
  abre/fecha o menu dropdown
• Clique em item dropdown: Fecha o
  dropdown e executa uma ação
• Mouse deixa o dropdown: Fecha o
  dropdown

O código

Coloque
todo o código abaixo em uma página e isto fará funcionar. Depois
disso, tudo que você tem que fazer é substituir os callbacks de cliques de
eventos:

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

Nós também podemos mostrar/esconder um botão
desta maneira:

ItemActionButtons.AllowCancel(false);

Veja o objeto ItemActionButtons
para mais informações. Sinta-se à vontade para adicionar suas próprias ações e eventos para customizá-lo da
maneira que você precisar.

HTML

<div class="ItemActionButtons"><div class="buttonset" style="float: right;"><input id="btnDelete" value="Delete" class="button" onclick="ItemActionButtons.onDeleteClick.apply(this)" type="button">
  <input id="btnCancel" value="Cancel" class="button" onclick="ItemActionButtons.onCancelClick.apply(this)" type="button">
 </div><div id="divSaveButton" class="buttonset" style="float: right;"><input id="btnSave" value="Save" class="button" onclick="ItemActionButtons.onSaveClick.apply(this)" type="button">
  <input id="btnSaveExtra" class="button" value="+" onclick="ItemActionButtons.onSaveExtraClick.apply(this)" type="button">

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

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

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

?

Texto original disponível em http://www.instanceofanobject.com/2011/07/jquery-button-dropdown.html