0

ページに複数のタブがあるサイト用のブートストラップ ベースの UI を作成しようとしています。

その場で新しいタブを作成するボタンがあります。

<ul id="tabsList" class="nav nav-tabs">
    <li class="active"><a href="#">Home</a>li>
    <li><a href="#">About</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
   <li><a href="#">Contact</a></li>
</ul>
<br />
<input type="button" class="btn btn-large btn-info" id="btnAddTab" value="click to add tab"></input>

i = 1;
$("#btnAddTab").on("click", function () {
    $("#tabsList").append("<li><a href='#'>Tab " + i + "</a></li>");
    i++;
 });

今私が観察したことは、ページの幅がタブでいっぱいになると、タブが新しい​​行に作成されていることがわかります。これは私が避けようとしているものです。

私は周りを見回して、タブでマルチレベルメニューを使用できることを見てきました.x個のタブを作成し、ページの最後でそれをドロップダウンに変更し、タブをドロップダウンメニュー。

ここに例を作成しました: http://jsfiddle.net/fatgamer85/5pFv3/

タブを追加しているときにページがいつ終了するかを実際に把握する方法がわかりません。それで、タブが端に押されていることを検出する方法を見つけるロジックを誰かが手伝ってくれますか?

それがわかったら、内部リストを作成して、そのリストに項目を追加し続けることができます。

更新: コンテナーの幅を手動でカウントし、メイン タブでより多くのタブの生成を制限し、新しく生成されたタブを [その他] タブに移動することで、これを修正しました: 最終的な解決策は次のとおりです: https://jsfiddle.net/ LE6Ty/6/ (最終更新 2017/01/12)

4

3 に答える 3

0

どうぞ: http://jsfiddle.net/3boll/5pFv3/6/

i = 1;
$("#btnAddTab").on("click", function () {
    if(i<5){
        // first 4 tabs
        $("#tabsList").append("<li><a href='#'>Tab " + i + "</a></li>");
        i++;
        return;
    }
    if(i===5){
        // The dropdown tab ( id='dd')
        $("#tabsList").append("<li class='dropdown'><a class='dropdown-toggle' data-toggle='dropdown' href='#'>More <b class='caret'></b></a><ul class='dropdown-menu' id='dd'></ul></li>"); 
        $("#dd").append("<li><a href='#'>Tab " + i + "</a></li>");
        i++;
        return;
    }
    if(i>5){
        // Tabs 6 to ...
        $("#dd").append("<li><a href='#'>Tab " + i + "</a></li>");
        i++;
        return;
    }
});

var totalWidth = 0;
var divWidth = $("#tabsList").width();

$("#btnAddTab").on("click", function () {
    $("#tabsList li").each(function () {
        totalWidth += $(this).width();

    });
    //alert(totalWidth);
    //alert(divWidth);

    if (totalWidth < divWidth) {
        $("#tabsList").append("<li><a href='#'>Tab</a></li>");
    }

    if (totalWidth > divWidth) {
        if ($("#tabsList li.dropdown").length === 0) {
            $("#tabsList").append("<li class='dropdown'><a class='dropdown-toggle' data-toggle='dropdown' href='#'>More <b class='caret'></b></a><ul class='dropdown-menu' id='dropdownList'><li><a href='#'>New Tab</a></li></ul></li>");
        } else {
            $("#dropdownList").append("<li><a href='#'>New Tab</a></li>");
        }
    }
});
于 2013-06-17T19:10:49.240 に答える
0

この関数を使用して、クリック時にタブ ナビゲーションをドロップダウン リスト ベースのナビゲーションに変更できます。

function changeToDropdown(){
    $("#tabsList").removeClass("nav");  //Remove tab classes on the list.
    $("#tabsList").removeClass("nav-tabs"); // ^
    $("#tabsList").addClass("dropdown-menu"); //Add dropdown-menu classes to the list.
    $("#tabsList").attr("role","menu"); //Add menu role to the list.  
    $("#futureDropdown").addClass("dropdown");  //Adds dropdown class to the surrounding div.
    $("#dropdownButton").show();  // Show the "dropdown" button.
}

動作させるために、html にこれら 2 つの変更を加えました。

  1. <a>以下のようなタグを追加します。JQuery または css で非表示にします。

    <a id="dropdownButton" class="btn btn-large btn-bloc dropdown-toggle" type="button" data-toggle="dropdown" style="display:none;">DropDown</a>

  2. タグとタブのリストを<div>#futureDropdown の ID を持つa で囲みます

于 2013-06-17T17:53:05.260 に答える