jQuery Mobile架構中的表單組件基礎使用教程，jquerymobile

jQuery Mobile架構中的表單組件基礎使用教程，jquerymobile

一.表單組件基礎
1.組件簡介
jQuery Mobile 中的表單組件是基於標準 HTML ，然後在此基礎上增強樣式，因此即使瀏覽器不支援 jQuery Mobile 表單仍可正常使用。需要注意的是， jQuery Mobile 會把表單元素增強為觸摸裝置很容易使用的形式，因此對於 iphone/ipad 與 Android 使用 Web 表單將會變得非常方便。

jQuery Mobile 的表單組件有以下幾種：
（1）文本輸入框， type="text" 標記的 input 元素會自動增強為 jQuery Mobile 樣式，無需額外添加 data-role 屬性。
（2）文本輸入欄位， textarea 元素會被自動增強，無需額外添加 data-role 屬性，用於多行輸入文本，jQuery Mobile 會自動增大文本域的高度，避免在行動裝置中很難找到捲軸的情況。
（3）搜尋輸入框， type="search" 標記的 input 元素會自動增強，無需額外添加 data-role 屬性，這是一個新的 HTML 元素，增強後的輸入框左邊有一個放大鏡表徵圖，點擊觸發搜尋，在輸入內容後，輸入框的右邊還會出現一個叉的表徵圖，點擊清除已輸入的內容，非常方便。
（4）選項按鈕， type="radio" 標記的 input 元素會自動增強，無需額外添加 data-role 屬性。
（5）複選按鈕， type="checkbox" 標記的 input 元素會自動增強，無需額外添加 data-role 屬性。
（6）挑選清單， select 元素會被自動增強，無需額外添加 data-role 屬性。
（7）劃杆， type="range" 標記的 input 元素會自動增強，無需額外添加 data-role 屬性。
（8）開關， select 元素添·加 data-role="slider" 屬性後會被增強會 jQuery Mobile 的開關組件， select 中只能有兩個 option。

2.組件使用規範
所有的表單組件，只要是需要與伺服器傳送資料，都應該包裹在一個 form 標籤內，並且應該指定好 form 的 action 和 method 屬性。當然如果你使用的是 Web SQL Database 這類本地儲存，即資料並不需要與伺服器傳送，可以不用 form 標籤和 sumbit 提交。另外 form 的 id 需要在整站中唯一，由於 jQuery Mobile 使用 Ajax 導航，因此不同的 page 可以同時載入到一個 DOM 中，因此 form id 必須整站唯一以保證每個 DOM 的表單 id 都是不同的。

每一個表單元素應該要有相應的 label 對應，label 的 for 值要與元素的 id 相同，使其在語義上相關，並且可以使用一個帶有 data-role="fieldcontain" 屬性的 div 或 fieldset 容器包裹， jQuery Mobile 會自動在容器底部增加一條細邊框作為分隔。

二.表單組件詳解
1.文本輸入框
在 jQuery Mobile 中，文本輸入框和文本輸入欄位都是使用標準 HTML 標籤的，並且支援一些 HTML5 的 input 類型，如 password, email, tel, number, range 等更多的類型，而對於一些類型（ range, serach ） jQuery Mobile 則會將其轉換為 text 的 input 類型，統一標準化其樣式，下面是文本輸入框的調用代碼及示圖。

<div data-role="fieldcontain">  <label for="text">文本輸入框</label>  <input type="text" name="text" id="text" value="" /></div>

2.文本輸入欄位

<div data-role="fieldcontain">  <label for="textarea">文本輸入欄位</label>  <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea></div>

3.搜尋輸入框
正如上文所述，增強後的輸入框左邊有一個放大鏡表徵圖，點擊觸發搜尋，在輸入內容後，輸入框的右邊還會出現一個叉的表徵圖，點擊清除已輸入的內容。

<div data-role="fieldcontain">  <label for="search">搜尋輸入框</label>  <input type="search" name="search" id="search" value="" /></div>

4.單選框
單選框組件用於在頁面中提供一組選項，並且只能選擇其中一個選項。在 jQuery Mobile 中，單選框組件不但在外觀上美化了，還增加了一些表徵圖用於增強視覺反饋。 type="radio" 標記的 input 元素會自動增強為單選框組件，但 jQuery Mobile 建議開發人員使用一個帶 data-role="controlgroup" 屬性的 fieldset 標籤包括選項，並且在 fieldset 內增加一個 legend 元素，用於表示該單選框的標題。

