Javascript 引导可切换选项卡页面边界检测

我正在尝试为一个在页面上有多个选项卡的站点创建一个基于引导的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++;
 });

li>







i=1；
$（“#btnAddTab”）。在（“单击”，函数（）{
$（“#tabsList”）。追加（“
”）；
i++；
});

现在我观察到的是，当页面的宽度被选项卡填充时，我看到选项卡被创建在新行中。这就是我试图避免的

我环顾四周，发现我可以在选项卡中使用多级菜单，所以我想，如果我可以创建x个选项卡，在页面末尾，将其更改为下拉菜单，并继续将选项卡添加到下拉菜单中，该怎么办

我在这里创建了一个示例：

当我添加选项卡时，我实际上不知道如何计算页面何时结束。那么，有谁能帮我找出如何检测标签被推到边缘的逻辑吗

一旦我弄明白了，我就可以创建一个内部列表，并继续将我的项目添加到该列表中

更新： 我已通过手动计算容器的宽度，限制在主选项卡中生成更多选项卡，并将新生成的选项卡移动到“更多”选项卡来解决此问题：

---

这是最终的解决方案：（最新更新日期为2017年1月12日）

您可以使用此功能将选项卡导航更改为基于单击的下拉列表导航

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做了这两个更改以使其正常工作

添加如下所示的

标记。用JQuery或css隐藏它

下拉列表

标签和标签列表周围有一个id为#futureDropdown的

我们开始：

i=1；
$（“#btnAddTab”）。在（“单击”，函数（）{
如果（i5）{
//表6至。。。
$（“#dd”）。追加（“
”）；
i++；
返回；
}
});

---

var totalWidth=0；
var divWidth=$（“#tabsList”）.width（）；
$（“#btnAddTab”）。在（“单击”，函数（）{
$（“#tabsList li”）。每个（函数（）{
totalWidth+=$（此）.width（）；
});
//警报（总宽度）；
//警报（divWidth）；
if（总宽度<分宽）{
$（“#tabsList”）。追加（“
”）；
}
如果（totalWidth>divWidth）{
if（$（“#选项卡列表li.dropdown”）.length==0）{
$（“#tabsList”）.append（
）；
}否则{
$（“#dropdownList”）。追加（“
”）；
}
}
});

我刚刚发现了这个插件，它可以帮助您更好地解决这个问题：

当您的选项卡不在一行中时，非常有用的脚本。此脚本接受“不适合”选项卡并创建一个新的下拉选项卡。下拉列表中有所有不适合的选项卡

仅适用于水平标签和药丸 下拉选项卡的自定义文本

---

与响应性设计配合使用

Hi 3Boll，这正是我想要做的。但我注意到，在您的代码中，您只需添加4个选项卡，并通过计数器将其余选项卡转换为下拉列表。我希望该功能能够自动完成，而不需要任何计数器，具体取决于选项卡所在的div的宽度。谢谢你的回答，但这不是我想要的！嗨，Nekreerv，这是一个非常酷的插件。我早在六月份就已经解决了这个问题！。我的解决方案也适用于标签和药片^_^

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