第16章-jQuery-Mobile頁面組件

16.1

jQueryMobile按鈕組件jQueryMobile中的按鈕由兩類元素形成：一類是超鏈接<a>標(biāo)簽元素，在<a>標(biāo)簽中添加data-role="button"屬性設(shè)置，jQueryMobile便會自動為該元素添加相應(yīng)的樣式外觀，形成可單擊的按鈕形狀；另一類是在表單中，在<input>標(biāo)簽中設(shè)置type屬性為sumbit、reset、button或image，都會形成相應(yīng)的按鈕表單元素。內(nèi)聯(lián)按鈕在jQueryMobile中，被樣式化的按鈕元素默認(rèn)都是塊狀，并且自動填充頁面寬度。如果要取消默認(rèn)效果，只需要在按鈕的元素中添加data-inline屬性，將該屬性值設(shè)置為true，該按鈕將會根據(jù)其內(nèi)容中文字和圖片的寬度自動進(jìn)行縮放，形成一個(gè)緊湊型的按鈕。實(shí)戰(zhàn)練習(xí)——在頁面中添加內(nèi)聯(lián)按鈕

最終文件：光盤\最終文件\第16章\16-1-1.html視頻：光盤\視頻\第16章\16-1-1.swf按鈕組在jQueryMobile中，多個(gè)按鈕不但能以內(nèi)聯(lián)的形式顯示，還可以全部放入按鈕組，即controlgroup容器中，按照垂直或水平方向展現(xiàn)按鈕列表。默認(rèn)情況下，按鈕組是以垂直方向展示一組按鈕列表，可以通過給按鈕組容器添加data-type屬性來修改按鈕組默認(rèn)的顯示方式。實(shí)戰(zhàn)練習(xí)——在頁面中添加按鈕組

垂直排列按鈕組水平排列按鈕組最終文件：光盤\最終文件\第16章\16-1-2.html視頻：光盤\視頻\第16章\16-1-2.swf

16.2

jQueryMobile表單組件在HTML中表單占有十分重要的地位。針對表單，jQueryMobile提供了一套完全基于HTML原始代碼且適合觸摸操作的框架。在該框架下，所有的表單元素先由原始的代碼升級為jQueryMobile組件，然后調(diào)用各自組件提供的方法與屬性，實(shí)現(xiàn)在jQueryMobile下表單元素的各種操作。文本輸入組件在jQueryMobile中，文本輸入組件包括文本域和HTML5中新增的輸入類型。文本輸入組件使用標(biāo)準(zhǔn)的HTML原始元素，借助jQueryMobile的渲染效果，使其更易于觸摸型使用。另外，HTML5中新增的輸入類型（如number類型），在jQueryMobile中會被顯示成數(shù)字輸入框，還在輸入框的最右端有兩個(gè)可調(diào)節(jié)大小的“+”和“-”號按鈕，方便移動終端的用戶修改輸入框中的數(shù)字。實(shí)戰(zhàn)練習(xí)——添加不同類型的文本輸入組件滑塊如果在<input>標(biāo)簽中設(shè)置type屬性值為range，則可以在頁面中創(chuàng)建一個(gè)滑塊組件。在jQueryMobile中，滑塊組件由兩部分組成，一部分是可調(diào)整大小的數(shù)字輸入框，另一部分是可拖動修改輸入框數(shù)字的滑動條。實(shí)戰(zhàn)練習(xí)——添加滑塊改變頁面元素背景顏色

