Script.aculo.us-scriptaculous-sliders
script.aculo.us-スライダーの作成
スライダーは、ユーザーがトラックに沿ってドラッグできる1つ以上のハンドルが付いた細いトラックです。
スライダーの目標は、数値を定義するための代替入力方法を提供することです。スライダーは範囲を表し、トラックに沿ってハンドルをスライドすると、この範囲内の値が定義されます。
スライダーは、水平方向または垂直方向に配置できます。 水平の場合、通常、トラックの左端は最低値を表し、垂直方向の場合、スライドの下部は通常最低値を表します。
script.aculo.usのスライダー機能を使用するには、slider.jsモジュールとprototype.jsモジュールをロードする必要があります。 したがって、script.aculo.usの最小負荷は次のようになります-
スライダーコントロールの作成
スライダーの作成は、通常のように、ページのDOMのいくつかの既存の要素の上にカスタムオブジェクトを作成することです。 ここでは、次の2つの要素が必要です。1つは_handle_用、もう1つは_track_用です-
track要素は通常<div>であり、handle要素はtrack要素内の<div>または<span>です。 どちらも、通常どおりid =または直接DOM参照のいずれかで渡すことができます。
スライダーオプション
Sliderオブジェクトの作成中に、次のオプションの1つ以上を使用できます。
Sr.No | Option & Description |
---|---|
1 |
Axis コントロールの方向を_horizontal_または_vertical_として定義します。 デフォルトの向きは_horizontal_です。 |
2 |
Range スライダー値の範囲をPrototype ObjectRangeインスタンスのインスタンスとして定義します。 デフォルトは0〜1です。 |
3 |
Values スライダーが取得できる値の離散セットを定義します。 省略した場合、範囲内のすべての値を設定できます。 |
4 |
sliderValue スライダーの初期値を設定します。 省略すると、スライダーの左端(または最上端)で表される値が初期値です。 |
5 |
Disabled trueの場合、最初は無効になっているスライドが作成されます。 明らかにデフォルトはfalseです。 |
6 |
setValue スライダーの値を更新し、スライダーハンドルを適切な位置に移動します。 |
7 |
setDisabled スライダーを無効状態に設定します(disabled = true)。 |
8 |
setEnabled スライダーを有効状態に設定します(無効= false)。 |
あなたはオプションパラメータで次のコールバックを提供することができます-
Sr.No | Option & Description |
---|---|
1 |
onSlide Sliderがドラッグによって移動されるたびに呼び出されます。 呼び出された関数は、パラメーターとしてスライダーの値を取得します。 |
2 |
onChange スライダーの移動が終了するか、setSlider Value関数を介して値が変更されるたびに呼び出されます。 呼び出された関数は、パラメーターとしてスライダーの値を取得します。 |
スライダーの例
注意すべき点:
- CSSを使用して、任意のスライダーのスライダー画像を変更できます。 CSSプロパティ_background-image:url(track.gif)_および_background-repeat:no-repeat_を使用して、スライダー画像を設定します。
- 範囲値は、$ R(minValue、MaxValue)を使用して指定できます。 たとえば、$ R(1、100)。
- 範囲値は、特定の値に関して指定できます。 値の例:[1,25,50,75,100]。 この場合、スライダーは、ハンドルが移動したときにリストされた離散値のみを達成します。
- スライダーの値は、次のように、スライダーインスタンスのsetValue()メソッドを呼び出すことにより、プログラムの制御下でいつでも設定できます。
これにより、次の結果が生成されます–