dijit/form/HoriztonalSlider

簡介

dojo 的 Slider （滑動條）有二個：dijit/form/HorizontalSlider 及 dijit/form/VerticalSlider。看名字就可以知道，一個「橫躺」，一個「直立」，功能和操作方式都相同，透過滑動指示游標來決定輸入值，用方向鍵來移動指示游標也行。slider 的建立比多數的 dijit 要複雜，滑動條和刻度和數值標示，分成了三個元件，建起來頗為費時。

範例

在範例中先建立了一個 form manager 做為容器，內中建立了二個 slider，一個用宣告法，一個用程式法；另外建立了一個按鈕來讀取輸入值。記得打開「開發者工具」的「主控台」查看結果。

CSS

<style>
html {
    width:100%;
    height:100%;
}
body {
    margin: 0 auto;
    width:1000px;
    height:100%;
    padding-top:20px;
}
</style>

這次直接在元件中定義樣式。

HTML

<body class="claro">
    
        
        Declarative
        
            
            
            
                0
                1
                2
                3
                4
                5
                6
                7
                8
                9
                10
            
        
        


         
            Programmatic
            
                
                    0%
                    10%
                    20%
                    30%
                    40%
                    50%
                    60%
                    70%
                    80%
                    90%
                    100%
                    
                 
            
        
    
    
</body>

第 5~27 行用宣告法建立一個 Slider。
第 12~13 行建立刻度。
第 14~25 行建立數值落點標示
第 32~47 行建立程式法的掛載點，掛載點共有三個，各在第 32 行、第 33 行及第 46 行，數值落點標示則以 <ul> 標記宣告。

Script

第 24~37 行用程式法建立 slider 的滑動條。各參數作用如下：
name 為輸入值的變數名稱。
style 設定樣式。
value 設定預設值。
minimum 及 maximum 設定最小值及最大值。
discreteValues 設定最小值和最大值中間存在數值的節點個數。
showButtons 設定在滑動條的兩端是否要有按鈕，這兩個按鈕可以用來增加或降低輸入值，每次改變一個節點的值。
clickSelect 設定是否可以直接點選滑動條以輸入數值。
intermediateChange 設定是否在滑動指示游標移動的過程中，每次經過一個數值節點時，都要觸發一次 onChange 事件，預設值為 false，只在滑動指示游標停止時，觸發一次 onChange 事件。
onChange 設定在 onChange 事件發生時，要執行的函式。

第 39~42 行建立落點數值標示。
container 設定為 "topDecoration" 表示數值落點標示處於滑動條的上方。設定為 "bottomDecoration" 時則處於滑動條的下方，如宣告法的 Slider。

第 44~48 行建立刻度標示。
container 設定為 "topDecoration" 表示刻度處於滑動條的上方。設定為 "bottomDecoration" 時則處於滑動條的下方，如宣告法的 Slider。

第 51 行將程式法建立的 slider 向 form manager 註冊納管。

第 52~55 行設定按鈕在觸動時所執行的函式。

Slider 還提供了 increment(event) 及 decrement(event) 兩個函式，可以透過程式去改變 Slider 的值，參數 event 一定要給，在實作時，一般是因為某個事件被觸發了，才會去改變 slider 的值，把觸發的事件當成參數來傳就可以了。當用鍵盤改變 slider 的值時，就會呼叫到這兩個函式。

熊伯的外接硬碟

2015年10月20日星期二