簡介
按鈕 (Button) 模組的名稱是 dijit/form/Button。在網頁應用中，按鈕是最常見的介面元件。論尺寸，則大小都有；說外觀，則各式各樣。但嚴格來說，作用只有一個；就是讓使用者在按下按鈕後，觸發一個事件，讓應用程式採取必要的回應動作。
範例
範例中以程式法建立四個按鈕，顯示在 Chrome 中時，如下圖所示：
CSS
<style> </style>
CSS 中沒有特殊的樣式設定。
HTML
<body class="claro">
</body>
HTML 的部份很簡單，就直接建立四個按鈕的掛載節點。
Script
四個按鈕都是直接用程式產生，沒有用到宣告法，因此沒有必要呼叫剖析器 (parser) 去剖析 HTML。也因為不用等剖析器去產生所有用宣告法產生的介面元件，所以也不用呼叫 ready()。其實連 parser 及 ready 這兩個模組都不用在 require() 中載入，這也是程式法產生介面的好處。
第 12 行及第 19 行到第 21 行，展示了二種用程式法建立按鈕，在按下按鈕觸發點按 (click) 事件時，兩種呼叫函式的寫法。這兩種寫法沒有所謂對錯，或哪一種寫法比較好，全看喜好而定。但第 19 行到第 21 行的寫法，函式不能共用；如果有很多按鈕的行為模式都很像時，也許該用第 12 行的寫法，函式中可以判斷觸發事件 (Event) 的屬性值，判斷是哪一個按鈕觸發事件，再決定該如何處理。要使用哪一種，就和個人寫程式的習慣有關了。
由範例中可以看出，使用 dojo 建立一個一般的按鈕並不難。按鈕的尺寸會依標示 (Label) 的長短及圖像的大小，自行調整。如果要變更按鈕的長相，像是把所有的按鈕都變成等寬，讓畫面好看一些，事情就有點複雜了。
補述
如果由 Chrome 的「開發者工具」去檢視最終的 HTML 碼，一個尚未使用 dojo 「裝飾」過的按鈕，HTML 碼如下：
在用 dojo 裝飾過後，最終的 HTML 碼如下：
●
Click Me
在這麼長串的 HTML 碼中，要用 CSS 去調整按鈕的外觀，一時還真有無從下手的感覺。如果只是要改變按鈕的寬度，有個簡單一點的方法是在 <button> 的標記中，再加一組具有類別 (class) 屬性的 <div> 或 <span> 標記，把按鈕的標示放在其中。例子如下：
再補上 CSS 碼如下：
.equalWidth {
width:200px;
}
也就可以搞定這件事了，如果還要改變其它的屬性，就得好好研究上面那一大串的 HTML 碼，看看要如何變更其 CSS 的設定。例如要改變標示 (label) 的顏色成為紅色，就得設定:
#btn1_label {
color:red";
}
沒有留言:
張貼留言