DIV CSS 佈局教程網

到現在為止，初始化這些MooTools插件對象就會開始變得越來越熟悉。滾動條（Slider）沒有任何不同，你要創建一個新的滾動條，定義滾動條和滑塊相關的元素，然後設置你的選項，再創建一些回調事件的控制函數。盡管滾動條（Slider）遵循這個熟悉的模式，但是任然還有一點特殊的地方。

基本用法

創建一個新的滾動條（Slider）對象

我們首先從HTML和CSS開始。基本的想法是創建一個滾動條的div，因此是一個長的長方形（長度取決於我們用滾動條做什麼），還有一個子元素作為滑塊。

1. <div id="slider"><div id="knob"></div></div>

我們的CSS也可以這麼簡單。只需要設置寬、高，還有背景顏色。

1. #slider {
2.     width: 200px
3.     height: 20px
4.     background-color: #0099FF
5. }
6.  
7. #knob {
8.     width: 20px
9.     height: 20px
10.     background-color: #993333
11. }

現在，我們可以創建我們的新滾動條對象了。要初始化滾動條，首先要把你的相關元素賦值給一些變量，然後使用“new”來創建一個滾動條Slider對象，這和我們以前創建tween、morph和drag.move時一樣：

1. // 把元素賦值給變量
2. var sliderObject = $('slider');
3. var knobObject = $('knob');
4.  
5. // 創建一個新的slider對象
6. // 首先定義slider元素
7. // 然後定義滑塊元素
8. var SliderObject = new Slider(sliderObject , knobObject , {
9.     // 這裡是你的選項
10.     // 稍後我們會仔細講一下這些選項
11.     range: [0, 10],
12.     snap: true,
13.     steps: 10,
14.     offset: 0,
15.     wheel: true,
16.     mode: 'horizontal',
17.     // 當step的值改變時將觸發onchange事件
18.     // 它會把當前的step作為參數傳入
19.     onChange: function(step){
20.         // 在這裡放置onchange時要執行的代碼
21.         // 你可以引用step
22.     },
23.     // 當用戶拖動滑塊時觸發ontick事件
24.     // 它會傳遞當前的位置（相對於父元素的位置）
25.     onTick: function(pos){
26.     // 這是必需的，用以調整滑塊的位置
27.  &