dijit/form/ToggleButton

簡介

dijit/form/ToggleButton 是一個介於按鈕 (Button) 和檢核框 (CheckBox) 之間的一個圖形介面。外觀是按鈕，行為卻像檢核框，其狀態只在 true 和 false 之間變化；而按鈕的標示也可以隨著狀態的改變而變化。和檢核框最大的不同是 ToggleButton 不接受 Form 或 Form Manager 的管控，因此不能透過後兩者去讀取或收集 TobbleButton 的狀態。因此，可以說 ToggleButton 比較像是個行為圖像，而非資料輸入用的圖像。
dijit/form/ToggleButton 繼承了 dijit/form/Button 。因此，在外觀、行為及屬性都和按鈕很像。第一次按下 ToggleButton 時，傳回值一律為 true；之後，每按一次，狀態便在 true 和 false 之間變化。

範例

範例中建立了三個外觀不同的按鈕，以展示一般 ToggleButton 在使用時，通常會具有的外觀。一個具有一般按鈕的外觀，一個只有圖像，最後一個按鈕同時有圖像和標示文字。

CSS

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

CSS 中沒有特別的樣式需要設定。

HTML

<body class="claro">
    
    
    
</body>

HTML 中簡單的設定三個按鈕的掛載點。

Script

建立 ToggleButton 的方式和建立 Button 的方式非常類似，最大不同的地方在於 ToggleButton 多數時間在處理 onChange 事件，而非 onCkick 事件。而其作用的方式則和 CheckBox 非常類似，只在二個狀態間轉換。 ToggleButton 的狀態只有二種，就是 true 和 false。如果要知道目前是處於那一種狀態，可以用 var btn = register.byId("btn1"); btn1.get("checked"); 來取得目前的狀態；也可以用 btn.set("checked", "false"); 來設定狀態；這點則和 CheckBox 透過 "value" 不同。

熊伯的外接硬碟

2015年11月19日星期四