0

jQuery ToolsのScrollableコンポーネントを使用するWebページを作成しました。このページは、最小限のセットアップデモに基づいています。このデモのように、私のページも5つのサムネイル画像用のスペースがあるスクロール可能なアイテムを使用していますが、ページを初めてロードするときは、3つのサムネイル画像のみを含む1つのスクロール可能なアイテムのみが必要で、残りの2つの画像スロットは空です。デモの3つのスクロール可能なアイテムdivを1つのスクロール可能なアイテムdivに置き換えるだけで、すべてが正常に見えると思いましたが、そうすると、操作できない左/前のアイコンと右/次のアイコンが表示されます。スクロール先の前または次のスクロール可能なアイテムはありません。

ここにjsfiddleサイトでやろうとしていることの例があります。これは基本的に上記のデモであり、適用できないスクロール可能なアイテムのdivと子のimgがコメント化されています。

適用できない左/前のアイコンと右/次のアイコンを表示せずに、ページ上にスクロール可能なアイテムが1つだけになるように、スクロール可能なアイテムを初期化するにはどうすればよいですか？

よろしくお願いします。

4

2 に答える 2

1

ブラウズ ボタンをデフォルトで非表示にして、必要な場合にのみ表示するようにしました。

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');
  }
});

これは少しハックに思えますが、参照ボタンが表示されない場合に一時的に表示することを回避します。

于 2011-11-03T14:52:10.557 に答える
1

私が思いつくことができる最高のものは

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

初期化後。

于 2011-07-28T20:58:18.277 に答える