dijit/form/Select
簡介
dijit/form/Select 是下拉式選單介面元件的其中一種，當輸入值冗長，或後台資料庫的欄位值是以代碼儲存時，讓使用者便於輸入的一個良好選擇。 選單中的選項較多時，通常會經過排序，讓使用者容易找到選項；當選項不多時，則依選項使用率的高低，由上至下排列。
範例
範例中同時例示了dijit/form/Select 的宣告法和程式法兩種寫法。在程式法的範例中，又同時展示了 dijit/form/Select 使用 dojo/store/Memory 做為資料來源的寫法，以及如何動態改變選單的選項內容。在程式法中，另建立了一個按鈕，按下按鈕即會改變選單的選項內容。
dijit/form/Select 在預設的狀態下，選單輸入欄位的寬度會依照選單內容的寬度做改變（看宣告法的範例，就會看出來）。這一點在排版時會造成很大的困擾，使用者在輸入時，欄位的寬度一直在變化，對使用者經驗也不佳。採用時，最好幫選單定一個固定的寬度。
CSS
<style>
html {
width:100%;
height:100%;
}
body {
margin: 0 auto;
width:1000px;
height:100%;
padding:20px;
}
</style>
無須定義特別的樣式。
HTML
<body class="claro">
</body>
第 4~8 行用宣告法定義了一個下拉式選單，並沒有設定其寛度，這樣可以看出欄位會隨選項的寬度改變。此時傳回的值會是屬性 value 的值。
第 14 行則建立一個 dijit 的掛載點，掛載由程式法建立出來的 dijit。
第 15 行則是按鈕的掛載點。
Script
第 21~25 建立按鈕，預設資料來源是 store1，在點按時，呼叫 app.changeStore 函式。同時用 style 定義了 Select 欄位的寬度為 150px。
labelAttr 指定要用 store 中的哪個鍵的名稱做為選項名。
sortByLabel 設定為 false，指定不要依選項名做排序。預設狀態下，會依 label 的名稱排序。
maxHeight 設定下拉式選單的最大高度，以 px 為單位，選項內容超過此高度時，會自動產生捲動軸。設定為 -1 時，會延伸高度至最大值。
第 41~46 行建立第一個 Memory store 做為 Select 的預設資料來源。此時傳回的選項值是 id 鍵的值。
第 48~55 行建立第二個 Memory store 做為 Select 要動態變更的選單內容來源。傳回的選項值亦是 id 鍵的值。
第 57~59 行是變更 Select 資料來源的函式，使用 Select 元件的 set() 函式改變 store 鍵的值，以改變選單內容。
沒有留言:
張貼留言