構(gòu)建跨平臺(tái)APP：jQueryMobile移動(dòng)應(yīng)用實(shí)戰(zhàn)6、7章

1、跨平臺(tái)跨平臺(tái)APP：jQuery Mobile移動(dòng)應(yīng)用實(shí)戰(zhàn)第第6 6章、第章、第7 7章章第6章 按鈕的使用6.1 按鈕的使用6.2 為按鈕加入圖標(biāo)6.3 更加個(gè)性化的顯示圖標(biāo)6.4 自定義按鈕的圖標(biāo)6.5 播放器的頁面設(shè)計(jì)6.6 頭部欄中的按鈕圖標(biāo)6.7 一個(gè)按鈕也可以玩得很開心6.8 簡單的QWER6.9 方形的按鈕6.10 對話框中的按鈕6.1 簡單按鈕的使用代碼代碼效果效果data-role=“data-role=“* *”類型類型內(nèi)容內(nèi)容page頁面容器，其內(nèi)部的mobile元素將會(huì)繼承這個(gè)容器上所設(shè)置的屬性header頁面標(biāo)題容器，這個(gè)容器內(nèi)部可以包含文字、返回按鈕、功能按鈕等元素

2、footer頁面頁腳容器，這個(gè)容器內(nèi)部也可以包含文字、返回按鈕、功能按鈕等元素content頁面內(nèi)容容器，這是一個(gè)很寬容的容器，內(nèi)部可以包含標(biāo)準(zhǔn)的html元素和jQueryMobile元素controlgroup將幾個(gè)元素設(shè)置成一組，一般是幾個(gè)相同的元素類型fieldcontain區(qū)域包裹容器，用增加邊距和分割線的方式將容器內(nèi)的元素和容器外的元素明顯分隔navbar功能導(dǎo)航容器，通俗的講就是工具條listview列表展示容器，類似手機(jī)中聯(lián)系人列表的展示方式list-divider列表展示容器的表頭，用來展示一組列表的標(biāo)題，內(nèi)部不可包含鏈接button按鈕，將鏈接和普通按鈕的樣式設(shè)置成為jQue

3、ryMobile的風(fēng)格none阻止框架對元素進(jìn)行渲染，使元素以html原生的狀態(tài)顯示，主要用于form元素。6.2 為按鈕加入圖標(biāo)代碼代碼效果效果編號(hào)編號(hào)名稱名稱描述描述圖標(biāo)示例圖標(biāo)示例1左箭頭arrow-l2右箭頭arrow-r3上箭頭arrow-u4下箭頭arrow-d5刪除delete6添加plus7減少minus8檢查check9齒輪gear10前進(jìn)forward11后退back12網(wǎng)格grid13五角星star14警告alert15信息info16首頁home17搜索searchdata-icon=“data-icon=“* *”6.3 更加個(gè)性化的顯示圖標(biāo)源代碼源代碼效果效果dat

4、a-iconpos=“data-iconpos=“* *”類型類型內(nèi)容內(nèi)容left圖標(biāo)位于左側(cè)right圖標(biāo)位于右側(cè)top圖標(biāo)位于頂部bottom圖標(biāo)位于底部notext只顯示圖標(biāo)noicon只顯示內(nèi)容6.4 自定義按鈕的圖標(biāo)源代碼源代碼效果效果. .ui-icon-round ui-icon-round background-background-imageimage: :url(round.png)url(round.png); ; .ui-icon .ui-icon background-sizebackground-size: :18px 18px 26px26px; ; 6.5 播放

5、器的面板設(shè)計(jì)源代碼源代碼效果效果data-theme=“data-theme=“* *”主題按鈕主題按鈕在白色圖標(biāo)后的半透明的在白色圖標(biāo)后的半透明的黑色圓圈確保了在任何背黑色圓圈確保了在任何背景色下圖片都能夠清晰顯景色下圖片都能夠清晰顯示，也使它能很好的工作示，也使它能很好的工作在在Jquery MobileJquery Mobile主題系主題系統(tǒng)中。以下是一些在不同統(tǒng)中。以下是一些在不同主題樣式下圖標(biāo)按鈕的例主題樣式下圖標(biāo)按鈕的例子子A主題下的圖標(biāo)按鈕data-theme=a“B主題下的圖標(biāo)按鈕data-theme=“b“C主題下的圖標(biāo)按鈕data-theme=“c6.6 頭部欄中的按鈕圖標(biāo)

