【初探移动前端开发03】jQuery Mobile（上）
生活随笔
收集整理的這篇文章主要介紹了
【初探移动前端开发03】jQuery Mobile（上）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
前言
到目前為止，我打了幾天醬油了，這幾天落實了工作，并且看了一部電視連續(xù)劇（陳道明-手機），我很少看連續(xù)劇了，但是手機質(zhì)量很高啊，各位可以看看。
我們今天先學(xué)習(xí)一下jquery mobile的基礎(chǔ)知識，然后逐步進(jìn)入移動開發(fā)吧。
我們這里再來看看響應(yīng)式布局，我們是一個頁面可以在不同的設(shè)備上使用，其實這在某些方面上是不太合適的。
因為我們移動端的事件不太一致，可能鼠標(biāo)操作很方便的，用手就不行了，所以為移動端出單獨的網(wǎng)頁還是很有必要的。
文中測試鏈接請使用手機打開。
什么是jQuery Mobile？
jquery mobile是jquery在移動設(shè)備上的版本，他是基于jquery、HTML5、CSS3構(gòu)建的，他提供了一個豐富的交互性強的接口用以兼容不同移動平臺。
于是我們?nèi)ハ螺d一番：
我這里就直接下載的這個壓縮文件了，完了我們看看他有些什么東西，我們這個還是要依賴jquery的，所以還是準(zhǔn)備一個吧。
這個東東是個好東西哦，他還有配套的樣式呢，依賴他我們可以開發(fā)一套不錯的手機應(yīng)用呢。
自定義屬性
在jquery mobile中，是使用自定義屬性驅(qū)動頁面的（data-....），比如：
data-role
定義元素在頁面中的角色，該屬性允許定義不同的組件元素及頁面視圖：data-role="page"
data-title
定義jquery mobile視圖頁面標(biāo)題
data-transition
定義視圖切換的動畫效果
data-rel
定義具有浮動效果的視圖
data-theme
指定元素或者組件內(nèi)主題樣式風(fēng)格
data-icon
在元素內(nèi)增加小圖標(biāo)
data-iconpos
定義小圖標(biāo)位置
data-inline
指定按鈕根據(jù)內(nèi)容自適應(yīng)其長度
data-type
定義分組按鈕水平或者垂直方向排布
data-rel
定義具有特定功能的元素，例如data-rel="back"返回按鈕
data-add-back-btn
指定視圖頁面自動在頁眉左側(cè)添加返回按鈕
data-back-btn-text
指定由石頭頁面自動創(chuàng)建的返回按鈕的文本內(nèi)容，該屬性的使用通常都需要和data-add-back-btn配合
data-position
該屬性是實現(xiàn)在滑動屏幕時工具欄的顯示和隱藏狀態(tài)
data-fullscreen
用于指定全屏視圖頁面
data-native-menu
指定下拉選擇功能采用平臺內(nèi)置的選擇器
data-placeholder
設(shè)置下拉選擇功能的占位符
data-inset
實現(xiàn)內(nèi)嵌列表功能
data-split-theme
設(shè)置列表右側(cè)圖標(biāo)的主題樣式風(fēng)格
data-filter
開啟列表過濾功能
搞了這么多自定義屬性，我們也不知道什么是什么，所以不如來試一試吧。
頁面與視圖
頁面與視圖作為移動web應(yīng)用程序最重要的用戶界面之一，他主要承擔(dān)整個web應(yīng)用程序的界面呈現(xiàn)工作。
jquery mobile提供一套自定義元素屬性用于搭建各種頁面和視圖。
復(fù)制代碼 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 ? ? <title></title> 5 ? ? <meta name="viewport" content="width=device-width, initial-scale=1"> 6 ? ? <link href="jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css" /> 7 ? ? <script src="jquery-1.7.1.js" type="text/javascript"></script> 8 ? ? <script src="jquery.mobile-1.3.1.js" type="text/javascript"></script> 9 </head> 10 <body> 11 ? ? <div data-role="page"> 12 ? ? ? ? <div data-role="header">頁頭 13 ? ? ? ? </div> 14 ? ? ? ? <div data-role="content">內(nèi)容 15 ? ? ? ? </div> 16 ? ? ? ? <div data-role="footer">頁腳 17 ? ? ? ? </div> 18 ? ? </div> 19 </body> 20 </html> 復(fù)制代碼 http://sandbox.runjs.cn/show/itndsvbq
不要說還是有點感覺的。。。
我們在實例中使用div元素作為視圖頁面的布局元素但是我們這里改為html的元素更加好：
復(fù)制代碼 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 ? ? <title></title> 5 ? ? <meta name="viewport" content="width=device-width, initial-scale=1"> 6 ? ? <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"? href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css"> 7 ? ? <script id="jquery_182" type="text/javascript" class="library"? src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script> 8 ? ? <script id="jquerymobile_120" type="text/javascript" class="library"? src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script> 9 </head> 10 <body> 11 ? ? <section data-role="page"> 12 ? ? ? ? <header data-role="header">頁頭 13 ? ? ? ? </header> 14 ? ? ? ? <article data-role="content">內(nèi)容 15 ? ? ? ? </article> 16 ? ? ? ? <footer data-role="footer">頁腳 17 ? ? ? ? </footer> 18 ? ? </section> 19 </body> 20 </html> 復(fù)制代碼 多視圖web頁面
前面只有一個視圖，我們現(xiàn)在來看看多視圖頁面怎么處理：
復(fù)制代碼 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 ? ? <title></title> 5 ? ? <meta name="viewport" content="width=device-width, initial-scale=1"> 6 ? ? <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"? 7 ? ? href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css"> 8 ? ? <script id="jquery_182" type="text/javascript" class="library"? 9 ? ? src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script> 10 ? ? <script id="jquerymobile_120" type="text/javascript" class="library"? 11 ? ? src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script> 12 </head> 13 <body> 14 ? ? <section data-role="page" id="v1"> 15 ? ? ? ? <header data-role="header">視圖一 16 ? ? ? ? </header> 17 ? ? ? ? <article data-role="content"> 18 ? ? ? ? ? ? <a href="#v2">去視圖二</a> 19 ? ? ? ? </article> 20 ? ? ? ? <footer data-role="footer">頁腳 21 ? ? ? ? </footer> 22 ? ? </section> 23 ? ? ?<section data-role="page" id="v2"> 24 ? ? ? ? <header data-role="header">視圖二 25 ? ? ? ? </header> 26 ? ? ? ? <article data-role="content"> 27 ? ? ? ? ? ? <a href="#v1">去視圖1</a> 28 ? ? ? ? </article> 29 ? ? ? ? <footer data-role="footer">頁腳 30 ? ? ? ? </footer> 31 ? ? </section> 32 </body> 33 </html> 復(fù)制代碼 http://sandbox.runjs.cn/show/l4vejd6v
我們點擊超鏈接可以在視圖一與視圖二切換，你會發(fā)現(xiàn)還有一點點動畫效果呢！！！
PS：在此若是設(shè)置了data-title將改變手機上title的標(biāo)題
動畫
我們可以設(shè)置6鐘動畫效果：
復(fù)制代碼 ① Slide 從右到左切換 ② Slideup 從下到上切換 ③ Slidedown 從上到下切換 ④ Pop彈出框方式打開 ⑤ Fade 漸變褪色方式 ⑥ Flip飛入飛出方式 復(fù)制代碼 這里我就不截圖了，我私下試試去。
<a href="#v1" data-transition="pop">去視圖1</a> 效果感覺不錯哦！！！
dialog對話框
只要在標(biāo)簽的data-rel設(shè)置了dialog屬性，視圖就具有dialog浮動層效果。
<a href="#v2" data-rel="dialog">去視圖二</a>
這里有點表現(xiàn)不佳，我們暫時不管他。
頁面主題
<section data-role="page" id="v1" data-theme="a"> 關(guān)于自定義屬性的東西暫時寫到這里，我們來看看我們比較重要的按鈕。
按鈕
按鈕在移動web應(yīng)用程序中式非常重要的用戶界面組件，主要用作為用戶提供各種操作入口和視圖交互功能，我們的jquery mobile提供了很多不錯的按鈕。
復(fù)制代碼 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 ? ? <title></title> 5 ? ? <meta name="viewport" content="width=device-width, initial-scale=1"> 6 ? ? <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"? 7 ? ? href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css"> 8 ? ? <script id="jquery_182" type="text/javascript" class="library"? 9 ? ? src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script> 10 ? ? <script id="jquerymobile_120" type="text/javascript" class="library"? 11 ? ? src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script> 12 </head> 13 <body> 14 ? <div data-role="button">我是按鈕</div> 15 </body> 16 </html> 復(fù)制代碼
于是我們的按鈕就出現(xiàn)啦，在頁面上獨占一行。
input 中button、submit等也都變成了這個樣式了
小圖標(biāo)
jquery mobile提供了一套小圖標(biāo)：
圖標(biāo)太多，我這里簡單列兩個：
delete：刪除，data-icon="delete"
plus：加號，data-icon="plus"
PS:設(shè)置data-iconpos="notext"便可以只要圖標(biāo)不要文字
1 ? <div data-role="button" data-icon="delete">刪除</div> 2 ? <div data-role="button" data-icon="delete" data-iconpos="notext">刪除</div> 3 ? <div data-role="button" data-icon="delete" data-iconpos="right">刪除</div> http://sandbox.runjs.cn/show/xd9axexu
若是系統(tǒng)提供的圖標(biāo)不能滿足條件的話，便可以自定義圖標(biāo)
data-icon="myapp-email" myapp-email就是自定義圖標(biāo)的名稱（需要上傳） css中對應(yīng)的樣式是.ui-icon-myapp-email 自定義圖標(biāo)大小是18*18，建議png-8 按鈕分組
復(fù)制代碼 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 ? ? <title></title> 5 ? ? <meta name="viewport" content="width=device-width, initial-scale=1"> 6 ? ? <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"? 7 ? ? href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css"> 8 ? ? <script id="jquery_182" type="text/javascript" class="library"? 9 ? ? src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script> 10 ? ? <script id="jquerymobile_120" type="text/javascript" class="library"? 11 ? ? src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script> 12 </head> 13 <body> 14 ? ? <div data-role="controlgroup" data-type="horizontal"> 15 ? ? ? ? <div data-role="button" data-icon="plus"> 16 ? ? ? ? ? ? 添加</div> 17 ? ? ? ? <div data-role="button" data-icon="delete"> 18 ? ? ? ? ? ? 刪除</div> 19 ? ? ? ? <div data-role="button" data-icon="refresh"> 20 ? ? ? ? ? ? 修改</div> 21 ? ? </div> 22 ? ? <div data-role="controlgroup" data-type="horizontal"> 23 ? ? ? ? <div data-role="button" data-icon="plus"> 24 ? ? ? ? ? ? 添加</div> 25 ? ? ? ? <div data-role="button" data-icon="delete"> 26 ? ? ? ? ? ? 刪除</div> 27 ? ? ? ? <div data-role="button" data-icon="refresh"> 28 ? ? ? ? ? ? 修改</div> 29 ? ? </div> 30 </body> 31 </html> 復(fù)制代碼 http://sandbox.runjs.cn/show/u7cydmrv
感覺還不錯的說，這里還可以為各個按鈕設(shè)置主題，看起來就更加有分別了。
Bar 工具欄
工具欄也是一重要組件，我們這里結(jié)合前面的按鈕來完成一完整的工具欄。
jquery mobile提供兩組工具欄：
Headers bar 充當(dāng)視圖頁面的標(biāo)題作用，在一般情況下header bar位于頁面的頂部，一般包含2按鈕 Footer bar 這個工具欄一般位于尾部，就是與header bar對應(yīng)的東東 初體驗：
復(fù)制代碼 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 ? ? <title></title> 5 ? ? <meta name="viewport" content="width=device-width, initial-scale=1"> 6 ? ? <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"? 7 ? ? href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css"> 8 ? ? <script id="jquery_182" type="text/javascript" class="library"? 9 ? ? src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script> 10 ? ? <script id="jquerymobile_120" type="text/javascript" class="library"? 11 ? ? src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script> 12 </head> 13 <body> 14 <div data-role="page"> 15 ? <header data-role="header"> 16 ? ? <h1>header bar</h1> 17 ? </header> 18 ? <div>內(nèi)容區(qū)域</div> 19 ? <footer data-role="footer"> 20 ? ? <h2>footer bar</h2> 21 ? </footer> 22 </div> 23 </body> 24 </html> 復(fù)制代碼
我們在此基礎(chǔ)上改下：
復(fù)制代碼 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 ? ? <title></title> 5 ? ? <meta name="viewport" content="width=device-width, initial-scale=1"> 6 ? ? <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"? 7 ? ? href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css"> 8 ? ? <script id="jquery_182" type="text/javascript" class="library"? 9 ? ? src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script> 10 ? ? <script id="jquerymobile_120" type="text/javascript" class="library"? 11 ? ? src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script> 12 </head> 13 <body> 14 <div data-role="page"> 15 ? <header data-role="header"> 16 ? ? <h1>header bar</h1> 17 ? </header> 18 ? <div>內(nèi)容區(qū)域</div> 19 ? <footer data-role="footer"> 20 ? ? <div data-role="controlgroup" data-type="horizontal" > 21 ? ? ? ? <div data-role="button" data-icon="plus" data-theme="a"> 22 ? ? ? ? ? ? 添加</div> 23 ? ? ? ? <div data-role="button" data-icon="delete" data-theme="b"> 24 ? ? ? ? ? ? 刪除</div> 25 ? ? ? ? <div data-role="button" data-icon="refresh" data-theme="c"> 26 ? ? ? ? ? ? 修改</div> 27 ? ? </div> 28 ? </footer> 29 </div> 30 </body> 31 </html> 復(fù)制代碼 http://sandbox.runjs.cn/show/icqp5f8v
導(dǎo)航工具條
navbar是非常有用的，他提供不同數(shù)量的按鈕組合，一般位于header或者footer中
復(fù)制代碼 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 ? ? <title></title> 5 ? ? <meta name="viewport" content="width=device-width, initial-scale=1"> 6 ? ? <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"? 7 ? ? href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css"> 8 ? ? <script id="jquery_182" type="text/javascript" class="library"? 9 ? ? src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script> 10 ? ? <script id="jquerymobile_120" type="text/javascript" class="library"? 11 ? ? src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script> 12 </head> 13 <body> 14 <div data-role="page"> 15 ? <header data-role="header"> 16 ? ? <h1>header bar</h1> 17 ? </header> 18 ? <div>內(nèi)容區(qū)域</div> 19 ? <footer data-role="footer"> 20 ? ? <nav data-role="navbar"> 21 ? ? ? ? <ul> 22 ? ? ? ? ? ? <li> 23 ? ? ? ? ? ? ? ? <a href="#" class="ul-btn-active" data-icon="home">主頁</a> 24 ? ? ? ? ? ? </li> 25 ? ? ? ? ? ? <li> 26 ? ? ? ? ? ? ? ? <a href="#" ?data-icon="search">查找</a> 27 ? ? ? ? ? ? </li> 28 ? ? ? ? ? ? <li> 29 ? ? ? ? ? ? ? ? <a href="#" ?data-icon="info">信息</a> 30 ? ? ? ? ? ? </li> 31 ? ? ? ? </ul> 32 ? ? </nav> 33 ? </footer> 34 </div> 35? 36 </body> 37 </html> 復(fù)制代碼 http://sandbox.runjs.cn/show/pwbcm0mo
各位感覺還行吧。。。
fixed工具欄
這個家伙提供后，我們在輕觸屏幕或者滑動屏幕時，header和footer都會出現(xiàn)或者消失
<header data-role="header" data-position="fixed"> 結(jié)語
我們今天暫時學(xué)到這里，明天再繼續(xù)吧。
本文轉(zhuǎn)自葉小釵博客園博客，原文鏈接：http://www.cnblogs.com/yexiaochai/p/3186550.html如需轉(zhuǎn)載請自行聯(lián)系原作者
到目前為止，我打了幾天醬油了，這幾天落實了工作，并且看了一部電視連續(xù)劇（陳道明-手機），我很少看連續(xù)劇了，但是手機質(zhì)量很高啊，各位可以看看。
我們今天先學(xué)習(xí)一下jquery mobile的基礎(chǔ)知識，然后逐步進(jìn)入移動開發(fā)吧。
我們這里再來看看響應(yīng)式布局，我們是一個頁面可以在不同的設(shè)備上使用，其實這在某些方面上是不太合適的。
因為我們移動端的事件不太一致，可能鼠標(biāo)操作很方便的，用手就不行了，所以為移動端出單獨的網(wǎng)頁還是很有必要的。
文中測試鏈接請使用手機打開。
什么是jQuery Mobile？
jquery mobile是jquery在移動設(shè)備上的版本，他是基于jquery、HTML5、CSS3構(gòu)建的，他提供了一個豐富的交互性強的接口用以兼容不同移動平臺。
于是我們?nèi)ハ螺d一番：
我這里就直接下載的這個壓縮文件了，完了我們看看他有些什么東西，我們這個還是要依賴jquery的，所以還是準(zhǔn)備一個吧。
這個東東是個好東西哦，他還有配套的樣式呢，依賴他我們可以開發(fā)一套不錯的手機應(yīng)用呢。
自定義屬性
在jquery mobile中，是使用自定義屬性驅(qū)動頁面的（data-....），比如：
data-role
定義元素在頁面中的角色，該屬性允許定義不同的組件元素及頁面視圖：data-role="page"
data-title
定義jquery mobile視圖頁面標(biāo)題
data-transition
定義視圖切換的動畫效果
data-rel
定義具有浮動效果的視圖
data-theme
指定元素或者組件內(nèi)主題樣式風(fēng)格
data-icon
在元素內(nèi)增加小圖標(biāo)
data-iconpos
定義小圖標(biāo)位置
data-inline
指定按鈕根據(jù)內(nèi)容自適應(yīng)其長度
data-type
定義分組按鈕水平或者垂直方向排布
data-rel
定義具有特定功能的元素，例如data-rel="back"返回按鈕
data-add-back-btn
指定視圖頁面自動在頁眉左側(cè)添加返回按鈕
data-back-btn-text
指定由石頭頁面自動創(chuàng)建的返回按鈕的文本內(nèi)容，該屬性的使用通常都需要和data-add-back-btn配合
data-position
該屬性是實現(xiàn)在滑動屏幕時工具欄的顯示和隱藏狀態(tài)
data-fullscreen
用于指定全屏視圖頁面
data-native-menu
指定下拉選擇功能采用平臺內(nèi)置的選擇器
data-placeholder
設(shè)置下拉選擇功能的占位符
data-inset
實現(xiàn)內(nèi)嵌列表功能
data-split-theme
設(shè)置列表右側(cè)圖標(biāo)的主題樣式風(fēng)格
data-filter
開啟列表過濾功能
搞了這么多自定義屬性，我們也不知道什么是什么，所以不如來試一試吧。
頁面與視圖
頁面與視圖作為移動web應(yīng)用程序最重要的用戶界面之一，他主要承擔(dān)整個web應(yīng)用程序的界面呈現(xiàn)工作。
jquery mobile提供一套自定義元素屬性用于搭建各種頁面和視圖。
復(fù)制代碼 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 ? ? <title></title> 5 ? ? <meta name="viewport" content="width=device-width, initial-scale=1"> 6 ? ? <link href="jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css" /> 7 ? ? <script src="jquery-1.7.1.js" type="text/javascript"></script> 8 ? ? <script src="jquery.mobile-1.3.1.js" type="text/javascript"></script> 9 </head> 10 <body> 11 ? ? <div data-role="page"> 12 ? ? ? ? <div data-role="header">頁頭 13 ? ? ? ? </div> 14 ? ? ? ? <div data-role="content">內(nèi)容 15 ? ? ? ? </div> 16 ? ? ? ? <div data-role="footer">頁腳 17 ? ? ? ? </div> 18 ? ? </div> 19 </body> 20 </html> 復(fù)制代碼 http://sandbox.runjs.cn/show/itndsvbq
不要說還是有點感覺的。。。
我們在實例中使用div元素作為視圖頁面的布局元素但是我們這里改為html的元素更加好：
復(fù)制代碼 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 ? ? <title></title> 5 ? ? <meta name="viewport" content="width=device-width, initial-scale=1"> 6 ? ? <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"? href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css"> 7 ? ? <script id="jquery_182" type="text/javascript" class="library"? src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script> 8 ? ? <script id="jquerymobile_120" type="text/javascript" class="library"? src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script> 9 </head> 10 <body> 11 ? ? <section data-role="page"> 12 ? ? ? ? <header data-role="header">頁頭 13 ? ? ? ? </header> 14 ? ? ? ? <article data-role="content">內(nèi)容 15 ? ? ? ? </article> 16 ? ? ? ? <footer data-role="footer">頁腳 17 ? ? ? ? </footer> 18 ? ? </section> 19 </body> 20 </html> 復(fù)制代碼 多視圖web頁面
前面只有一個視圖，我們現(xiàn)在來看看多視圖頁面怎么處理：
復(fù)制代碼 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 ? ? <title></title> 5 ? ? <meta name="viewport" content="width=device-width, initial-scale=1"> 6 ? ? <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"? 7 ? ? href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css"> 8 ? ? <script id="jquery_182" type="text/javascript" class="library"? 9 ? ? src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script> 10 ? ? <script id="jquerymobile_120" type="text/javascript" class="library"? 11 ? ? src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script> 12 </head> 13 <body> 14 ? ? <section data-role="page" id="v1"> 15 ? ? ? ? <header data-role="header">視圖一 16 ? ? ? ? </header> 17 ? ? ? ? <article data-role="content"> 18 ? ? ? ? ? ? <a href="#v2">去視圖二</a> 19 ? ? ? ? </article> 20 ? ? ? ? <footer data-role="footer">頁腳 21 ? ? ? ? </footer> 22 ? ? </section> 23 ? ? ?<section data-role="page" id="v2"> 24 ? ? ? ? <header data-role="header">視圖二 25 ? ? ? ? </header> 26 ? ? ? ? <article data-role="content"> 27 ? ? ? ? ? ? <a href="#v1">去視圖1</a> 28 ? ? ? ? </article> 29 ? ? ? ? <footer data-role="footer">頁腳 30 ? ? ? ? </footer> 31 ? ? </section> 32 </body> 33 </html> 復(fù)制代碼 http://sandbox.runjs.cn/show/l4vejd6v
我們點擊超鏈接可以在視圖一與視圖二切換，你會發(fā)現(xiàn)還有一點點動畫效果呢！！！
PS：在此若是設(shè)置了data-title將改變手機上title的標(biāo)題
動畫
我們可以設(shè)置6鐘動畫效果：
復(fù)制代碼 ① Slide 從右到左切換 ② Slideup 從下到上切換 ③ Slidedown 從上到下切換 ④ Pop彈出框方式打開 ⑤ Fade 漸變褪色方式 ⑥ Flip飛入飛出方式 復(fù)制代碼 這里我就不截圖了，我私下試試去。
<a href="#v1" data-transition="pop">去視圖1</a> 效果感覺不錯哦！！！
dialog對話框
只要在標(biāo)簽的data-rel設(shè)置了dialog屬性，視圖就具有dialog浮動層效果。
<a href="#v2" data-rel="dialog">去視圖二</a>
這里有點表現(xiàn)不佳，我們暫時不管他。
頁面主題
<section data-role="page" id="v1" data-theme="a"> 關(guān)于自定義屬性的東西暫時寫到這里，我們來看看我們比較重要的按鈕。
按鈕
按鈕在移動web應(yīng)用程序中式非常重要的用戶界面組件，主要用作為用戶提供各種操作入口和視圖交互功能，我們的jquery mobile提供了很多不錯的按鈕。
復(fù)制代碼 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 ? ? <title></title> 5 ? ? <meta name="viewport" content="width=device-width, initial-scale=1"> 6 ? ? <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"? 7 ? ? href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css"> 8 ? ? <script id="jquery_182" type="text/javascript" class="library"? 9 ? ? src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script> 10 ? ? <script id="jquerymobile_120" type="text/javascript" class="library"? 11 ? ? src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script> 12 </head> 13 <body> 14 ? <div data-role="button">我是按鈕</div> 15 </body> 16 </html> 復(fù)制代碼
于是我們的按鈕就出現(xiàn)啦，在頁面上獨占一行。
input 中button、submit等也都變成了這個樣式了
小圖標(biāo)
jquery mobile提供了一套小圖標(biāo)：
圖標(biāo)太多，我這里簡單列兩個：
delete：刪除，data-icon="delete"
plus：加號，data-icon="plus"
PS:設(shè)置data-iconpos="notext"便可以只要圖標(biāo)不要文字
1 ? <div data-role="button" data-icon="delete">刪除</div> 2 ? <div data-role="button" data-icon="delete" data-iconpos="notext">刪除</div> 3 ? <div data-role="button" data-icon="delete" data-iconpos="right">刪除</div> http://sandbox.runjs.cn/show/xd9axexu
若是系統(tǒng)提供的圖標(biāo)不能滿足條件的話，便可以自定義圖標(biāo)
data-icon="myapp-email" myapp-email就是自定義圖標(biāo)的名稱（需要上傳） css中對應(yīng)的樣式是.ui-icon-myapp-email 自定義圖標(biāo)大小是18*18，建議png-8 按鈕分組
復(fù)制代碼 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 ? ? <title></title> 5 ? ? <meta name="viewport" content="width=device-width, initial-scale=1"> 6 ? ? <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"? 7 ? ? href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css"> 8 ? ? <script id="jquery_182" type="text/javascript" class="library"? 9 ? ? src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script> 10 ? ? <script id="jquerymobile_120" type="text/javascript" class="library"? 11 ? ? src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script> 12 </head> 13 <body> 14 ? ? <div data-role="controlgroup" data-type="horizontal"> 15 ? ? ? ? <div data-role="button" data-icon="plus"> 16 ? ? ? ? ? ? 添加</div> 17 ? ? ? ? <div data-role="button" data-icon="delete"> 18 ? ? ? ? ? ? 刪除</div> 19 ? ? ? ? <div data-role="button" data-icon="refresh"> 20 ? ? ? ? ? ? 修改</div> 21 ? ? </div> 22 ? ? <div data-role="controlgroup" data-type="horizontal"> 23 ? ? ? ? <div data-role="button" data-icon="plus"> 24 ? ? ? ? ? ? 添加</div> 25 ? ? ? ? <div data-role="button" data-icon="delete"> 26 ? ? ? ? ? ? 刪除</div> 27 ? ? ? ? <div data-role="button" data-icon="refresh"> 28 ? ? ? ? ? ? 修改</div> 29 ? ? </div> 30 </body> 31 </html> 復(fù)制代碼 http://sandbox.runjs.cn/show/u7cydmrv
感覺還不錯的說，這里還可以為各個按鈕設(shè)置主題，看起來就更加有分別了。
Bar 工具欄
工具欄也是一重要組件，我們這里結(jié)合前面的按鈕來完成一完整的工具欄。
jquery mobile提供兩組工具欄：
Headers bar 充當(dāng)視圖頁面的標(biāo)題作用，在一般情況下header bar位于頁面的頂部，一般包含2按鈕 Footer bar 這個工具欄一般位于尾部，就是與header bar對應(yīng)的東東 初體驗：
復(fù)制代碼 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 ? ? <title></title> 5 ? ? <meta name="viewport" content="width=device-width, initial-scale=1"> 6 ? ? <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"? 7 ? ? href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css"> 8 ? ? <script id="jquery_182" type="text/javascript" class="library"? 9 ? ? src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script> 10 ? ? <script id="jquerymobile_120" type="text/javascript" class="library"? 11 ? ? src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script> 12 </head> 13 <body> 14 <div data-role="page"> 15 ? <header data-role="header"> 16 ? ? <h1>header bar</h1> 17 ? </header> 18 ? <div>內(nèi)容區(qū)域</div> 19 ? <footer data-role="footer"> 20 ? ? <h2>footer bar</h2> 21 ? </footer> 22 </div> 23 </body> 24 </html> 復(fù)制代碼
我們在此基礎(chǔ)上改下：
復(fù)制代碼 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 ? ? <title></title> 5 ? ? <meta name="viewport" content="width=device-width, initial-scale=1"> 6 ? ? <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"? 7 ? ? href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css"> 8 ? ? <script id="jquery_182" type="text/javascript" class="library"? 9 ? ? src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script> 10 ? ? <script id="jquerymobile_120" type="text/javascript" class="library"? 11 ? ? src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script> 12 </head> 13 <body> 14 <div data-role="page"> 15 ? <header data-role="header"> 16 ? ? <h1>header bar</h1> 17 ? </header> 18 ? <div>內(nèi)容區(qū)域</div> 19 ? <footer data-role="footer"> 20 ? ? <div data-role="controlgroup" data-type="horizontal" > 21 ? ? ? ? <div data-role="button" data-icon="plus" data-theme="a"> 22 ? ? ? ? ? ? 添加</div> 23 ? ? ? ? <div data-role="button" data-icon="delete" data-theme="b"> 24 ? ? ? ? ? ? 刪除</div> 25 ? ? ? ? <div data-role="button" data-icon="refresh" data-theme="c"> 26 ? ? ? ? ? ? 修改</div> 27 ? ? </div> 28 ? </footer> 29 </div> 30 </body> 31 </html> 復(fù)制代碼 http://sandbox.runjs.cn/show/icqp5f8v
導(dǎo)航工具條
navbar是非常有用的，他提供不同數(shù)量的按鈕組合，一般位于header或者footer中
復(fù)制代碼 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 ? ? <title></title> 5 ? ? <meta name="viewport" content="width=device-width, initial-scale=1"> 6 ? ? <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"? 7 ? ? href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css"> 8 ? ? <script id="jquery_182" type="text/javascript" class="library"? 9 ? ? src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script> 10 ? ? <script id="jquerymobile_120" type="text/javascript" class="library"? 11 ? ? src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script> 12 </head> 13 <body> 14 <div data-role="page"> 15 ? <header data-role="header"> 16 ? ? <h1>header bar</h1> 17 ? </header> 18 ? <div>內(nèi)容區(qū)域</div> 19 ? <footer data-role="footer"> 20 ? ? <nav data-role="navbar"> 21 ? ? ? ? <ul> 22 ? ? ? ? ? ? <li> 23 ? ? ? ? ? ? ? ? <a href="#" class="ul-btn-active" data-icon="home">主頁</a> 24 ? ? ? ? ? ? </li> 25 ? ? ? ? ? ? <li> 26 ? ? ? ? ? ? ? ? <a href="#" ?data-icon="search">查找</a> 27 ? ? ? ? ? ? </li> 28 ? ? ? ? ? ? <li> 29 ? ? ? ? ? ? ? ? <a href="#" ?data-icon="info">信息</a> 30 ? ? ? ? ? ? </li> 31 ? ? ? ? </ul> 32 ? ? </nav> 33 ? </footer> 34 </div> 35? 36 </body> 37 </html> 復(fù)制代碼 http://sandbox.runjs.cn/show/pwbcm0mo
各位感覺還行吧。。。
fixed工具欄
這個家伙提供后，我們在輕觸屏幕或者滑動屏幕時，header和footer都會出現(xiàn)或者消失
<header data-role="header" data-position="fixed"> 結(jié)語
我們今天暫時學(xué)到這里，明天再繼續(xù)吧。
本文轉(zhuǎn)自葉小釵博客園博客，原文鏈接：http://www.cnblogs.com/yexiaochai/p/3186550.html如需轉(zhuǎn)載請自行聯(lián)系原作者
總結(jié)
以上是生活随笔為你收集整理的【初探移动前端开发03】jQuery Mobile（上）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： UITableView的使用及代理方法
- 下一篇： Log4Net的WebApplicati