我使用jqueryUI构建了一些旋转选项卡。当用户将鼠标移到选项卡式菜单和选项卡式内容上时,选项卡应停止旋转。我读了useful tutorial,但它对我不起作用。
虽然我将光标移到它们上方但仍然保持旋转。一旦我徘徊div#menu-prime
,标签表现得很傻!
<script type="text/javascript">
$(document).ready(function(){
$("#menu-prime").tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 3000);
$('#menu-prime').hover(function(){
$(this).tabs('rotate', 0, false);
},function(){
$(this).tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 3000);
}
);
});
</script>
<div id="menu-prime">
<ul class="ui-tabs-nav">
<li id="nav-fragment-1" class="ui-tabs-nav-item ui-tabs-selected"><a href="#fragment-1">Kochen</a></li>
<li id="nav-fragment-2" class="ui-tabs-nav-item"><a href="#fragment-2">Wohnen</a></li>
<li id="nav-fragment-3" class="ui-tabs-nav-item"><a href="#fragment-3">Schlafen</a></li>
<li id="nav-fragment-4" class="ui-tabs-nav-item"><a href="#fragment-4">Mehr</a></li>
</ul>
<div id="fragment-1" class="ui-tabs-panel" style="">Content 1</div>
<div id="fragment-2" class="ui-tabs-panel" style="">Content 2</div>
<div id="fragment-3" class="ui-tabs-panel" style="">Content 3</div>
<div id="fragment-4" class="ui-tabs-panel" style="">Content 4</div>
</div>
谢谢, 约翰内斯
感谢Kim,当用户将其中一个标签悬停时,旋转标签现在会等待。
$("#menu-prime").tabs({ fx: {opacity: 'toggle', duration:100} }).tabs('rotate', 3000, true);
$('#menu-prime').mouseover(function(){
$(this).tabs('rotate', 0, false);
});
$('#menu-prime').mouseout(function(){
$(this).tabs({ fx: {opacity: 'toggle', duration:100} }).tabs('rotate', 3000);
});
最初希望标签在鼠标悬停时更改,而不是点击。因此我修改了Kim的代码:
$("#menu-prime").tabs({ fx: {opacity: 'toggle', duration:100} }).tabs({event: 'mouseover'}).tabs('rotate', 3000, true);
$('#menu-prime').mouseover(function(){
$(this).tabs('rotate', 0, false);
});
$('#menu-prime').mouseout(function(){
$(this).tabs({ fx: {opacity: 'toggle', duration:100} }).tabs({event: 'mouseover'}).tabs('rotate', 3000);
});
现在,一旦用户悬停任何标签,标签,尤其是自动旋转表现得非常奇怪。我猜这两个鼠标悬停事件相互复杂了吗?
答案 0 :(得分:3)
请改为尝试:
$('#menu-prime').mouseover(function(){
$(this).tabs('rotate', 0, false);
});
$('#menu-prime').mouseout(function(){
$(this).tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 3000);
});
修改强> 你在同一个事件上做不同的事情。因此,您应该将代码改为:
$('#menu-prime').mouseover(function(){
$(this).tabs('rotate', 0, false);
});
$('#menu-prime').mouseout(function(){
$(this).tabs({ fx: {opacity: 'toggle', duration:100} }).tabs({event: 'mouseover'}).tabs('rotate', 3000);
});
并删除
$("#menu-prime").tabs({ fx: {opacity: 'toggle', duration:100} }).tabs({event: 'mouseover'}).tabs('rotate', 3000, true);
答案 1 :(得分:0)
jQuery UI自1.9以来有很多变化,现在旋转标签并暂停悬停,你只能使用扩展。悬停 - 只需使用我的扩展程序jQuery UI Tabs: Pause on Hover
答案 2 :(得分:-1)
$('#imageCarousel').tabs({ fx: {opacity: 'toggle', duration:100} }).tabs('rotate', 3000);
$("#imageCarousel ul li a").mouseover(function(){
$("#imageCarousel").tabs('rotate', 0, false);
$("#imageCarousel").tabs("option", "active", $(this).parent().index());
});
$('#imageCarousel').mouseout(function(){
$(this).tabs('rotate', 3000, true);
});