6、源代碼源代碼效果效果data-position=“fixed”data-position=“fixed”固定工具欄固定工具欄在瀏覽器支持的在瀏覽器支持的 CSS position: CSS position: fixedfixed ( (大多數(shù)的桌面瀏覽器大多數(shù)的桌面瀏覽器, iOS5+, , iOS5+, Android 2.2+, BlackBerry 6, Android 2.2+, BlackBerry 6, 和其和其他他) )。工具欄使用。工具欄使用“固定工具欄固定工具欄”插插件將被固定在視圖的頂部或底部，當(dāng)件將被固定在視圖的頂部或底部，當(dāng)頁面自由滾動(dòng)，固定欄始終浮動(dòng)在屏頁面自由滾動(dòng)

7、，固定欄始終浮動(dòng)在屏幕的頂部或者底部。在瀏覽器不支持幕的頂部或者底部。在瀏覽器不支持固定定位，工具欄將留在那固定的位固定定位，工具欄將留在那固定的位置（頁面的頂部或底部）。置（頁面的頂部或底部）。給頭部欄或底部欄設(shè)置這樣的行為，給頭部欄或底部欄設(shè)置這樣的行為，需要給工具欄的容器增加需要給工具欄的容器增加 data-data-position=fixedposition=fixed 屬性屬性。6.7 一個(gè)按鈕也可以玩得很開心源代碼源代碼效果效果6.8 簡單的QWER鍵盤源代碼源代碼效果效果值：值：true/falsetrue/false功能功能：規(guī)定按鈕規(guī)定按鈕是否有圓角是否有圓角值：值：tru

8、e/falsetrue/false功能功能：規(guī)定按鈕是否是行內(nèi)的：規(guī)定按鈕是否是行內(nèi)的data-inlinedata-inlinedata-cornersdata-corners6.9 方形的按鈕源代碼源代碼效果效果6.10 對話框中的按鈕源代碼源代碼效果效果功能：功能：定義定義單獨(dú)彈出對話框單獨(dú)彈出對話框data-reldata-rel第7章 表單元素的使用7.1 簡單的QQ登錄界面7.2 手機(jī)調(diào)查問卷7.3 精準(zhǔn)的進(jìn)度控制7.4 多彩的調(diào)色板7.5 熄燈，請閉眼7.6 做一道選擇題7.7 多項(xiàng)選擇題7.8 請問先生需要什么服務(wù)7.9 對話框中的表單7.1 簡單的QQ登錄界面源代碼源代碼效果

9、效果7.2 手機(jī)調(diào)查問卷源代碼源代碼效果效果功能：功能：多多行文本輸入框。行文本輸入框。功能：帶有文字的搜索框功能：帶有文字的搜索框text-areatext-areaplaceholderplaceholder功能：帶有兩個(gè)輸入字段和相關(guān)標(biāo)記的簡功能：帶有兩個(gè)輸入字段和相關(guān)標(biāo)記的簡單單HTMLHTML標(biāo)簽標(biāo)簽labellabel7.3 精準(zhǔn)的進(jìn)度控制源代碼源代碼效果效果7.4 多彩的調(diào)色板源代碼源代碼效果效果7.5 熄燈，請閉眼源代碼源代碼效果效果功能：包裹單個(gè)選項(xiàng)功能：包裹單個(gè)選項(xiàng)optionoptionselectselect功能：包含多個(gè)功能：包含多個(gè)optionoption7.6 做一道選擇題源代碼源代碼效果效果值：值：texttext功能：定義當(dāng)使用功能：定義當(dāng)使用時(shí)所使時(shí)所使用的標(biāo)注用的標(biāo)注功能：創(chuàng)建帶有選項(xiàng)的選擇列表功能：創(chuàng)建帶有選項(xiàng)的選擇列表labellabellabellabe