
- script.aculo.us 教程
- script.aculo.us - 首頁
- script.aculo.us - 概覽
- script.aculo.us - 模組
- script.aculo.us - 視覺效果
- script.aculo.us - 拖放
- script.aculo.us - 元素排序
- script.aculo.us - 建立滑塊
- script.aculo.us - 自動完成
- script.aculo.us - 原地編輯
- script.aculo.us 資源
- script.aculo.us - 快速指南
- script.aculo.us - 資源
- script.aculo.us - 討論
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);
這將產生以下結果: