Directly taken from the docs at http://docs.jquery.com/UI/Tabs:
$('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
ui.options // options used to intialize this widget
ui.tab // anchor element of the selected (clicked) tab
ui.panel // element, that contains the contents of the selected
(clicked) tab
ui.index // zero-based index of the selected (clicked) tab
});
That is, you get the index of the selected tab in the "ui" object of
your event handler:
---
jiTabs.bind('tabsselect', function(e, ui) {
var selected = ui.index;
var total = jiTabs.tabs( "length" );
....
---
Hope that helps,
peschler
On 22 Okt., 19:52, fasterthanlight <[EMAIL PROTECTED]>
wrote:
> Aight,
>
> so I'm implementing some awesome jQuery tab action,
>
> I'm trying to pull an index, in that tab the first would be 0, 2nd
> would be 1, and so on and so forth.
> I need to be able to determine which tab is currently selected out of
> the total number so that I can do some next stuff based on that.
>
> The problem is, the built in jQuery way of doing that is this:
>
> var $tabs = $('#example').tabs();
> var selected = $tabs.data('selected.tabs');
>
> and when you output that, it SHOULD return the index number of
> whatever is selected, but its not.
>
> If I click the 3rd tab, it assigns it as 0, i click the 4th, it
> assigns as 1,
> its basing this off of what you click first, which is absolutely
> WRONG, as I can't rely on the user clicking through the tabs in a
> linear fashion, they are tabs after all.
>
> Here's the JS I've got:
>
> Code:
>
> $(document).ready(function(){
> var jiTabs = $("#job_interests_tabs > ul.tabs");
> var jiViewport = $("#ji_viewport");
>
> // Initialize
> jiTabs.tabs( defaults = { selectedClass: 'active' });
> jiTabs.bind('tabsselect', function(e, ui) {
> var selected = jiTabs.data('selected.tabs'); // This jerk arbitralily
> assigns an index depending on where you click first, not whats first
> in the code.
> var total = jiTabs.tabs( "length" );
> // Trace $("#someDiv").html(selected + " " + total);
>
> // Animate
> jiViewport.hide("slide", { direction: "left" }, 300);
> jiViewport.show("slide", { direction: "right" }, 300);
>
> });
> });
>
> and my basic HTML structure:
>
> <div id="job_interests_tabs">
> <div class="viewport"> <!-- WRAPPER FOR STYLE PURPOSES -->
> <div id="ji_viewport"> <!-- ANIMATE TABS WITHIN THIS -->
> <div id="zero"> Tab 0 </div>
> <div id="one"> Tab 1 </div>
> <div id="two"> Tab 2 </div>
> <div id="three"> Tab 3 </div>
> </div>
> </div> <!-- TABS -->
> <ul class="tabs float_left">
> <li> <a href="#zero">Tab 0</a> </li>
> <li> <a href="#one">Tab 1</a> </li>
> <li> <a href="#two">Tab 2</a> </li>
> <li> <a href="#three">Tab 3</a> </li>
> </ul>
> </div>
>
> Any ideas ??
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
