twitter-bootstrap - 具有拆分按钮下拉行为的下拉选项卡

Question

我想使用一个下拉选项卡，但稍作调整：当我按下插入符号时，我想显示一个下拉菜单（不选择选项卡），而如果我按下选项卡语音或下拉菜单项之一，该选项卡将被选中。

考虑一下：

如果我按下“Dropdown”的向下插入符号，我想显示这样的下拉菜单：

如果我选择@fat 或@mdo，则该选项卡将被选中，否则应将其设置回上面的原始版本。这是选项卡中普通下拉项的实际行为，但标题打开的是下拉菜单而不是打开选项卡，这就是我不想要的。换句话说，我可以打开的标签是三个而不是两个。那么：如何区分这两个组件呢？

Answer 1

这是一个不需要对 JS 进行任何调整的解决方案：

只需使用带有下拉菜单的选项卡导航的正常标记

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

如果我们将下拉菜单的链接放在标记中的选项卡按钮上方，然后将其浮动到右侧，它将保留在为选项卡按钮保留的空间中，但隐藏在其未浮动的兄弟之后。我们只需要调整它的 z-index 以使其可见和可点击。

不需要额外的JS。我在导航中添加了一个类，.split-button-nav以便在 CSS 中定位元素。您可以看到该类.nav-justified也已添加，并且可以正常工作。

在这里工作 jsFiddle。

Answer 2

我做到了。调整实际上非常简单。

这是下拉选项卡所需的代码。请注意，它与普通的引导下拉选项卡略有不同：

<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">▾&lt;/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>   

我们需要的jquery脚本如下：

$('.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");
    }
});

当然需要进一步的小调整，但这是一个半完整的解决方案（并且图形完整）

更新

我为此需要创建了一个jquery 插件。享受使用它

Answer 3

请参阅此 jQuery 插件以获取 twitter bootstrap 之类的下拉按钮。当然，还有很大的改进空间。我也不擅长CSS。所以，我离开了那部分。

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

插入

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

用法

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