Вкладки пользовательского интерфейса jQuery - Показать все вкладки - PullRequest
Новая
       4

Вкладки пользовательского интерфейса jQuery - Показать все вкладки

4 голосов
/ 03 июня 2011

Привет всем. Я видел другой пост об использовании конкретной вкладки пользовательского интерфейса 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()
        }
    }
});

Используемые мной вкладки правильно инициализированы, но «показать все вкладки» вообще не работает

Есть идеи?

Ответы [ 4 ]

5 голосов
/ 03 июня 2011

Во-первых, исправьте 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)

Пример: http://jsfiddle.net/niklasvh/km7Le/

4 голосов
/ 28 мая 2013

Это работает (для меня) в jQuery-ui-1.10.0. Обратите внимание, что я использую div, а не наборы полей, как в вопросе. 

//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);
        }
    }
});
0 голосов
/ 17 мая 2018

В JQuery UI Tabs 1.12.1 это отлично работает: 

var user_tabs = $("#tabs").tabs(
    {activate: 
        function(event, ui) {
            if ( ui.newTab.find('a').attr('href') === '#tabs-4') {
                $("div[id^='tabs-']").show();
            }
        }
    }
)
0 голосов
/ 20 октября 2017

В версии jQuery UI 1.12 событие изменено на 'beforeActivate' и 'ui' и возвращает аргументы newTab

Так новая функция будет выглядеть так: 

var user_tabs = $("#tabs").tabs({
    beforeActivate: function(event, ui) {

        if (ui.newTab.find('a').attr('href') === '#tabs-4') {

            $("fieldset[id^='tabs-']").removeClass('ui-tabs-hide');
            $("fieldset[id='tabs-4']").addClass('ui-tabs-hide');
        } 
    }
});
...