Question

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

我有一个关于我在jsfiddle网站here上尝试做的事情的例子。它基本上是上面引用的演示，其中包含不适用的可滚动项目div和子imgs。

如何初始化可滚动条，以便在页面上只有一个可滚动的项目而不显示不适用的左/上和右/下图标？

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

Answer 1

我能想到的最好的是

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

初始化后。

Answer 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，但如果不能看到它们，可以避免暂时显示浏览按钮。

如何为单个项目正确初始化jQuery Tools的Scrollable组件？

2 个答案: