0

ドロップダウン タブを使用したいのですが、少し調整しました: キャレットを押すと (タブを選択せず​​に) ドロップダウン メニューを表示したいのですが、タブの音声またはドロップ メニュー項目の 1 つを押すと、タブが選択されます。

このことを考慮： ここに画像の説明を入力

「ドロップダウン」の下向きキャレットを押すと、ドロップダウン メニューを次のように表示したいと思います。 ここに画像の説明を入力

@fat または @mdo を選択すると、タブが選択されます。それ以外の場合は、上記の元のバージョンに戻す必要があります。これは、タブ内の通常のドロップダウン項目の実際の動作ですが、タイトルはタブを開く代わりにドロップダウン メニューを開きます。これは私が望んでいないことです。つまり、開くことができるタブは 2 つではなく 3 つになります。では、2 つのコンポーネントを区別するにはどうすればよいでしょうか。

4

3 に答える 3

0

ドロップダウン ボタンのような Twitter ブートストラップ用のこの jQuery プラグインを参照してください。確かに、改善の余地はたくさんあります。また、私は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();
于 2014-06-13T12:02:54.927 に答える
0

やったよ。微調整は実際には非常に簡単です。

これは、ドロップダウン タブに必要なコードです。通常のブートストラップ ドロップダウン タブとは少し異なることに注意してください。

<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 プラグインを作成しました。使って楽しむ

于 2013-10-11T15:18:00.297 に答える