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

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

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

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

二.表單組件詳解
1.文本輸入框
在 jQuery Mobile 中，文本輸入框和文本輸入域都是使用標(biāo)準(zhǔn) HTML 標(biāo)記的，并且支持一些 HTML5 的 input 類型，如 password, email, tel, number, range 等更多的類型，而對于一些類型（ range, serach ） jQuery Mobile 則會將其轉(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)后的輸入框左邊有一個放大鏡圖標(biāo)，點(diǎn)擊觸發(fā)搜索，在輸入內(nèi)容后，輸入框的右邊還會出現(xiàn)一個叉的圖標(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)，并且只能選擇其中一個選項(xiàng)。在 jQuery Mobile 中，單選框組件不但在外觀上美化了，還增加了一些圖標(biāo)用于增強(qiáng)視覺反饋。 type="radio" 標(biāo)記的 input 元素會自動增強(qiáng)為單選框組件，但 jQuery Mobile 建議開發(fā)者使用一個帶 data-role="controlgroup" 屬性的 fieldset 標(biāo)簽包括選項(xiàng)，并且在 fieldset 內(nèi)增加一個 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)的，但可以同時選擇多個選項(xiàng)。與單選框相同，復(fù)選框組件也無需額外調(diào)用 data-role 屬性， type="checkbox" 標(biāo)記的 input 元素會自動增強(qiáng)為 jQuery Mobile 樣式，當(dāng)然 jQuery Mobile 也建議開發(fā)者使用一個帶 data-role="controlgroup" 屬性的 fieldset 標(biāo)簽包括選項(xiàng)，并且在 fieldset 內(nèi)增加一個 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 會使選項(xiàng)元素浮動并去掉圖標(biāo)。

6.選擇列表
選擇列表是基于 HTML select 元素的，具有原生菜單和自定義菜單兩種形式，原生菜單與自定義菜單都有一個樣式美化了的選擇按鈕，不同的是在自定義菜單中原生的 option 元素將被隱藏， jQuery Mobile 會生成一個由 CSS3 和 HTML5 構(gòu)成的菜單代替，并且這個菜單是 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 元素會被自動增強(qiáng)為原生的選擇列表組件，若需要自定義樣式菜單，可以在 select 上添加 data-native-menu="false" 屬性。

若需要禁止選擇某一個選項(xiàng)，可以在選項(xiàng)的 option 標(biāo)簽上添加 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>

選擇按鈕

自定義菜單

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

（1）jQuery Mobile 會在菜單里創(chuàng)建一個 jQuery Mobile header ，并在 header 的左邊添加一個關(guān)閉菜單按鈕。
（2）當(dāng)用戶選擇兩個或以上選項(xiàng)時選擇按鈕右側(cè)會出現(xiàn)一個小圖標(biāo)，圖標(biāo)內(nèi)顯示已選擇選項(xiàng)的個數(shù)。
（3）所有選擇的選項(xiàng)文本會顯示在選擇按鈕上，如果文字超出按鈕長度，會以省略號代替多余的內(nèi)容。
（4）如果選項(xiàng)過多，菜單會以新頁面的形式顯示。
 
多項(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小時</option>
    <option value="1d">一天</option>
    <option value="2d">兩天</option>
    <option value="week">一周</option>
  </select>
</div>

另外我們還可以對選項(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小時</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 元素會被增強(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)
具有兩個 option 的 select 元素添加 data-role="slider" 屬性后會被增強(qiáng)為 jQuery Mobile 的開關(guān)組件，用于表示布爾型數(shù)據(jù)（ ture or false ），拖動滑動條可以在“開”與“關(guān)”之間選擇，其中第一個 option 會被渲染成“開”的樣式。

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

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

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

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

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

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

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

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

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

3.選擇列表
選擇第一個選項(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)
選擇第一個選項(xiàng)

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

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

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

最新評論