Question

我正在尝试为网站创建一个基于引导程序的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/ （上次更新时间01/12/2017）

Answer 1

您可以使用此功能将标签导航更改为基于下拉列表的导航列表。

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进行了两处更改以使其正常工作。

添加如下所示的<a>标记。用JQuery或css隐藏它。

<a id="dropdownButton" class="btn btn-large btn-bloc dropdown-toggle" type="button" data-toggle="dropdown" style="display:none;">DropDown</a>
使用ID为#futureDropdown的<{1}}标记标签和标签列表

Answer 2

我们走了：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>");
        }
    }
});

Answer 3

我刚刚发现这个插件可以帮助您更好地解决这个问题： http://www.eyecon.ro/bootstrap-tabdrop/

当标签不适合单行时非常有用的脚本。此脚本采用不适合的选项卡并创建一个新的下拉选项卡。在下拉列表中有所有不适合的选项卡。

仅适用于水平标签和药片下拉选项卡的自定义文本适用于响应式设计

Bootstrap Togglable标签页面边界检测

3 个答案: