dropdown tab with split button dropdowns behavior

Question

I would like to use a dropdown tab, but a little bit tweaked: I would like to show a dropdown menu (without selecting the tab) when I press the caret, whereas if I press the tab voice or one of the drop menu items, the tab will be selected.

Consider this:

if I press the down caret of "Dropdown", I would like to show the dropdown menu like this:

and in case I select @fat or @mdo, the tab will be selected, otherwise it should be set back to its pristine version above. This is the actual behavior of a normal dropdown item in a tab, but the title opens the dropdown menu instead of opening a tab, and that's what I don't want. In other words, the tabs I could open would be three instead of two. So: how to differentiate the two components?

Answer 1

Here's a solution that doesn't require any tweaking with JS:

Just take the normal markup for a tab nav with dropdown

<ul class="nav nav-tabs nav-justified split-button-nav">
<li class="active"><a href="#">TAB</a></li>
<li><a href="#">TAB</a></li>
<li>
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </a>
    <a href="#" class="">Default</a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
</li>
<li><a href="#">TAB</a></li>
</ul>

If we place the link for the dropdown above the tab button in the markup, then float it right, it will stay in the space reserved for the tab button, but be hidden behind its unfloated sibling. We just need to tweak its z-index to render it visible and clickable.

No need for extra JS. I added a class of .split-button-nav to the nav in order to target the element in CSS. You can see that the class .nav-justified has also been added, and works without any problems.

Working jsFiddle here.

Answer 2

I did it. The tweak is actually quite simple.

This is the code it's needed for a dropdown tab. Notice it's slightly different from a normal bootstrap dropdown tab:

<ul class="nav nav-tabs myTabDrop">
  <li id="tabOccrs" class="dropdown">
    <a href="#" class="contentTab dropdown-toggle">Tab (<span class="tabsel">option1</span>) <span class="crtOpenDrop">▾</span></a>
    <ul class="dropdown-menu">
      <li><a href="#dropdown1" data-toggle="tab" class="subtab">Option1</a></li>
      <li><a href="#dropdown2" data-toggle="tab" class="subtab">Option2</a></li>
    </ul>
  </li> 
</ul>   

The jquery script we need is the following:

$('.myTabDrop span.crtOpenDrop').click(function (e) {
    e.preventDefault();

    $(this).closest("a")
        .addClass("dropdown-toggle")
        .attr("data-toggle", "dropdown");
});


$('.myTabDrop a.contentTab').click(function (e) {
    e.preventDefault();

    if(! $(e.target).is("span")) {
        $(this).removeClass("dropdown-toggle")
            .attr("data-toggle", "")
            .tab("show");
    }
});

of course further little tweaks are needed, but this is a semi-complete solution (and graphically complete)

UPDATE

I created a jquery plugin for this need. Enjoy using it

Answer 3

Please see this jQuery plugin for twitter bootstrap like dropdown button. Definitely, there is lot's of room for improvement. Also I'm not so good at CSS. So, I've left that part.

http://codepen.io/ismusidhu/pen/ptHql

HTML

<div id="quickActions" class="btn-group" data-key="split-button">
  <a data-name="quickAction" data-value="customer" data-defaultButton="true">New Customer</a>
  <button type="button" id="xyz" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul data-role="menu" hidden>
    <li><a data-name="quickAction" data-value="customer">Customer</a></li>
    <li><a data-name="quickAction" data-value="supplier">Supplier</a></li>
    <li><a data-name="quickAction" data-value="quote">Quote</a></li>
    <li><a data-name="quickAction" data-value="invoice">Invoice</a></li>
    <li><a data-name="quickAction" data-value="purchase">Purchase</a></li>
    <li><a data-name="quickAction" data-value="reconcile">Bank</a></li>
  </ul>
</div>

CSS

[data-key="split-button"].open > [data-role="menu"] {
  display: block;
}

Plugin

(function( $ ) {
// Plugin definition.
$.fn.splitButton = function(options) {

    // Iterate and reformat each matched element.
    return this.each(function() {

        var splitButton = $(this);
        var handle = $('[data-toggle="dropdown"]', splitButton);
        var buttons = $('ul li a', splitButton);
        var defaultButton = $('[data-defaultButton="true"]', splitButton);
        handle.click(function() {
            $(this).parent().toggleClass('open');
        });
      var clickHandler = function(e) {
            var $this = $(e.currentTarget);
            //alert($this.attr('data-value'));
            if (!$this.attr('data-defaultButton')) {
                defaultButton.attr("data-value", $this.attr('data-value')).html($this.html());
            }
        };
        buttons.click(clickHandler);
     defaultButton.click(clickHandler)

        $(document).click(function(event) {
            if (!$(event.target).closest(handle).length) {
                if ($(handle.parent()).hasClass("open")) {
                    $(handle.parent()).toggleClass('open');
                }
            }
        });
    });
};
})( jQuery );

Usage

$('#quickActions').splitButton();