最終文件：光盤\最終文件\第16章\16-2-1.html視頻：光盤\視頻\第16章\16-2-1.swf最終文件：光盤\最終文件\第16章\16-2-2.html視頻：光盤\視頻\第16章\16-2-2.swf翻轉(zhuǎn)切換開關(guān)在jQueryMobile中，在<select>標(biāo)簽中設(shè)置data-role屬性值為slider，可以將該下拉列表元素中的兩個(gè)<option>選項(xiàng)轉(zhuǎn)變?yōu)橐粋€(gè)翻轉(zhuǎn)切換開關(guān)。第一個(gè)<option>選項(xiàng)為“開”，取值為true或1；第二個(gè)<option>選項(xiàng)為“關(guān)”，取值為false或0。它是移動設(shè)備上常用的UI元素之一，常用于一些系統(tǒng)默認(rèn)值的設(shè)置。單選按鈕使用<fieldset>標(biāo)簽，并在該標(biāo)簽中設(shè)置data-role屬性值為controlgroup，使用該標(biāo)簽包含所有的<input>和<label>元素，這樣可以以整個(gè)組的形式樣式化容器中的全部標(biāo)簽；然后，在組成員結(jié)構(gòu)中，在每個(gè)<label>標(biāo)簽中添加for屬性設(shè)置，對應(yīng)一個(gè)類型為radio的<input>元素。為了便于用戶觸摸，這些<label>元素將會被拉長。實(shí)戰(zhàn)練習(xí)——使用單選按鈕制作投票表單

最終文件：光盤\最終文件\第16章\16-2-4.html視頻：光盤\視頻\第16章\16-2-4.swf16.2.5復(fù)選框與單選按鈕相類似，使用<fieldset>標(biāo)簽，并在該標(biāo)簽中添加data-role=”controlgroup”屬性設(shè)置，包裹多個(gè)復(fù)選框。通常情況下，多個(gè)復(fù)選框選項(xiàng)組合成的復(fù)選框組放置在標(biāo)題下面，通過jQueryMobile固有的樣式自動刪除各個(gè)復(fù)選框選項(xiàng)間的間距，使其看起來更像一個(gè)整體。實(shí)戰(zhàn)練習(xí)——使用復(fù)選框制作調(diào)查表單選擇菜單與單選按鈕和復(fù)選框不同，使用<selece>標(biāo)簽形成的選擇菜單在jQueryMobile中樣式發(fā)生了很大的變化。它分為兩種類別：一種是原生菜單類型，這種類型繼續(xù)保持了原來PC端瀏覽器的樣式，單擊右端的向下箭頭出現(xiàn)一個(gè)下拉列表，選擇其中的某一選項(xiàng)。另一種類型是自定義菜單類型，該類型專用于移動設(shè)備的瀏覽器顯示，使用該類型時(shí)，jQueryMobile中提供的自定義菜單樣式將取代原始選擇菜單的樣式，使選擇菜單在顯示時(shí)發(fā)生變化。實(shí)戰(zhàn)練習(xí)——使用自定義類型選擇菜單

最終文件：光盤\最終文件\第16章\16-2-5.html視頻：光盤\視頻\第16章\16-2-5.swf

最終文件：光盤\最終文件\第16章\16-2-6.html視頻：光盤\視頻\第16章\16-2-6.swf多項(xiàng)選擇菜單與原生的頁面中的選擇菜單不同，jQueryMobile中的選擇菜單還可以通過設(shè)置multiple屬性，實(shí)現(xiàn)菜單的多項(xiàng)選擇。如果將某個(gè)選擇菜單的multiple屬性值設(shè)置為true，單擊該按鈕彈出的菜單對話框中，全部菜單選項(xiàng)的右側(cè)將會出現(xiàn)一個(gè)可勾選的復(fù)選框，用戶通過單擊該復(fù)選框，可以選中任意多個(gè)選項(xiàng)。

16.3

jQueryMobile列表組件在jQueryMobile中，如果在<ul>標(biāo)簽中設(shè)置data-role屬性值為listview，便可以創(chuàng)建一個(gè)無序列表，并且將會使用jQueryMobile的默認(rèn)樣式對列表進(jìn)行渲染顯示。默認(rèn)情況下，jQueryMobile頁面中的列表寬度與屏幕進(jìn)行等比例縮放，在列表選項(xiàng)的最右側(cè)會顯示一個(gè)帶箭頭的圖標(biāo)。另外，列表還有許多種類，如基本列表、嵌套列表、編號列表等，同時(shí)，還可以對列表中選項(xiàng)的內(nèi)容進(jìn)行分割與格式化。

