在每次点击和添加类别时检查位置

user3123174 发表于 Dev

用户名

如果希望显示第一个或最后一个选项卡，则希望将类.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/

眼猫

您可以尝试的一种方法是在动画完成后启用/禁用左右按钮。

$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 outsideWidth的附加说明，在某些情况下，与尺寸相关的API返回的数字（包括.outerWidth（））可能是小数。代码不应假定它是整数。。因此，让希望Math.round足以获得适当的数字。也许有一种更好的方法来计算是否必须禁用/启用右键，而不是依靠适合容器的项目数。

这是经过上述修改的代码：http : //jsfiddle.net/0Lsepxeu/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。