indexing jQuery UI tabs
indexing jQuery UI tabs
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 ??