Script.aculo.us-scriptaculous-sliders

提供:Dev Guides
移動先:案内検索

script.aculo.us-スライダーの作成

スライダーは、ユーザーがトラックに沿ってドラッグできる1つ以上のハンドルが付いた細いトラックです。

スライダーの目標は、数値を定義するための代替入力方法を提供することです。スライダーは範囲を表し、トラックに沿ってハンドルをスライドすると、この範囲内の値が定義されます。

スライダーは、水平方向または垂直方向に配置できます。 水平の場合、通常、トラックの左端は最低値を表し、垂直方向の場合、スライドの下部は通常最低値を表します。

script.aculo.usのスライダー機能を使用するには、slider.jsモジュールとprototype.jsモジュールをロードする必要があります。 したがって、script.aculo.usの最小負荷は次のようになります-

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load=slider"></script>

スライダーコントロールの作成

スライダーの作成は、通常のように、ページのDOMのいくつかの既存の要素の上にカスタムオブジェクトを作成することです。 ここでは、次の2つの要素が必要です。1つは_handle_用、もう1つは_track_用です-

new Control.Slider(handle, track [ , options ] );

track要素は通常<div>であり、handle要素はtrack要素内の<div>または<span>です。 どちらも、通常どおりid =または直接DOM参照のいずれかで渡すことができます。

スライダーオプション

Sliderオブジェクトの作成中に、次のオプションの1つ以上を使用できます。

Sr.No Option & Description
1

Axis

コントロールの方向を_horizo​​ntal_または_vertical_として定義します。 デフォルトの向きは_horizo​​ntal_です。

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関数を介して値が変更されるたびに呼び出されます。 呼び出された関数は、パラメーターとしてスライダーの値を取得します。

スライダーの例

<html>
   <head>
      <title>Sliders Example</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = slider" ></script>

      <script type = "text/javascript">
         window.onload = function() {
            new Control.Slider('handle1' , 'track1',{
            range: $R(1,100), values: [1,25,50,75,100], sliderValue: 1, onChange: function(v){
               $('changed').innerHTML = 'Changed Value : '+v;
               },

            onSlide: function(v) {
               $('sliding').innerHTML = 'Sliding Value: '+v;
               }
            });
            new Control.Slider('handle2' , 'track2', {
               range: $R(1,100),
               axis:'vertical',
               sliderValue: 1,
               onChange: function(v){
                  $('changed').innerHTML = 'Changed Value : '+v;
               }

               onSlide: function(v) {
                  $('sliding').innerHTML = 'Sliding Value: '+v;
               }
            });
         }
      </script>

      <style type = "text/css">
         h1{ font-size: 1.5em; }

         .track {
            background-color: #aaa;
            position: relative;
            height: 0.5em; width: 10em;
            cursor: pointer; z-index: 0;
         }

         .handle {
            background-color: red;
            position: absolute;
            height: 1em; width: 0.25em; top: -0.25em;
            cursor: move; z-index: 2;
         }

         .track.vertical {
            width: 0.5em; height: 10em;
         }

         .track.vertical .handle {
            width: 1em; height: 0.25em; top: 0; left: -0.25em;
         }
      </style>
   </head>

   <body>
      <h1>Simple sliders</h1>

      <div id = "track1" class = "track" style = "width: 20em;" >
         <div id = "handle1" class = "handle" style = "width: 0.5em;" ></div>
      </div>

      <p id = "sliding" ></p>
      <p id = "changed" ></p>

      <div id = "track2" class = "track vertical" style = "position: absolute; left: 25em;  top: 3em;" >
         <div id = "handle2" class = "handle" style = "height: 0.5em;" ></div>
      </div>
   </body>
</html>

注意すべき点:

  • CSSを使用して、任意のスライダーのスライダー画像を変更できます。 CSSプロパティ_background-image:url(track.gif)_および_background-repeat:no-repeat_を使用して、スライダー画像を設定します。
  • 範囲値は、$ R(minValue、MaxValue)を使用して指定できます。 たとえば、$ R(1、100)。
  • 範囲値は、特定の値に関して指定できます。 値の例:[1,25,50,75,100]。 この場合、スライダーは、ハンドルが移動したときにリストされた離散値のみを達成します。
  • スライダーの値は、次のように、スライダーインスタンスのsetValue()メソッドを呼び出すことにより、プログラムの制御下でいつでも設定できます。

これにより、次の結果が生成されます–