script.aculo.us-创建滑块

📌 相关文章

📜 script.aculo.us-创建滑块

📅 最后修改于: 2020-10-19 04:22:35 🧑 作者: Mango

滑块是细轨，上面有一个或多个手柄，用户可以沿其拖动。

滑块的目的是提供一种用于定义数值的替代输入法；滑块代表一个范围，沿着轨迹滑动手柄将定义该范围内的值。

滑块可以处于水平或垂直方向。在水平时，轨迹的左端通常代表最低值，而在垂直方向上，幻灯片的底部通常是最低值。

要使用script.aculo.us的滑块功能，您需要同时加载slider.js模块和prototype.js模块。因此，您对script.aculo.us的最低加载应如下所示：

创建一个滑块控件

通常，创建滑块是在页面DOM中的一些现有元素上构造自定义对象的问题。您将需要两个元素，一个用于手柄，一个用于轨道，如下所示：

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

track元素通常是

，handle元素是track元素中的

或。两者都可以通过其id =或直接DOM引用进行传递，就像通常一样。

滑块选项

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

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

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

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.

Sr.No

Option & Description

onSlide

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

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
        
      
      
        
      
        
      
   

   
      Simple sliders

注意事项：

您可以使用CSS更改任何滑块的滑块图像。使用CSS属性background-image：url（track.gif）和background-repeat：no-repeat设置滑块图像。
可以使用$ R（minValue，MaxValue）指定范围值。例如，$ R（1，100）。
可以根据特定值指定范围值。例如值：[1,25,50,75,100]。在这种情况下，滑块将仅获得在移动手柄时列出的离散值。
随时可以通过调用滑块实例的setValue（）方法，在程序控制下设置滑块的值，如下所示：sliderInstance.setValue（50）;

这将产生以下结果-