<div data-role="fieldcontain">  <fieldset data-role="controlgroup">    <legend>單選框:</legend>    <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" />    <label for="radio-choice-1">藍</label>    <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />    <label for="radio-choice-2">綠</label>    <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />    <label for="radio-choice-3">黑</label>  </fieldset></div>

5.複選框
複選框也是用於在頁面中提供一組選項的，但可以同時選擇多個選項。與單選框相同，複選框組件也無需額外調用 data-role 屬性， type="checkbox" 標記的 input 元素會自動增強為 jQuery Mobile 樣式，當然 jQuery Mobile 也建議開發人員使用一個帶 data-role="controlgroup" 屬性的 fieldset 標籤包括選項，並且在 fieldset 內增加一個 legend 元素，用於表示該複選框的標題。

<div data-role="fieldcontain">  <fieldset data-role="controlgroup">    <legend>複選框</legend>     <input type="checkbox" name="blue" id="effect1" class="custom" />     <label for="effect1">效果1</label>    <input type="checkbox" name="green" id="effect2" class="custom" />    <label for="effect2">效果2</label>    <input type="checkbox" name="pink" id="effect2" class="custom" />    <label for="effect2">效果3</label>  </fieldset></div>

預設的複選框組件是垂直排列選項的，我們可以在 fieldset 上添加 data-type="horizontal" 使其樣式改為水平按鈕組的樣式， jQuery Mobile 會使選項元素浮動並去掉表徵圖。

6.挑選清單
挑選清單是基於 HTML select 元素的，具有原生菜單和自訂菜單兩種形式，原生菜單與自訂菜單都有一個樣式美化了的選擇按鈕，不同的是在自訂菜單中原生的 option 元素將被隱藏， jQuery Mobile 會產生一個由 CSS3 和 HTML5 構成的菜單代替，並且這個菜單是 ARIA 的。

關於 ARIA ，這裡小科普一下： ARIA， 即 Accessible Rich Internet Application （ 加強無障礙網頁應用程式 ），它是 W3C 的無障礙網頁倡議（WAI）工作小組在倡導大家使用的無障礙網頁應用技術。它是一套獨立的規範，可以協助 Web 程式，尤其是使運用了大量前端技巧（ Ajax ）的網頁更具備可訪問性，通俗點說，讀屏裝置等不大能理解前端語義的裝置將可以瞭解到頁面的內容，這樣殘疾人士不僅可以瀏覽網頁甚至與頁面進行互動。

HTML select 元素會被自動增強為原生的挑選清單組件，若需要自訂樣式菜單，可以在 select 上添加 data-native-menu="false" 屬性。

若需要禁止選擇某一個選項，可以在選項的 option 標籤上添加 disabled="disabled"。

下面給出一個自訂菜單的例子：

<div data-role="fieldcontain">  <label for="select-choice-1" class="select">挑選清單</label>  <select data-native-menu="false" name="select-choice-1" id="select-choice-1">    <option value="12h">12小時</option>    <option value="1d">一天</option>    <option value="2d">兩天</option>    <option value="week">一周</option>  </select></div>

選擇按鈕

自訂菜單

若需要多項選擇，則可以在 select 標籤上添加 multiple="multiple" ，但原生的選擇菜單不支援該功能。對於多項選擇菜單，還有幾點要注意的：

（1）jQuery Mobile 會在菜單裡建立一個 jQuery Mobile header ，並在 header 的左邊添加一個關閉功能表按鈕。
（2）當使用者選擇兩個或以上選項時選擇按鈕右側會出現一個小表徵圖，表徵圖內顯示已選擇選項的個數。
（3）所有選擇的選項文本會顯示在選擇按鈕上，如果文字超出按鈕長度，會以省略符號代替多餘的內容。
（4）如果選項過多，菜單會以新頁面的形式顯示。
 
多項挑選清單執行個體

<div data-role="fieldcontain">  <label for="select-choice-2" class="select">多項挑選清單</label>  <select data-native-menu="false" multiple="multiple" name="select-choice-2" id="select-choice-2">    <option value="12h">12小時</option>    <option value="1d">一天</option>    <option value="2d">兩天</option>    <option value="week">一周</option>  </select></div>

另外我們還可以對選項進行分組，使用以下標籤標籤把同一組的選項包裹起來，其中 label 的值為該分組的標題。

<optgroup label="Group1"></optgroup> 

分組挑選清單執行個體

<div data-role="fieldcontain">  <label for="select-choice-3" class="select">分組挑選清單</label>  <select data-native-menu="false" name="select-choice-3" id="select-choice-3">    <optgroup label="Group1">      <option value="12h">12小時</option>      <option value="1d">一天</option>      <option value="2d">兩天</option>      <option value="week">一周</option>    </optgroup>    <optgroup label="Group2">      <option value="1m">一個月</option>      <option value="1q">一季度</option>      <option value="1y">一年</option>    </optgroup>  </select></div>

