jquery - JQuery UI - スライダー

Question

jQuery UI Slider を使用しようとしています。そして、私がやりたいことは、スライダーの各ステップで、スライダー バーに点 (.) を描きたいということです。載せたいポイントは私の持っているイメージです。

助言がありますか？

助けてくれてありがとう。よろしくお願いします。

Answer 1

ちょっとした「トリック」でこれを行うことができます。次のように div を設定できます。

#imgSlider {width:100px; background:url('path/to/img.gif') repeat-x top left;}

次に、スライダーのスライド機能で、その div の幅を調整できます。

// ... slider settings ....
slide: function (event, ui) {
    $('#imgSlider').width = ui.value;
}

このようにして、その div の一部だけを明らかにし、個々の画像を追加/削除するような錯覚を生み出します。何らかの静的な背景が必要な場合は、#imgSlider を別の div にラップして、背景を指定します。

また

この方法でそれを行うことができます（これが私の最初のアイデアでした）：

1. 画像を div (または任意の要素) に追加または削除する「描画」関数を作成します。
2. その関数にパラメーターを追加します。これにより、画像を追加または削除するかどうかが決定されます (単純なブール値で実行できます)。
3. 関数を受け入れるオプションでスライダーを使用しますslide(jQuery UI の例のページで確認できるように)。
4. そのslide関数では、現在の値が新しい値よりも低いか高いかを確認してください。true/false の値を取得します (つまり、新しいスライダーの値が小さいかどうか)。
5. 値を比較して取得したパラメーターを使用して「描画」関数を呼び出します。そのため、その画像を追加または削除する必要があります。

次に、最小値と最大値の処理などの微調整を行います。しかし、ロジックは機能するはずです。