一.表單組件基礎(chǔ)
1.組件簡(jiǎn)介
jQuery Mobile 中的表單組件是基于標(biāo)準(zhǔn) HTML ，然后在此基礎(chǔ)上增強(qiáng)樣式，因此即使瀏覽器不支持 jQuery Mobile 表單仍可正常使用。需要注意的是， jQuery Mobile 會(huì)把表單元素增強(qiáng)為觸摸設(shè)備很容易使用的形式，因此對(duì)于 iphone/ipad 與 Android 使用 Web 表單將會(huì)變得非常方便。

jQuery Mobile 的表單組件有以下幾種：
（1）文本輸入框， type="text" 標(biāo)記的 input 元素會(huì)自動(dòng)增強(qiáng)為 jQuery Mobile 樣式，無需額外添加 data-role 屬性。
（2）文本輸入域， textarea 元素會(huì)被自動(dòng)增強(qiáng)，無需額外添加 data-role 屬性，用于多行輸入文本，jQuery Mobile 會(huì)自動(dòng)增大文本域的高度，避免在移動(dòng)設(shè)備中很難找到滾動(dòng)條的情況。
（3）搜索輸入框， type="search" 標(biāo)記的 input 元素會(huì)自動(dòng)增強(qiáng)，無需額外添加 data-role 屬性，這是一個(gè)新的 HTML 元素，增強(qiáng)后的輸入框左邊有一個(gè)放大鏡圖標(biāo)，點(diǎn)擊觸發(fā)搜索，在輸入內(nèi)容后，輸入框的右邊還會(huì)出現(xiàn)一個(gè)叉的圖標(biāo)，點(diǎn)擊清除已輸入的內(nèi)容，非常方便。
（4）單選按鈕， type="radio" 標(biāo)記的 input 元素會(huì)自動(dòng)增強(qiáng)，無需額外添加 data-role 屬性。
（5）復(fù)選按鈕， type="checkbox" 標(biāo)記的 input 元素會(huì)自動(dòng)增強(qiáng)，無需額外添加 data-role 屬性。
（6）選擇列表， select 元素會(huì)被自動(dòng)增強(qiáng)，無需額外添加 data-role 屬性。
（7）劃桿， type="range" 標(biāo)記的 input 元素會(huì)自動(dòng)增強(qiáng)，無需額外添加 data-role 屬性。
（8）開關(guān)， select 元素添·加 data-role="slider" 屬性后會(huì)被增強(qiáng)會(huì) jQuery Mobile 的開關(guān)組件， select 中只能有兩個(gè) option。

2.組件使用規(guī)范
所有的表單組件，只要是需要與服務(wù)器傳送數(shù)據(jù)，都應(yīng)該包裹在一個(gè) form 標(biāo)簽內(nèi)，并且應(yīng)該指定好 form 的 action 和 method 屬性。當(dāng)然如果你使用的是 Web SQL Database 這類本地儲(chǔ)存，即數(shù)據(jù)并不需要與服務(wù)器傳送，可以不用 form 標(biāo)簽和 sumbit 提交。另外 form 的 id 需要在整站中唯一，由于 jQuery Mobile 使用 Ajax 導(dǎo)航，因此不同的 page 可以同時(shí)加載到一個(gè) DOM 中，因此 form id 必須整站唯一以保證每個(gè) DOM 的表單 id 都是不同的。

每一個(gè)表單元素應(yīng)該要有相應(yīng)的 label 對(duì)應(yīng)，label 的 for 值要與元素的 id 相同，使其在語義上相關(guān)，并且可以使用一個(gè)帶有 data-role="fieldcontain" 屬性的 div 或 fieldset 容器包裹， jQuery Mobile 會(huì)自動(dòng)在容器底部增加一條細(xì)邊框作為分隔。

二.表單組件詳解
1.文本輸入框
在 jQuery Mobile 中，文本輸入框和文本輸入域都是使用標(biāo)準(zhǔn) HTML 標(biāo)記的，并且支持一些 HTML5 的 input 類型，如 password, email, tel, number, range 等更多的類型，而對(duì)于一些類型（ range, serach ） jQuery Mobile 則會(huì)將其轉(zhuǎn)換為 text 的 input 類型，統(tǒng)一標(biāo)準(zhǔn)化其樣式，下面是文本輸入框的調(diào)用代碼及示圖。

<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.搜索輸入框
正如上文所述，增強(qiáng)后的輸入框左邊有一個(gè)放大鏡圖標(biāo)，點(diǎn)擊觸發(fā)搜索，在輸入內(nèi)容后，輸入框的右邊還會(huì)出現(xiàn)一個(gè)叉的圖標(biāo)，點(diǎn)擊清除已輸入的內(nèi)容。

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

