如何为单个项目正确初始化 jQuery 工具的可滚动组件？答案

【问题标题】：How to properly initialize the jQuery Tools' Scrollable component for a single item?如何为单个项目正确初始化 jQuery 工具的可滚动组件？
【发布时间】：2011-07-28 19:53:15
【问题描述】：

我创建了一个使用 jQuery Tools 的 Scrollable 组件的网页，该页面基于 minimal setup demo。在这个演示中，我的页面也使用了可滚动项目，可以容纳五个缩略图，但是当我的页面第一次加载时，我只需要一个包含三个缩略图的可滚动项目，其余两个图像插槽是空的。我假设我可以简单地用一个可滚动项目 div 替换演示中的三个可滚动项目 div，一切看起来都很好，但是当我这样做时，我最终看到无法操作的左/上一个和右/下一个图标，即使有没有要滚动到的上一个或下一个可滚动项目。

我在 jsfiddle 网站here 上有一个我正在尝试做的事情的示例。它本质上是上面引用的演示，其中不适用的可滚动项 div 和子 imgs 被注释掉了。

如何初始化可滚动项，以使页面上只有一个可滚动项，而不会出现不适用的左/上一个和右/下一个图标？

提前感谢您的帮助、建议等。

【问题讨论】：

标签： javascript jquery jquery-tools scrollable jquery-scrollable

【解决方案1】：

我能想到的最好的是

if($(".scrollable .items div").length < 2) $("a.browse").hide();

初始化之后。

【讨论】：

【解决方案2】：

我希望浏览按钮默认隐藏，然后仅在需要时显示。

在css中，默认a.browse为visibility: hidden

然后在初始化中：

$(".scrollable").scrollable().each( function() {
  var scroller = $(this).data("scrollable");
  scroller.getNaviButtons().css('visibility', 'visible');
  if (scroller.getSize() <= 1) {
    scroller.getNaviButtons().addClass('disabled');
  }
});

这看起来有点 hacky，但如果浏览按钮不会被看到，会避免暂时显示它们。

【讨论】：