一.表單組件基礎
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'); });