在每次单击和添加类期间检查位置

时间:2014-09-29 16:53:42

标签: javascript jquery jquery-plugins

如果显示第一个或最后一个选项卡,我希望将类.disabled添加到左侧和/或右侧控件(.tab-left,.tab-right),以便用户可以看到它们已到达结尾并且无法再点击。

现在我这样做是为了防止用户超越结束。

if (tabs are at the end) {
   return;
 }

这适用于无法点击结束的用户,但如果我在返回之前添加该类,则问题是在标签到达结束并且用户再次单击之前不会添加.disabled类。

if (tabs are at the end) {
   $('.tab-right').addClass('disabled');
   return;
 }

我需要在显示最后一个标签时添加禁用的类,而不是在用户尝试点击结束标记时添加。

这是js小提琴的链接:http://jsfiddle.net/uue6pgcx/

1 个答案:

答案 0 :(得分:3)

您可以尝试的一个选项是在动画完成后启用/禁用右侧和左侧按钮。

$ul.filter(':not(:animated)').animate({
    "left": dir + liWidth
  }, {
    complete: function () {
    // Calculate the number of items in the container (without left and right navigation buttons).
    var lisContainer = Math.round(($container.width() - $left.outerWidth() - $right.outerWidth()) / liWidth);
    // Disable right button when list is moved to the left a number of items
    // such as the remaining number of them is less or equal than the number
    // of items that fit in the container.
    $right.toggleClass('disabled', $li.length + $ul.position().left / liWidth <= lisContainer);
    // Disable left button when list is in the origin. 
    $left.toggleClass('disabled', $ul.position().left === 0);
  }
});

免责声明:根据jQuery outerWidth additional notes维度相关API返回的数字(包括.outerWidth())在某些情况下可能是小数。代码不应该假设它是一个整数。。所以,希望Math.round足以获得正确的数字。 也许有更好的方法来计算是否必须禁用/启用右键,而不是依赖于容器中适合的项目数。

这是您的代码,具有上述修改: http://jsfiddle.net/0Lsepxeu/