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
-~----------~----~----~----~------~----~------~--~---