7.滑杆
在 jQuery Mobile 中，type="range" （ HTML5 屬性值 ） 的 input 元素會被增強為劃杆組件，該組件可以通過一些屬性值配置，value 設定滑杆的初始值， min 和 max 分別設定滑杆的下限和上限。另外滑杆組件還支援鍵盤響應，鍵盤的右箭頭，上箭頭，PAGE UP 鍵都可以增加滑杆的當前值，相應的，左鍵頭，下箭頭， PAGE DOWN 鍵可以減少滑杆的當前值，使用 Home 鍵和 End 鍵則可以設定當前值為最小值（下限）和最大值（上限）。

<div data-role="fieldcontain">  <label for="slider">滑杆</label>  <input type="range" name="slider" id="slider" value="0" min="0" max="100" /></div>

8.開關
具有兩個 option 的 select 元素添加 data-role="slider" 屬性後會被增強為 jQuery Mobile 的開關組件，用於表示布爾型資料（ ture or false ），拖動滑動條可以在“開”與“關”之間選擇，其中第一個 option 會被渲染成“開”的樣式。

<div data-role="fieldcontain">  <label for="slider">開關</label>  <select name="slider" id="slider" data-role="slider">    <option value="off">關閉</option>    <option value="on">開啟</option>  </select> </div>

三.提交表單
jQuery Mobile 自動採用 Ajax 的方式提交表單，預設的 method 為 get ，action 為當前頁面的相對路徑，在表單頁面和結果頁面之間會有平滑的轉場過渡，並且可以在表單上使用 data-transition 指定轉場效果。如果不想使用 Ajax 的方式提交表單，可以在全域事件禁用 Ajax （如何全域禁止 Ajax 並不在本文討論範圍，但會在本系列的後續文章中作詳細說明）或是在 form 上添加 data-ajax="false" 屬性，下面是 data-transition 的所有可取值。

slide 滑動（預設值，從左至右滑出）， slideup（從下至上滑出）， slidedown（從上至下滑出）， pop（從中心漸顯展開）， fade（漸顯）， flip（翻轉）。

四.主題樣式
關於主題樣式，在上一文中已經介紹過了，這裡引用一下：

“data-theme=“” 屬性， 所有的 jQuery Mobile 組件均支援該屬性，用於設定組件的顏色， 該屬性預設有五個值 a, b, c, d, e，分別代表由深到淺五種顏色，另外開發人員還可以通過在 CSS 裡添加相應的 Class 來自訂色彩。”

五.重新整理表單組件
由於 jQuery Mobile 對原生的 HTML 表單元素進行了渲染和追加元素，所以開發人員想通過 js 直接控製表單組件會比較麻煩（如使用了 Web SQL Database 儲存了資料在本地，在開啟網頁時希望通過 js 擷取資料並給表單組件賦值的情況），因此 jQuery Mobile 設計了用 js 給表單組件賦值的 API ，下面逐一舉例介紹：

1.選項按鈕
選擇第一個選項

$("input[type='radio']:first").attr("checked",true).checkboxradio("refresh");

2.複選按鈕
選擇第一個選項

$("input[type='checkbox']:first").attr("checked",true).checkboxradio("refresh");

3.挑選清單
選擇第一個選項，注意選項的索引是從1開始

var myselect = $('select#select-choice-1');myselect[0].selectedIndex = 1;myselect.selectmenu('refresh');

4.滑杆
設定值為40

$("input[type=range]").val(40).slider("refresh");

5.開關
選擇第一個選項

var myswitch = $('select#shakeToClear');myswitch[0].selectedIndex = 1;myswitch.slider('refresh');

 

註： refresh 方法不能直接使用在 Ajax 擷取的內容上，例如 js 要操縱的表單組件在另一個 Page， js 只在首頁載入時載入，這樣 jQuery Mobile 會出錯（不會有直接報錯，只是該段 js 會失效），我們可以使用 live('pagebeforeshow', function(){}) 方法使到該段 js 在過場到表單組件所在頁面時才載入（ pagebeforeshow 是 jQuery Mobile 事件之一，此外還有 pagebeforehide， pageshow， pagehide 三種方法）。下面給出一個例子：

$('#setting').live('pagebeforeshow', function(){    // 在頁面顯示時選擇菜單中第一個選項    var myselect = $('select#select-choice-1');    myselect[0].selectedIndex = 1;    myselect.selectmenu('refresh');});