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
