1

これは以前に尋ねられたようなものですが、私は正解を見つけられませんでした。

$(".milestone-timeline .slider-area").slider({
  range: 'min',
  value: 298,
  min: 0,
  max: 884,
  values: [ 10, 280, 620, 850 ]    
});
$(".milestone-timeline .slider-area").slider("option", "disabled", true);

さて、ここで私は4つの異なるマーカーまたは.ui-slider-handleを作成しました。これで、スライダーが作成されると、次のようになります。

<div class="slider-area">
  <div class="ui-slider-range"></div>
  <a href="#" class="ui-slider-handle"></a>
  <a href="#" class="ui-slider-handle"></a>
  <a href="#" class="ui-slider-handle"></a>
  <a href="#" class="ui-slider-handle"></a>
</div>

スライダーの作成時に、これらの各ハンドルに異なるクラス名を適用したいと思います。

jQuery UIスライダーのドキュメントには、次のように書かれています。

「スライダーウィジェットは、初期化時にクラス「ui-slider-handle」でハンドル要素を作成します。要素を作成して追加し、初期化の前に「ui-slider-handle」クラスを追加することで、カスタムハンドル要素を指定できます。値/値の長さに一致するために必要な数のハンドルを作成します。たとえば、「values：[1、5、18]」を指定して1つのカスタムハンドルを作成すると、プラグインは他の2つを作成します。」

残念ながら、カスタムの「ui-slider-handle」を作成して追加する方法がわかりません。

どんな助けでも大歓迎です。 ありがとう！

4

2 に答える 2

1

次のように、スライダーに変換しようとしている要素にスライダーハンドルを追加してみてください。

<div class="milestone-timeline">         
    <div class="ui-slider-handle"></div>
</div>

これは、スライダーのinit関数が呼び出される前にカスタム要素を追加しているために機能します。

于 2011-05-18T14:51:53.690 に答える
0

ドキュメントを読むことは、values複数のスライダー ハンドルを設定する方法にすぎません。このままでは、クラスを追加できないようです。

nth-child セレクターを使用して、各スライダーにクラスを追加できます。

http://api.jquery.com/nth-child-selector/

http://api.jquery.com/addClass/

于 2011-05-17T16:56:27.090 に答える