jQuery / Tranversing / UI Tabs

[Benjamin]

Goal: a TD to receive a background-color (##F3F2F1), when the TD contains a list item with a specific selector (.ui-state-active).

Process: I wrote a jQuery function that looks for the parent of an item that I can easily target using a selector.

Code:

$(“li.ui-state-active”).parent().addClass(“ui-tabs-selected”);

This is actually working correctly. However, as my title suggested I am also using http://docs.jquery.com/UI/Tabs.

Out of the box, UI Tabs adds a class of ‘ui-state-active’ to the active/current list item, but, unfortunately I need that class applied to the TD that the list item is within. (Hopefully this won’t turn into a "Tables!? WTFzzzzz!?" thread- but I need to in this case- trust me, I would rather not).

Now you can understand why I wrote

Code:

$(“li.ui-state-active”).parent().addClass(“ui-tabs-selected”);

. I needed to find the selected list item and add that class to the parent (or TD, in this case).

Problem: The first time that UI Tabs fires (when the page loads), the correct action is occurring. My TD is getting the class of ‘ui-tabs-selected’, which applies the background-color. However, when I click on the next tab, the new tab doesn’t get the class, the class just stays on the first list item (from when the page was first loaded).

So, this means, that my problem is with UI Tabs recognizing that I clicked on a new tab?

I am using

Code:

$(“#tabs”).tabs();

to execute the jQuery UI Tab function. In talking with a co-worker he mentioned that I need to add a CallBack- which is something that I am not yet familiar with. A http://theschaafs.org/testing/q/y-tab.php is available.

I feel like I did a kinda crummy job of explaining this, so please, if you have a question, I will do my best to quickly answer. The end result would be a gray background that follows around the active list item.

I appreciate your help!

Test Page: http://theschaafs.org/testing/q/y-tab.php

[akeenlabs]

A "callback" is just another name for the function that gets executed (i.e. "called") in the future (i.e. the "back" part) when a certain event is fired. I’ve never used the jQuery UI stuff, but just looking over the tabs documentation shows that is supports a number of events; one event in particular is the "tabsselect" event which seems to get fired when a new tab is selected. You can set the event handler (using jQuery’s "bind" method) when you initialize the tabs.

This was taken from the howto called "immediately select a just added tab" but modified a little to suite your needs:

Code:

$(“#tabs”).tabs({
selected: 1,
select: function(event, ui){
// remove the class from the previously selected tab
$(“td.ui-tabs-selected”).removeClass(“ui-tabs-selected”);

// add the class to the new one; need to get 2 parents because ui.tab will return the anchor tag
$(ui.tab).parent().parent().addClass(“ui-tabs-selected”);

}
});

You should be able to paste this directly into your code (I just modified your tabs initialization). Hope this helps :)

[Benjamin]

Akeenlabs, thank you so very much. This works flawlessly. I am very grateful for your help. Thank you very much!

[Author]

Posts