4.單選框
單選框組件用于在頁面中提供一組選項(xiàng)，并且只能選擇其中一個(gè)選項(xiàng)。在 jQuery Mobile 中，單選框組件不但在外觀上美化了，還增加了一些圖標(biāo)用于增強(qiáng)視覺反饋。 type="radio" 標(biāo)記的 input 元素會(huì)自動(dòng)增強(qiáng)為單選框組件，但 jQuery Mobile 建議開發(fā)者使用一個(gè)帶 data-role="controlgroup" 屬性的 fieldset 標(biāo)簽包括選項(xiàng)，并且在 fieldset 內(nèi)增加一個(gè) legend 元素，用于表示該單選框的標(biāo)題。

<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">藍(lán)</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.復(fù)選框
復(fù)選框也是用于在頁面中提供一組選項(xiàng)的，但可以同時(shí)選擇多個(gè)選項(xiàng)。與單選框相同，復(fù)選框組件也無需額外調(diào)用 data-role 屬性， type="checkbox" 標(biāo)記的 input 元素會(huì)自動(dòng)增強(qiáng)為 jQuery Mobile 樣式，當(dāng)然 jQuery Mobile 也建議開發(fā)者使用一個(gè)帶 data-role="controlgroup" 屬性的 fieldset 標(biāo)簽包括選項(xiàng)，并且在 fieldset 內(nèi)增加一個(gè) legend 元素，用于表示該復(fù)選框的標(biāo)題。

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>復(fù)選框</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>

默認(rèn)的復(fù)選框組件是垂直排列選項(xiàng)的，我們可以在 fieldset 上添加 data-type="horizontal" 使其樣式改為水平按鈕組的樣式， jQuery Mobile 會(huì)使選項(xiàng)元素浮動(dòng)并去掉圖標(biāo)。

6.選擇列表
選擇列表是基于 HTML select 元素的，具有原生菜單和自定義菜單兩種形式，原生菜單與自定義菜單都有一個(gè)樣式美化了的選擇按鈕，不同的是在自定義菜單中原生的 option 元素將被隱藏， jQuery Mobile 會(huì)生成一個(gè)由 CSS3 和 HTML5 構(gòu)成的菜單代替，并且這個(gè)菜單是 ARIA 的。

關(guān)于 ARIA ，這里小科普一下： ARIA， 即 Accessible Rich Internet Application （ 加強(qiáng)無障礙網(wǎng)頁應(yīng)用程序 ），它是 W3C 的無障礙網(wǎng)頁倡議（WAI）工作小組在倡導(dǎo)大家使用的無障礙網(wǎng)頁應(yīng)用技術(shù)。它是一套獨(dú)立的規(guī)范，可以幫助 Web 程序，尤其是使運(yùn)用了大量前端技巧（ Ajax ）的網(wǎng)頁更具備可訪問性，通俗點(diǎn)說，讀屏設(shè)備等不大能理解前端語義的設(shè)備將可以了解到頁面的內(nèi)容，這樣殘疾人士不僅可以瀏覽網(wǎng)頁甚至與頁面進(jìn)行交互。

HTML select 元素會(huì)被自動(dòng)增強(qiáng)為原生的選擇列表組件，若需要自定義樣式菜單，可以在 select 上添加 data-native-menu="false" 屬性。

若需要禁止選擇某一個(gè)選項(xiàng)，可以在選項(xiàng)的 option 標(biāo)簽上添加 disabled="disabled"。

下面給出一個(gè)自定義菜單的例子：

<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小時(shí)</option>
    <option value="1d">一天</option>
    <option value="2d">兩天</option>
    <option value="week">一周</option>
  </select>
</div>

選擇按鈕

自定義菜單

若需要多項(xiàng)選擇，則可以在 select 標(biāo)簽上添加 multiple="multiple" ，但原生的選擇菜單不支持該功能。對(duì)于多項(xiàng)選擇菜單，還有幾點(diǎn)要注意的：

（1）jQuery Mobile 會(huì)在菜單里創(chuàng)建一個(gè) jQuery Mobile header ，并在 header 的左邊添加一個(gè)關(guān)閉菜單按鈕。
（2）當(dāng)用戶選擇兩個(gè)或以上選項(xiàng)時(shí)選擇按鈕右側(cè)會(huì)出現(xiàn)一個(gè)小圖標(biāo)，圖標(biāo)內(nèi)顯示已選擇選項(xiàng)的個(gè)數(shù)。
（3）所有選擇的選項(xiàng)文本會(huì)顯示在選擇按鈕上，如果文字超出按鈕長(zhǎng)度，會(huì)以省略號(hào)代替多余的內(nèi)容。
（4）如果選項(xiàng)過多，菜單會(huì)以新頁面的形式顯示。
 
