Question

我现在一直在使用jQuery UI标签，并且出现了一个有趣的请求。当前选项卡设置使用旋转功能。我需要找到一种方法来确定是否由于旋转本身的结果而显示选项卡，或者是因为用户物理地单击了选项卡。

我已经连接了所有标准事件，显示和选择，无论标签更改的来源如何，它们都会触发。

有没有人有任何想法？基本上我想在用户单击选项卡时执行其他操作，但如果选项卡通过旋转自行更改则不会。

如果我将点击连接到标签本身，它似乎根本没有被解雇，我假设因为标签小部件正在使用该事件本身。

编辑：这是基本代码

<script type="text/javascript">
$(document).ready(function(){
    $("#featured").tabs(
        {show: function(e, ui) { console.log(e);} }
    ).tabs("rotate", 5000, false);
});
</script>

控制台将显示事件（e）是由用户单击还是作为轮换的一部分显示。此外，如果我将事件从show更改为：选择：

Answer 1

来自jQueryUI documentation：

点击时会触发此事件标签。
$( ".selector" ).tabs({
   select: function(event, ui) { ... }
});

Answer 2

如果你开发自己的旋转逻辑而不是使用内置的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();

如何确定是否由于用户单击或从选项卡旋转显示了jquery选项卡

2 个答案: