第16章-jQuery-Mobile頁面組件

16.1

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

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

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

16.2

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

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

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

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

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

16.3

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

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

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

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

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