CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-tabs
Snackmoore
Snackmoore

Reputation: 935

control the tab in focus in a nested jQuery-UI Tab

I have a nested jQuery-UI Tab. for example

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

Is there a way to synchronize the sub-tab when I change the upper tab?

Say the default tab is "Day1"-"Lunch",
Step 1) click on "Dinner" on "Day1" -> "Day1"-"Dinner" will be in focus
Step 2) click on "Day2" -> "Day2"-"Dinner" will be in focus instead of the default "Day2"-"Lunch"? Such that when change the upper tab, the same related sub tab will always be in focus?

Thanks a lot.

Upvotes: 1

Views: 509

Answers (1)

Andrew Whitaker
Andrew Whitaker

Reputation: 126052

You could do something like this:

  1. Use data-* attributes to associate tabs with the same "category."

  2. Tap into the select event on the tabs widget:

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

    The purpose of the boolean selectingSiblings is that when you call select manually on tabs, it still fires the event handler. To prevent infinite recursion we need to designate a call to select that we make vs. one that the user made.

Best seen with a working example: http://jsfiddle.net/andrewwhitaker/q8fh7/4/

Upvotes: 1

Related Questions