我使用jQuery UI选项卡已经有一段时间了,出现了一个有趣的请求。当前选项卡设置正在使用旋转功能。我需要找到一种方法来确定显示该选项卡是因为旋转本身的结果,还是因为用户实际单击了该选项卡。
我已经连接了所有的标准事件,show和select,不管标签变化的来源是什么,它们都会触发。
有谁有什么想法吗?基本上,如果用户单击了选项卡,我想做一些额外的事情,但如果选项卡通过旋转自动更改,则不会。
如果我将点击连接到选项卡本身,它似乎根本不会触发,我猜是因为选项卡小部件正在使用该事件本身。
编辑:这是基本代码
<script type="text/javascript">
$(document).ready(function(){
$("#featured").tabs(
{show: function(e, ui) { console.log(e);} }
).tabs("rotate", 5000, false);
});
</script>
控制台将显示事件(e),无论它是被用户点击还是显示为旋转的一部分。同样,如果我将事件从show:更改为select:,也是如此:
发布于 2010-04-28 15:14:51
发布于 2010-04-28 15:15:01
如果您开发自己的旋转逻辑,而不是使用内置的rotate
方法,那么您可以设置一个标志,以便稍后检查。像这样的东西应该是有效的:
var isRotating = false,
rotationInterval = 5 * 1000, // 5 seconds
rotationTimerId;
function rotate() {
var tabsElement = $('#my-tabs'),
currentIndex = tabsElement.tabs('options', 'selected'),
maxIndex = tabsElement.tabs('length') - 1,
nextIndex = currentIndex === maxIndex ? 0 : (currentIndex + 1);
isRotating = true;
tabsElement.tabs('select', nextIndex);
isRotating = false;
}
function startRotation() {
if (!rotationTimerId) {
rotationTimerId = window.setInterval(rotate, rotationInterval);
}
}
function stopRotation() {
if (rotationTimerId) {
window.clearInterval(rotationTimerId);
rotationTimerId = null;
}
}
$('#my-tabs').tabs({
select: function() {
alert(isRotating ? 'this is from the rotation' : 'this is from a user click');
}
});
startRotation();
https://stackoverflow.com/questions/2730437
复制相似问题