Ok, so I have the the tabs all working correctly, but now I want to allow the user to navigate through the tabs by pressing Ctrl+right arrow. Does anyone have any ideas? BTW the tabs are ajax content if that makes a difference.
On Oct 24, 1:58 am, fasterthanlight <[EMAIL PROTECTED]> wrote: > Freaking awesome, thanks for the help. > Heh, I just started trying to learn jQuery this week, theres a lot of > ground to cover :D > > On Oct 23, 5:33 am, peschler <[EMAIL PROTECTED]> wrote: > > > Directly taken from the docs athttp://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 thetabsin a > > > linear fashion, they aretabsafter 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"> <!-- ANIMATETABSWITHIN 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="tabsfloat_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 -~----------~----~----~----~------~----~------~--~---