基本列表在jQueryMobile頁面中，一個(gè)<ul>元素一旦被定義為列表，jQueryMobile將會使用默認(rèn)的樣式對該列表進(jìn)行渲染顯示，列表中的選項(xiàng)非常易于觸摸。如果單擊列表選項(xiàng)，將會通過AJAX的方式異步請求一個(gè)對應(yīng)的URL地址，并在DOM中創(chuàng)建一個(gè)新的頁面，借助默認(rèn)的切換效果進(jìn)入該頁面中。實(shí)戰(zhàn)練習(xí)——創(chuàng)建jQueryMobile頁面基本列表

有序列表與<ul>無序列表元素相對應(yīng)，使用<ol>標(biāo)簽可以創(chuàng)建一個(gè)有序的列表。在有序列表中，借助排列的編號順序可以展現(xiàn)一種有序的列表效果。在有序列表顯示時(shí)，jQueryMobile會優(yōu)先使用CSS樣式給列表添加編號。如果瀏覽器不支持這種CSS樣式，jQueryMobile將會調(diào)用JavaScript中的方法向列表寫入編號，以確保有序列表的效果可以兼容各種瀏覽器。最終文件：光盤\最終文件\第16章\16-3-1.html視頻：光盤\視頻\第16章\16-3-1.swf分割列表選項(xiàng)在jQueryMobile的列表中，有時(shí)需要對選項(xiàng)內(nèi)容做兩個(gè)不同的操作，這時(shí)，需要對選項(xiàng)中的鏈接按鈕進(jìn)行分割。實(shí)現(xiàn)分割的方法非常簡單，只需要在<li>標(biāo)簽中再添加一個(gè)<a>標(biāo)簽，便可以在頁面中實(shí)現(xiàn)分割的效果。

實(shí)戰(zhàn)練習(xí)——實(shí)現(xiàn)列表選項(xiàng)的分割對列表項(xiàng)進(jìn)行分類實(shí)現(xiàn)列表項(xiàng)分組的方法很簡單，只需要在分組的位置增加一個(gè)<li>元素，并在該標(biāo)簽中添加data-role="list-divider"屬性設(shè)置，表示該<li>標(biāo)簽是一個(gè)分組列表項(xiàng)。默認(rèn)情況下，普通列表項(xiàng)的主題色為“淺灰色”，分組列表項(xiàng)的主題色為“灰色”，兩者通過主題顏色的區(qū)別，形成層次上的包含效果。實(shí)戰(zhàn)練習(xí)——實(shí)現(xiàn)列表選項(xiàng)的分組

最終文件：光盤\最終文件\第16章\16-3-3.html視頻：光盤\視頻\第16章\16-3-3.swf最終文件：光盤\最終文件\第16章\16-3-4.html視頻：光盤\視頻\第16章\16-3-4.swf圖標(biāo)與計(jì)數(shù)器如果將圖片作為列表項(xiàng)的圖標(biāo)使用，則需要為該元素添加類別屬性ui-li-icon，才能在列表的最左側(cè)正常顯示該圖標(biāo)。另外，如果想在列表項(xiàng)中的最右側(cè)顯示一個(gè)計(jì)數(shù)器，只需要添加一個(gè)<span>標(biāo)簽，并在該標(biāo)簽中添加類別屬性ui-li-count即可。實(shí)戰(zhàn)練習(xí)——為列表項(xiàng)添加圖標(biāo)和計(jì)數(shù)器列表項(xiàng)內(nèi)容格式化處理jQueryMobile支持以HTML語義化的元素（如<span>、<h>、<p>）顯示列表中所需的內(nèi)容格式。通常情況下，使用<h1>至<h6>標(biāo)簽來突顯列表項(xiàng)中顯示的內(nèi)容，使用<p>標(biāo)簽減弱列表項(xiàng)中顯示的內(nèi)容，兩者結(jié)合，可以使列表項(xiàng)中顯示的內(nèi)容具有層次關(guān)系。如果要增加補(bǔ)充信息，例如日期，可以在顯示的<p>標(biāo)簽中添加類別屬性ui-li-aside。實(shí)戰(zhàn)練習(xí)——格式化列表項(xiàng)內(nèi)容最終文件：光盤\最終文件\第16章\16-3-5.html視頻：光盤\視頻\第16章\1