script.aculo.us - 创建滑块

滑块是带有一个或多个手柄的细轨，用户可以在轨迹上拖动这些手柄。

滑块的目的是提供一种替代的输入方法来定义数值；滑块表示一个范围，沿着轨道滑动手柄定义此范围内的值。

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

要使用 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 中的一些现有元素上构建自定义对象来实现的。您在这里需要两个元素，一个用于手柄，另一个用于轨道，如下所示：

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

轨道元素通常是<div>，而手柄元素是轨道元素内的<div>或<span>。这两个元素都可以通过它们的 id= 或直接的 DOM 引用传递，这与往常一样。

滑块选项

在创建滑块对象时，您可以使用以下一个或多个选项。

序号 选项和描述
1

轴

将控件的方向定义为水平或垂直。默认方向为水平。
2

范围

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

值

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

sliderValue

设置滑块的初始值。如果省略，则滑块最左侧（或最顶部）边缘表示的值为初始值。
5

禁用

如果为 true，则创建一个最初禁用的滑块。显然默认为 false。
6

setValue

将更新滑块的值，从而将滑块手柄移动到适当的位置。
7

setDisabled

将滑块设置为禁用状态（disabled = true）。
8

setEnabled

将滑块设置为启用状态（disabled = false）。

您可以在 options 参数中提供以下回调函数：

序号 选项和描述
1

onSlide

每当通过拖动移动滑块时调用。调用的函数获取滑块值作为其参数。
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)。

  • 可以根据特定值指定范围值。例如 values: [1,25,50,75,100]。在这种情况下，当手柄移动时，滑块只会达到列出的离散值。

  • 在任何时候，都可以通过调用滑块实例的 setValue() 方法以程序方式设置滑块的值，例如：sliderInstance.setValue(50);

这将产生以下结果：

打印页面
上一页
下一页
广告