Я работаю над устаревшим проектом, который использует jQuery 1.10.2 и jQuery UI 1.10.4 для отображения пользовательских данных в диалоговом окне с 2 уровнями вкладок. Поскольку количество вкладок, которое может создать пользователь, не ограничено (а собственное решение jQuery выглядит ужасно), я искал решение для вкладок с переполнением. Кроме того: на вкладках в моем проекте есть значки состояния, поэтому важно, чтобы пользователь мог видеть сразу все ярлыки вкладок на одном уровне.
Вот JSFiddle с упрощенной версиейданные и структура страницы: https://jsfiddle.net/megahra/uexr4qfw/266/
Включает измененную версию плагина Пола Бланделла OverflowTabs , который был обновлен с помощью Twisty .
К сожалению, когда вы открываете любую из других вкладок, это выглядит так:
Мое предпочтительное решение - найти способ применить этот плагин ко всем строкам вкладок, независимо от того, где они находятся в иерархии страниц. Я подозреваю, что проблема в том, что вкладки пользовательского интерфейса jQuery применяют свойство css «display: none» ко всем элементам содержимого, которые соответствуют вкладкам, которые в данный момент не отображаются. И это может как-то помешать плагину обрабатывать эти div-ы (например, функция .outerWidth возвращает 0 при вызове элемента с display: none).
Структура HTML, создаваемая вкладками пользовательского интерфейса jQuery и плагином, выглядит следующим образом:
<ul class="ui-tabs-nav"> //Tabs as li elements </ul>
<ul class="ui-tabs-overflow"> //Tabs in dropdown </ul>
<div class="overflow-selector"/>
<div class="ui-widget-content" id="tabs-1" style="display: block;"> //Tab content - could contain tabs </div>
<div class="ui-widget-content" id="tabs-2" style="display: none;"> //Tab content </div>
<div class="ui-widget-content" id="tabs-3" style="display: none;"> //Tab content </div>
<div class="ui-widget-content" id="tabs-4" style="display: none;"> //Tab content </div>
В качестве альтернативы, решение, при котором плагин применяет свою магию к вновь открытому контенту при нажатии на вкладкубыло бы приемлемым решением также (но пока я не получил это работать).
Любая помощь будет оценена! :)