Раскрывающаяся вкладка с поведением выпадающих кнопок с разделенными кнопками

Я хотел бы использовать раскрывающуюся вкладку, но немного подправил: я хотел бы показать раскрывающееся меню (без выбора вкладки) при нажатии каретки, тогда как если я нажимаю голос вкладки или один из элементов раскрывающегося меню, вкладка будет выбрана.

Учти это:

если я нажимаю курсор вниз "Dropdown", я бы хотел показать выпадающее меню следующим образом:

и в случае, если я выберу @fat или @mdo, будет выбрана вкладка, в противном случае она должна быть возвращена к ее первоначальной версии выше. Это реальное поведение обычного выпадающего элемента на вкладке, но заголовок открывает раскрывающееся меню вместо открытия вкладки, а это то, что мне не нужно. Другими словами, вкладки, которые я мог открыть, были бы тремя вместо двух. Итак: как различить два компонента?

Источник

3 ответа

Решение

Я это сделал. Настройка на самом деле довольно проста.

Это код, необходимый для раскрывающейся вкладки. Обратите внимание, что он немного отличается от обычной выпадающей вкладки начальной загрузки:

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

Нужный нам скрипт 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 для этой необходимости. Наслаждайтесь этим

Источник

Вот решение, которое не требует настройки с помощью 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-индекс, чтобы сделать его видимым и интерактивным.

Нет необходимости в дополнительном JS. Я добавил класс .split-button-nav на навигацию, чтобы нацелиться на элемент в CSS. Вы можете видеть, что класс .nav-justified Также был добавлен и работает без проблем.

Рабочая jsFiddle здесь.

Источник

Пожалуйста, смотрите этот плагин jQuery для начальной загрузки Twitter, как кнопку выпадающего меню. Определенно, есть много возможностей для улучшения. Также я не очень хорош в 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;
}

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

использование

$('#quickActions').splitButton();
Источник
Другие вопросы по тегам