Script.aculo.us 简明教程

script.aculo.us - Create Sliders

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

Sliders are thin tracks with one or more handles on them that the user can drag along the track.

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

The goal of a slider is to provide an alternative input method for defining a numerical value; the slider represents a range, and sliding a handle along the track defines a value within this range.

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

Sliders can be in either horizontal or vertical orientation. When horizontal, the left end of the track usually represents the lowest value, while in a vertical orientation, the bottom of the slide is usually the lowest value.

要使用 script.aculo.us 的滑块能力，你需要加载 slider.js 模块以及 prototype.js 模块。因此，用于 script.aculo.us 的最小加载将像这样 −

To use script.aculo.us’s slider capabilities, you’ll need to load the slider.js module along with the prototype.js module. So your minimum loading for script.aculo.us will look like this −

<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 中几个现有元素的对象构成的。这里需要两个元素，一个用于句柄，一个用于轨道，如下 −

Creating a slider is, as usual, a matter of constructing a custom object over a few existing elements in your page’s DOM. You’ll need two elements here, one for the handle and one for the track as follows −

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

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

The track element is usually a <div>, and the handle element is a <div> or <span> within the track element. Both can be passed either by their id= or by direct DOM references, as usual.

Sliders Options

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

You can use one or more of the following options while creating your Slider object.

Sr.No

Option & Description

1

Axis Defines the orientation of the control as horizontal or vertical. The default orientation is horizontal.

2

Range Defines the range of the slider values as an instance of a Prototype ObjectRange instance. Defaults to 0 through 1.

3

Values Defines the discrete set of values that the slider can acquire. If omitted, all values within the range can be set.

4

sliderValue Sets the initial value of the slider. If omitted, the value represented by the leftmost (or top-most) edge of the slider is the initial value.

5

Disabled If true, it creates a slide that is initially disabled. Obviously defaults to false.

6

setValue Will update the slider’s value and thus move the slider handle to the appropriate position.

7

setDisabled Will set the slider to the disabled state (disabled = true).

8

setEnabled Will set the slider to the enabled state (disabled = false).

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

You can provide the following callbacks in the options parameter −

Sr.No

Option & Description

1

onSlide Called whenever the Slider is moved by dragging. The called function gets the slider value as its parameter.

2

onChange Called whenever the Slider has finished moving or has had its value changed via the setSlider Value function. The called function gets the slider value as its parameter.

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>

需要指出的是：

Points to note:

  1. You can change the slider image of any slider using CSS. Use CSS properties background-image: url(track.gif) and background-repeat: no-repeat to set the slider image.

  2. The range value can be specified using $R(minValue, MaxValue). For example, $R(1, 100).

  3. The range value can be specified in terms of specific values. For example values: [1,25,50,75,100]. In this case, the slider would only achieve the discrete values listed as the handle was moved.

  4. At any time, the value of the slider can be set under program control by calling the setValue() method of the slider instance, as in: sliderInstance.setValue(50);

这将生成以下结果：

This will produce following result −