I suppose you'd like to have tabs to work as dropdown menu. In this
case I can suggest two ways:
1. Using tabs plugin... You're right, it needs to attach mouseout
event on div panel like this
$('#tabs-1, #tabs-2, #tabs-3').mouseout(function () {
$("#tabs").tabs('option', 'selected', -1);
});
but there is flicker effect when you move cursor from div to tabs.
2. you can make it without JavaScript at all. You can find examples on
Stu Nicholls' site: http://www.cssplay.co.uk/menu/
On 26 мар, 22:08, jq noob <sammil...@alliancecom.net> wrote:
> If I implement your code, then I can never actually move my mouse down
> into the content div. When I mouseover the tab, the div is shown, but
> when I move the mouse cursor off the tab and try to move it into the
> div, the div disappears because the mouseout event gets fired.
>
> Since there are really two mouseout events fired, one when you move
> the cursor from the tab down into the div and another when you move
> the cursor out of the div
>
> Now you have to remember that this only happens if you have option
> collapsible: true. When I remove this from the options, then the code
> that was suggested does nothing visually speaking. I suspect that the
> variable holding the selection is set -1 but that doesn't hide the
> currently open div.
>
> When I use collapsible: true in conjunction with event: 'mouseover'
> the div panel will disappear if I move my mouse back up on the
> selected tab first otherwise it never dissapears until another tab is
> selected. I suspect that some sort of mouseout event would need to be
> attached to the currently showing div or all the divs. I am new to
> this so any help would be appreciated.
>
> On Mar 25, 11:13 pm, acamar <websi...@bcs.ru> wrote:
>
>
>
> > In context of mouseout event handler the $tabs variable is not
> > visible. So try
>
> > $('#tabs').mouseout(function () {
> > $("#tabs").tabs('option', 'selected', -1);
>
> > });
>
> > that should help.
>
> > On 25 мар, 13:44, jq noob <sammil...@alliancecom.net> wrote:
>
> > > I am currently using
>
> > > $(document).ready(function()
> > > {
> > > var $tabs = $("#tabs").tabs({
> > > selected: -1,
> > > event: 'mouseover',
> > > collapsible: true
>
> > > });
>
> > > I have tried including a .mouseout(function(){
> > > //$tabs.tabs('option', 'selected', -1);
> > > $tabs.tabs('select',-1);
> > > }); // Used various combos of these
>
> > > I can see that a mouseout event is fired, when you leave the tab and
> > > move your mouse into the now showing div and another mouseout event is
> > > fired when you leave that div.
>
> > > What is the correct way to hide that div on mouseout and basically set
> > > the tab group back to nothing selected once your focus is no longer on
> > > that tab group?
>
> > > I found some posts from February 08 and September 08 but none of those
> > > solutions worked.
>
> > > I was thinking that I could bind something to the "wrapper" but not
> > > sure how or if that would even be the correct way.
>
> > > <div class="wrapper">
>
> > > <div id="tabs">
> > > <ul>
> > > <li><a href="#tabs-1">Filter 1</a></li>
> > > <li><a href="#tabs-2">Filter 2</a></li>
> > > <li><a href="#tabs-3">Filter 3</a></li>
> > > </ul>
> > > <div id="tabs-1">html</div>
> > > <div id="tabs-2">html</div>
> > > <div id="tabs-3">html</div>
> > > </div>
> > > </div>- Hide quoted text -
>
> > - Show quoted text -- Скрыть цитируемый текст -
>
> - Показать цитируемый текст -
