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/ （最后更新时间 01/12/2017）

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

  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>用 id 为 #futureDropdown的 a 包围标签和选项卡列表

于 2013-06-17T17:53:05.260 回答
0

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

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

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

于 2013-10-17T22:36:25.520 回答