управлять вкладкой в ​​фокусе во вложенной вкладке jQuery-UI - PullRequest
Новая
       10

управлять вкладкой в ​​фокусе во вложенной вкладке jQuery-UI

1 голос
/ 03 июня 2011

У меня есть вложенная вкладка jQuery-UI.например

Tab-Day1
- Tab-Lunch
- Tab-Dinner
Tab-Day2
- Tab-Lunch
- Tab-Dinner
Tab-Day3 ...

Есть ли способ синхронизировать вложенную вкладку, когда я меняю верхнюю вкладку?

Скажем, по умолчанию вкладка "Day1" - "Обед"
Шаг 1) нажмите «Ужин» на «День1» -> «День1» - в центре внимания будет «Ужин»
Шаг 2) Нажмите на «День2» -> «День2» - «Ужин» будетв фокусе вместо по умолчанию "Day2" - "Обед"?Чтобы при изменении верхней вкладки всегда была в фокусе одна и та же связанная вложенная вкладка?

Большое спасибо.

1 Ответ

1 голос
/ 03 июня 2011

Вы можете сделать что-то вроде этого:

  1. Используйте атрибуты data-*, чтобы связать вкладки с одной и той же "категорией".

  2. Нажмите на событие selectна виджете вкладок: 

    var selectingSiblings = false;

$(".tabs").tabs({
    select: function(event, ui) {
        if (!selectingSiblings) {
            var category = $(ui.tab).data("category"),
                hash;

            selectingSiblings = true;            

            if (category) {
                $("a[data-category='" + category + "']").each(function() {
                    var $tabs = $(this).closest(".tabs");

                    $tabs.tabs("select", $(this).attr("href"));
                });
            }
            selectingSiblings = false;
        }
    }
});

    Логическое значение selectingSiblings предназначено для того, чтобы при вызове select вручную на вкладках он все еще запускал обработчик событий.Чтобы предотвратить бесконечную рекурсию, нам нужно назначить вызов select, который мы делаем, по сравнению с тем, который сделал пользователь.

Лучше всего видно на рабочем примере: http://jsfiddle.net/andrewwhitaker/q8fh7/4/

...