前言
到目前為止，我打了幾天醬油了，這幾天落實了工作，並且看了一部電視連續劇（陳道明-手機），我很少看連續劇了，但是手機質量很高啊，各位可以看看。
我們今天先學習一下jquery mobile的基礎知識，然后逐步進入移動開發吧。
我們這里再來看看響應式布局，我們是一個頁面可以在不同的設備上使用，其實這在某些方面上是不太合適的。
因為我們移動端的事件不太一致，可能鼠標操作很方便的，用手就不行了，所以為移動端出單獨的網頁還是很有必要的。
文中測試鏈接請使用手機打開。
什么是jQuery Mobile？
jquery mobile是jquery在移動設備上的版本，他是基於jquery、HTML5、CSS3構建的，他提供了一個豐富的交互性強的接口用以兼容不同移動平台。
於是我們去下載一番：
我這里就直接下載的這個壓縮文件了，完了我們看看他有些什么東西，我們這個還是要依賴jquery的，所以還是准備一個吧。
這個東東是個好東西哦，他還有配套的樣式呢，依賴他我們可以開發一套不錯的手機應用呢。
自定義屬性
在jquery mobile中，是使用自定義屬性驅動頁面的（data-....），比如：
data-role
定義元素在頁面中的角色，該屬性允許定義不同的組件元素及頁面視圖：data-role="page"
data-title
定義jquery mobile視圖頁面標題
data-transition
定義視圖切換的動畫效果
data-rel
定義具有浮動效果的視圖
data-theme
指定元素或者組件內主題樣式風格
data-icon
在元素內增加小圖標
data-iconpos
定義小圖標位置
data-inline
指定按鈕根據內容自適應其長度
data-type
定義分組按鈕水平或者垂直方向排布
data-rel
定義具有特定功能的元素，例如data-rel="back"返回按鈕
data-add-back-btn
指定視圖頁面自動在頁眉左側添加返回按鈕
data-back-btn-text
指定由石頭頁面自動創建的返回按鈕的文本內容，該屬性的使用通常都需要和data-add-back-btn配合
data-position
該屬性是實現在滑動屏幕時工具欄的顯示和隱藏狀態
data-fullscreen
用於指定全屏視圖頁面
data-native-menu
指定下拉選擇功能采用平台內置的選擇器
data-placeholder
設置下拉選擇功能的占位符
data-inset
實現內嵌列表功能
data-split-theme
設置列表右側圖標的主題樣式風格
data-filter
開啟列表過濾功能
搞了這么多自定義屬性，我們也不知道什么是什么，所以不如來試一試吧。
頁面與視圖
頁面與視圖作為移動web應用程序最重要的用戶界面之一，他主要承擔整個web應用程序的界面呈現工作。
jquery mobile提供一套自定義元素屬性用於搭建各種頁面和視圖。
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">內容 15 </div> 16 <div data-role="footer">頁腳 17 </div> 18 </div> 19 </body> 20 </html>
http://sandbox.runjs.cn/show/itndsvbq
不要說還是有點感覺的。。。
我們在實例中使用div元素作為視圖頁面的布局元素但是我們這里改為html的元素更加好：
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">內容 15 </article> 16 <footer data-role="footer">頁腳 17 </footer> 18 </section> 19 </body> 20 </html>
多視圖web頁面
前面只有一個視圖，我們現在來看看多視圖頁面怎么處理：
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>
http://sandbox.runjs.cn/show/l4vejd6v
我們點擊超鏈接可以在視圖一與視圖二切換，你會發現還有一點點動畫效果呢！！！
PS：在此若是設置了data-title將改變手機上title的標題
動畫
我們可以設置6鍾動畫效果：
① Slide 從右到左切換
② Slideup 從下到上切換
③ Slidedown 從上到下切換
④ Pop彈出框方式打開
⑤ Fade 漸變褪色方式
⑥ Flip飛入飛出方式
這里我就不截圖了，我私下試試去。
<a href="#v1" data-transition="pop">去視圖1</a>
效果感覺不錯哦！！！
dialog對話框
只要在標簽的data-rel設置了dialog屬性，視圖就具有dialog浮動層效果。
<a href="#v2" data-rel="dialog">去視圖二</a>
這里有點表現不佳，我們暫時不管他。
頁面主題
<section data-role="page" id="v1" data-theme="a">
關於自定義屬性的東西暫時寫到這里，我們來看看我們比較重要的按鈕。
按鈕
按鈕在移動web應用程序中式非常重要的用戶界面組件，主要用作為用戶提供各種操作入口和視圖交互功能，我們的jquery mobile提供了很多不錯的按鈕。
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>
於是我們的按鈕就出現啦，在頁面上獨占一行。
input 中button、submit等也都變成了這個樣式了
小圖標
jquery mobile提供了一套小圖標：
圖標太多，我這里簡單列兩個：
delete：刪除，data-icon="delete"
plus：加號，data-icon="plus"
PS:設置data-iconpos="notext"便可以只要圖標不要文字
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
若是系統提供的圖標不能滿足條件的話，便可以自定義圖標
data-icon="myapp-email"
myapp-email就是自定義圖標的名稱（需要上傳）
css中對應的樣式是.ui-icon-myapp-email
自定義圖標大小是18*18，建議png-8
按鈕分組
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>
http://sandbox.runjs.cn/show/u7cydmrv
感覺還不錯的說，這里還可以為各個按鈕設置主題，看起來就更加有分別了。
Bar 工具欄
工具欄也是一重要組件，我們這里結合前面的按鈕來完成一完整的工具欄。
jquery mobile提供兩組工具欄：
Headers bar
充當視圖頁面的標題作用，在一般情況下header bar位於頁面的頂部，一般包含2按鈕
Footer bar
這個工具欄一般位於尾部，就是與header bar對應的東東
初體驗：
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>內容區域</div> 19 <footer data-role="footer"> 20 <h2>footer bar</h2> 21 </footer> 22 </div> 23 </body> 24 </html>
我們在此基礎上改下：
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>內容區域</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>
http://sandbox.runjs.cn/show/icqp5f8v
導航工具條
navbar是非常有用的，他提供不同數量的按鈕組合，一般位於header或者footer中
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>內容區域</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>
http://sandbox.runjs.cn/show/pwbcm0mo
各位感覺還行吧。。。
fixed工具欄
這個家伙提供后，我們在輕觸屏幕或者滑動屏幕時，header和footer都會出現或者消失
<header data-role="header" data-position="fixed">
結語
我們今天暫時學到這里，明天再繼續吧。