Script.aculo.us 简明教程

script.aculo.us - Create Sliders

滑块是在一到多个手柄上放置的细轨，用户可以沿着滑轨拖动这些手柄。

滑块的目标是为定义数值提供一种替代的输入方式；滑块表示一个范围，而沿着滑块拖动一个手柄在该范围内的定义一个值。

滑块可以采用水平或竖直方向。水平方向时，轨道的左侧通常表示最小值，而竖直方向时，滑块的底部通常是最小值。

要使用 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>

Creating a Slider Control

创建滑块通常是按照元素页面 DOM 中几个现有元素的对象构成的。这里需要两个元素，一个用于句柄，一个用于轨道，如下 −

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

轨道元素通常是 <div>，句柄元素是轨道元素中的 <div> 或 <span>。两者都可以通过其 id= 或直接 DOM 引用传递，这很常见。

Sliders Options

创建 Slider 对象时，可以使用以下一个或多个选项。

Sr.No

Option & Description

1

Axis 定义控件的取向为水平或竖直。默认取向为水平。

2

Range 以 Prototype ObjectRange 实例为实例定义滑块值的范围。默认为 0 到 1。

3

Values 定义滑块可以获取的离散值集。如果省略，则可以设置范围内的所有值。

4

sliderValue 设置滑块的初始值。如果省略，由滑块最左侧（或最上侧）边缘表示的值便是初始值。

5

Disabled 如果为真，则创建一个最初禁用的滑块。显然，默认为假。

6

setValue 将更新滑块的值，从而将滑块句柄移动到相应位置。

7

setDisabled 将滑块设置为禁用状态（禁用 = 真）。

8

setEnabled 将滑块设置为启用状态（禁用 = 假）。

可以在选项参数中提供以下回调 −

Sr.No

Option & Description

1

onSlide 每当通过拖拽滑动滑块时都会调用。被调用的函数获取滑块值作为其参数。

2

onChange 每当滑块完成移动或通过 setSlider Value 函数更改其值时都会调用。被调用的函数获取滑块值作为其参数。

Sliders Example

<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>

需要指出的是：

  1. 可以使用 CSS 更改任何滑块的滑块图像。使用 CSS 属性 background-image: url(track.gif) 和 background-repeat: no-repeat 设置滑块图像。

  2. 范围值可以使用 $R(minValue, MaxValue) 指定。例如，$R(1, 100)。

  3. 范围值可以根据特定值指定。例如，values: [1,25,50,75,100]。在这种情况下，滑块只能在句柄移动时实现列出的离散值。

  4. 任何时候，都可以通过调用滑块实例的 setValue() 方法在程序控制下设置滑块的值，如：

这将生成以下结果：