重慶分公司
重慶分公司
jQueryMobile快速入門
what
jQuery Mobile是jQuery 在手機(jī)上和平板設(shè)備上的版本。它不僅會(huì)給主流移動(dòng)平臺(tái)帶來jQuery核心庫，而且會(huì)發(fā)布一個(gè)完整統(tǒng)一的jQuery移動(dòng)UI框架。支持全球主流的移動(dòng)平臺(tái)。
成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站建設(shè)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的平陸網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
使用
要使用 jQuery Mobile，首先需要在開發(fā)的界面中包含如下3個(gè)內(nèi)容：
結(jié)構(gòu)
一個(gè)jQuery Mobile頁面時(shí)你需要?jiǎng)?chuàng)建三塊基本內(nèi)容（頭，正文，尾），要在html文檔中的 head 標(biāo)簽內(nèi)填寫：
data-role="header" 創(chuàng)建頁面上方的工具欄（常用于標(biāo)題和搜索按鈕）
data-role="content" 定義頁面的內(nèi)容，比如文本、圖像、表單和按鈕，等等
data-role="footer" 創(chuàng)建頁面底部的工具欄
在jQuery Mobile中，可以在單一 HTML 文件中創(chuàng)建多個(gè)頁面。通過唯一的id來分隔每張頁面，在后面的代碼編寫中，推薦使用以上的構(gòu)建方法來建立頁面。
超鏈接
jQuery Mobile中的一個(gè)“page”結(jié)構(gòu)一般使用一個(gè)DIV來組織?，F(xiàn)在你可以使用前一節(jié)中的模板來創(chuàng)建一個(gè)包含三個(gè)跳轉(zhuǎn)到其他頁面的鏈接的導(dǎo)航頁面：
Menu
What vehicles do you like?
Cars
Trains
Planes
Page Footer
上面創(chuàng)建的導(dǎo)航頁是我們?cè)跒g覽器看到的第一個(gè)頁面，接下來我們?cè)偬砑尤齻€(gè)“page”，他們有不同的id：Cars， Planes，Trains。
Cars
We can add a list of cars
Page Footer
Trains
We can add a list of trains
Page Footer
Planes
We can add a list of planes
Page Footer
現(xiàn)在我們已經(jīng)建立完成了，去試一試吧
button
在jQuery Mobile中，按鈕可通過三種方式創(chuàng)建：
使用 < button > 元素
使用 < input > 元素
使用帶有 data-role="button" 的 < a >元素
按鈕
在 jQuery Mobile 中，按鈕會(huì)自動(dòng)樣式化，讓它們?cè)谝苿?dòng)設(shè)備上更具吸引力和可用性。我們推薦使用帶有 data-role="button" 的< a >元素在頁面間進(jìn)行鏈接，使用< input >或< button >元素進(jìn)行表單提交。
默認(rèn)情況下，按鈕占滿整個(gè)屏幕寬度。如果你想要一個(gè)僅是與內(nèi)容一樣寬的按鈕，或者如果您想要并排顯示兩個(gè)或多個(gè)按鈕，請(qǐng)?zhí)砑?data-inline="true"，如果想組合按鈕，可以使用 data-role="controlgroup" 屬性和 data-type="horizontal|vertical" 一起使用來規(guī)定是否水平或垂直組合按鈕。
訪問第二個(gè)頁面
按鈕 1
按鈕 2
按鈕 3
可折疊塊
可折疊塊允許您隱藏或顯示內(nèi)容 - 對(duì)于存儲(chǔ)部分信息很有用。如需創(chuàng)建一個(gè)可折疊的內(nèi)容塊，需要為容器添加 data-role="collapsible" 屬性。在容器（div）內(nèi)，添加一個(gè)標(biāo)題元素（H1-H6），后跟您想要進(jìn)行擴(kuò)展的 HTML 標(biāo)記，默認(rèn)情況下，內(nèi)容是被折疊起來的。如需在頁面加載時(shí)展開內(nèi)容，請(qǐng)使用 data-collapsed="false"：
點(diǎn)擊我 - 我可以折疊!
我是可折疊的內(nèi)容。
當(dāng)然可折疊塊允許嵌套，如下代碼：
點(diǎn)擊我 - 我可以折疊!
我是被展開的內(nèi)容。
點(diǎn)擊我 - 我是嵌套的可折疊塊！
我是嵌套的可折疊塊中被展開的內(nèi)容。
panel
jQuery Mobile中的面板會(huì)在屏幕的左側(cè)向右側(cè)劃出。可以通過指定id的div元素添加 data-role="panel" 屬性來創(chuàng)建面板。
面板標(biāo)題..
文本內(nèi)容..
panel標(biāo)記必須置于頭部、內(nèi)容、底部組成的頁面之前或之后。
面板頭部..
面板中的一些文本內(nèi)容..
匯智網(wǎng)
要訪問面板，需要?jiǎng)?chuàng)建一個(gè)指向面板的鏈接，點(diǎn)擊該鏈接即可打開面板：
打開面板
默認(rèn)情況下，面板會(huì)顯示在屏幕的左側(cè)。如果想讓面板出現(xiàn)在屏幕的右側(cè)，可以指定 data-position="right" 屬性。
打開面板
可以通過使用 data-display 屬性來控制面板的展示方式:
可以使用按鈕來關(guān)閉面板：僅需要在面板的div中添加 data-rel="close" 屬性。
面板頭部..
面板中的一些文本內(nèi)容..
關(guān)閉面板
更多示例內(nèi)容及在線練習(xí)參考：
http://www.hubwiz.com/course/5640589f9bb934437751117b/
當(dāng)前名稱：jQueryMobile快速入門
文章源于：http://weahome.cn/article/pgecss.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
