Thanks, Klaus... I suspected that I might need to do some coding for the "mouseout" function or "mouseleave" as the new binding feature in jQuery 1.2 is calling it, I believe.
Thanks for the code, too. I'll a look and see what I can do. Rick > -----Original Message----- > From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Klaus > Hartl > Sent: Monday, January 21, 2008 8:37 AM > To: jQuery (English) > Subject: [jQuery] Re: Author of UI-Tabs Plug-in? > > > On 21 Jan., 00:36, "Rick Faircloth" <[EMAIL PROTECTED]> wrote: > > Hi, Klaus...and thanks for the response. > > > > What I want to do is create a tabs setup that > > will operate as follows and the UI/Tabs settings > > that will cause this functionality: > > > > - Initially, the tab details don't show at all > > - When a tab is moused over, the details for that tab slide in > > - When the tab or the details div for tab is on display, and the > > mouse is moved off the tab and is not on details div, the details > > div slides up > > - When a tab is moused over, the details div for that tab is displayed > > and if the user moves the mouse over the menu items horizontally, the > > details div remains on display, but the content change appropriately. > > > > I want a "mouse event" controlled version (mouseover and mouseout) that > > works like the demo for the click-controlled version. > > > > Does that make any sense? > > > > Rick > > To hide tabs in the beginning set the unselected option to true, for > sliding set fxSlide option to true, for mouseover changing tabs set > event to "mouseover". For the mouseout thingy you need to code your > own solution, so far there isn't anything out-of-the-box (code > untested but it should point you in the right direction): > > var $tabs = $('#foo').tabs({ > unselected: true, > event: 'mouseover' > fxSlide: true > }); > > var $panels = $('div.ui-tabs-panel'); > var timer; > > $('li', $tabs).bind('mouseleave', function(e) { > timer = setTimeout(function() { > $panels.addClass('ui-tabs-hide'); > }, 200); > }); > > $panels.bind('mouseenter', function() { > clearTimeout(timer); > }); > > FInd out more about all the available options in the documentation: > http://docs.jquery.com/UI/Tabs/tabs#initialoptions > > Note that I'm using the brand new "mouseleave" and "mouseenter" events > for some convenience, thus you need jQuery 1.2.2 for this. > > > --Klaus
