Bootstrap Togglable Закладка на границе страницы

Question

Я пытаюсь создать пользовательский интерфейс на основе начальной загрузки для сайта, на котором будет отображаться несколько вкладок на странице.

У меня была бы кнопка, которая создавала бы новую вкладку на лету.

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

Теперь то, что я заметил, что, когда ширина страницы заполнена вкладками, я вижу, что вкладки создаются в новой строке. Это то, чего я пытаюсь избежать.

Я огляделся и увидел, что могу использовать многоуровневые меню в вкладках. Поэтому я подумал, что, если я смогу создать х количество вкладок, а в конце страницы измените его на раскрывающийся список и продолжите добавление вкладок в раскрывающееся меню.

Я создал пример здесь: 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, чтобы заставить его работать.

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. Surround метки и вкладки список с более <div> с идентификатором #futureDropdown

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/

Очень полезный скрипт, когда ваши вкладки не помещаются в одной строке. Этот скрипт принимает не соответствующие вкладки и создает новую раскрывающуюся вкладку. В раскрывающемся списке находятся все вкладки, которые не подходят.

Работает только с горизонтальными закладками и таблетками пользовательского текстом для раскрывающихся вкладок работ с адаптивным дизайном