JQuery UI Tabs – Показать все вкладки
Всем привет. Я увидел еще одно сообщение об использовании специальной вкладки пользовательского интерфейса jQuery, чтобы сразу открыть все содержимое вкладки. Это более или менее вкладка «показать все». Кажется, это не работает для меня. В любом случае, моя структура страницы выглядит так:
<div id="tabs"> <ul class="tabs-1"> <li><a href="#tabs-1"> Some Tab </li> <li><a href="#tabs-2"> Some Tab </li> <li><a href="#tabs-3"> Some Tab </li> <li><a href="#"> Show All </li> </ul> <fieldset id="tabs-1"> Content </fieldset> <fieldset id="tabs-2"> Content </fieldset> <fieldset id="tabs-3"> Content </fieldset> </div> Это JavaScript, который я использовал, на основе предыдущего примера:
var user_tabs = $("#tabs").tabs({ select: function(event, ui) { if (ui.index == 3) { $("fieldset[id^=tabs-]").show(); } else { $("fieldset[id^=tabs-]").hide(); $(ui.panel).show() } } });
Ярлыки, которые я использую, инициализированы правильно, но «показать все вкладки» не работает вообще
Есть идеи?
Во-первых, исправьте html-код в своих вкладках. Вам не хватает </a> для всех ссылок.
Затем измените свою последнюю вкладку на:
<li><a href="#tabs-4"> Show All </a></li>
Добавьте другую панель (может быть пустым):
<fieldset id="tabs-4"></fieldset>
И измените свой javascript на это:
var user_tabs = $("#tabs").tabs({ show: function(event, ui) { if (ui.index == 3) { $("fieldset[id^='tabs-']").removeClass('ui-tabs-hide'); $("fieldset[id='tabs-4']").addClass('ui-tabs-hide'); } } });
( Обратите внимание на изменение из select для show )
Это работает (для меня) в jQuery-ui-1.10.0. Обратите внимание, что я использую divs, а не поля, как это сделано в вопросе.
//Do the tabs $('#tabs').tabs({ activate: function (event, ui) { if (ui.newPanel.selector == "#tabs-4") { $("div[id^='tabs-']").attr('style', "display:block;"); $("div[id^='tabs-']").attr('aria-expanded', true); $("div[id^='tabs-']").attr('aria-hidden', false); } else { $("div[id^='tabs-']").attr('style', "display:none;"); $("div[id^='tabs-']").attr('aria-expanded', false); $("div[id^='tabs-']").attr('aria-hidden', true); $(ui.newPanel.selector).attr('style', "display:block;"); $(ui.newPanel.selector).attr('aria-expanded', true); $(ui.newPanel.selector).attr('aria-hidden', false); } } });