多項(xiàng)選擇列表實(shí)例

<div data-role="fieldcontain">
  <label for="select-choice-2" class="select">多項(xiàng)選擇列表</label>
  <select data-native-menu="false" multiple="multiple" name="select-choice-2" id="select-choice-2">
    <option value="12h">12小時(shí)</option>
    <option value="1d">一天</option>
    <option value="2d">兩天</option>
    <option value="week">一周</option>
  </select>
</div>

另外我們還可以對(duì)選項(xiàng)進(jìn)行分組，使用以下標(biāo)簽標(biāo)簽把同一組的選項(xiàng)包裹起來，其中 label 的值為該分組的標(biāo)題。

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

分組選擇列表實(shí)例

<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小時(shí)</option>
      <option value="1d">一天</option>
      <option value="2d">兩天</option>
      <option value="week">一周</option>
    </optgroup>
    <optgroup label="Group2">
      <option value="1m">一個(gè)月</option>
      <option value="1q">一季度</option>
      <option value="1y">一年</option>
    </optgroup>
  </select>
</div>

7.滑桿
在 jQuery Mobile 中，type="range" （ HTML5 屬性值 ） 的 input 元素會(huì)被增強(qiáng)為劃桿組件，該組件可以通過一些屬性值配置，value 設(shè)置滑桿的初始值， min 和 max 分別設(shè)置滑桿的下限和上限。另外滑桿組件還支持鍵盤響應(yīng)，鍵盤的右箭頭，上箭頭，Page Up 鍵都可以增加滑桿的當(dāng)前值，相應(yīng)的，左鍵頭，下箭頭， Page Down 鍵可以減少滑桿的當(dāng)前值，使用 Home 鍵和 End 鍵則可以設(shè)置當(dāng)前值為最小值（下限）和最大值（上限）。

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

8.開關(guān)
具有兩個(gè) option 的 select 元素添加 data-role="slider" 屬性后會(huì)被增強(qiáng)為 jQuery Mobile 的開關(guān)組件，用于表示布爾型數(shù)據(jù)（ ture or false ），拖動(dòng)滑動(dòng)條可以在“開”與“關(guān)”之間選擇，其中第一個(gè) option 會(huì)被渲染成“開”的樣式。

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

三.提交表單
jQuery Mobile 自動(dòng)采用 Ajax 的方式提交表單，默認(rèn)的 method 為 get ，action 為當(dāng)前頁面的相對(duì)路徑，在表單頁面和結(jié)果頁面之間會(huì)有平滑的轉(zhuǎn)場(chǎng)過渡，并且可以在表單上使用 data-transition 指定轉(zhuǎn)場(chǎng)效果。如果不想使用 Ajax 的方式提交表單，可以在全局事件禁用 Ajax （如何全局禁止 Ajax 并不在本文討論范圍，但會(huì)在本系列的后續(xù)文章中作詳細(xì)說明）或是在 form 上添加 data-ajax="false" 屬性，下面是 data-transition 的所有可取值。

slide 滑動(dòng)（默認(rèn)值，從左至右滑出）， slideup（從下至上滑出）， slidedown（從上至下滑出）， pop（從中心漸顯展開）， fade（漸顯）， flip（翻轉(zhuǎn)）。

四.主題樣式
關(guān)于主題樣式，在上一文中已經(jīng)介紹過了，這里引用一下：

“data-theme=“” 屬性， 所有的 jQuery Mobile 組件均支持該屬性，用于設(shè)置組件的顏色， 該屬性默認(rèn)有五個(gè)值 a, b, c, d, e，分別代表由深到淺五種顏色，另外開發(fā)者還可以通過在 CSS 里添加相應(yīng)的 Class 來自定義顏色?！?/p>

五.刷新表單組件
由于 jQuery Mobile 對(duì)原生的 HTML 表單元素進(jìn)行了渲染和追加元素，所以開發(fā)者想通過 js 直接控制表單組件會(huì)比較麻煩（如使用了 Web SQL Database 儲(chǔ)存了數(shù)據(jù)在本地，在打開網(wǎng)頁時(shí)希望通過 js 獲取數(shù)據(jù)并給表單組件賦值的情況），因此 jQuery Mobile 設(shè)計(jì)了用 js 給表單組件賦值的 API ，下面逐一舉例介紹：

1.單選按鈕
選擇第一個(gè)選項(xiàng)

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

2.復(fù)選按鈕
選擇第一個(gè)選項(xiàng)

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

3.選擇列表
選擇第一個(gè)選項(xiàng)，注意選項(xiàng)的索引是從1開始

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

4.滑桿
設(shè)置值為40

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

5.開關(guān)
選擇第一個(gè)選項(xiàng)

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

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

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

最新評(píng)論