前言
為了方便大家看的方便，我這里將這幾天的東西整合一下發出。
里面的例子請使用手機瀏覽器查看。
什么是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">
內容區域格式布局
網格布局
jquery mobile提供一種多列布局功能，由於移動設備的屏幕大小原因，一般情況還是不要使用多列布局啦。
jquery mobile提供一種css樣式規則來定義多列布局，對應css為ui-block，每列的樣式是通過定義前綴+“-a”等方式對網格的列進行布局，a字母根據網格的列數而定。
例如兩列布局CSS為：ui-block-a與ui-block-b
兩列網格布局
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 class="ui-grid-a"> 15 <div class="ui-block-a"> 16 <input type="button" value="確定" /> 17 </div> 18 <div class="ui-block-b"> 19 <input type="button" value="取消" /> 20 </div> 21 </div> 22 </body> 23 </html>
http://sandbox.runjs.cn/show/tdwazgd4
我們看見了他這些都是使用float布局的。
兩列布局，需要指定外層div樣式是ui-grid-a，ui-grid-a樣式用於指定行列采用兩列布局樣式。
以上兩個按鈕各占屏幕的50%，采用data-line屬性對按鈕進行水平排列，按鈕寬度根據實際文本而定。
ui-grid-a 兩列
ui-grid-b 三列
ui-grid-c 四列
ui-grid-d 五列
我們來看一個三列網格布局：
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 class="ui-grid-b"> 15 <div class="ui-block-a"> 16 <input type="button" value="確定" /> 17 </div> 18 <div class="ui-block-b"> 19 <input type="button" value="取消" /> 20 </div> 21 <div class="ui-block-c"> 22 <input type="button" value="取消" /> 23 </div> 24 </div> 25 </body> 26 </html>
http://sandbox.runjs.cn/show/wxkkjlfy
折疊功能
折疊塊是移動端經常用到的效果，只要使用jquery mobile約定的編碼規則並且利用HTML5的dataset特性，程序就能生成折疊快了。
其中data-role設置為collapsible，便可以創建一個可折疊的內容區，來個例子吧：
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="collapsible"> 15 <h3>可折疊區域</h3> 16 <p>刀狂劍痴葉小釵刀狂劍痴葉小釵刀狂劍痴葉小釵刀狂劍痴葉小釵刀狂劍痴葉小釵刀狂劍痴葉小釵</p> 17 </div> 18 </body> 19 </html>
http://sandbox.runjs.cn/show/omulbkhg
form表單
我們手機上的form表單其實都很漂亮了，但是我們的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 <label for="name"> 15 姓名</label> 16 <input type="text" name="name" id="name" /> 17 <label for="password"> 18 密碼</label> 19 <input type="password" name="password" id="password" /> 20 <label for="content"> 21 密碼</label> 22 <textarea name="content" id="content"></textarea> 23 <label for="number"> 24 年齡</label> 25 <input type="number" name="number" id="number" /> 26 <label for="tel"> 27 手機</label> 28 <input type="tel" name="tel" id="tel" /> 29 <label for="tel"> 30 email</label> 31 <input type="email" name="email" id="email" /> 32 <label for="tel"> 33 url</label> 34 <input type="url" name="url" id="url" /> 35 <label for="search"> 36 搜索</label> 37 <input type="search" name="search" id="search" /> 38 </body> 39 </html>
http://sandbox.runjs.cn/show/by9mvtu8
我這里噴一下《HTML5移動Web開發指南》這本書！
唐駿開寫的，這家伙寫的這本書不行，書中很多例子有問題。
Toggle類型
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="fieldcontain"> 15 <label for="slider"> 16 打開開關：</label> 17 <select name="slider" id="slider" data-role="slider"> 18 <option value="off">關閉</option> 19 <option value="on">開啟</option> 20 </select> 21 </div> 22 </body> 23 </html>
http://sandbox.runjs.cn/show/ty7aywwm
單選按鈕類型
我們要創建一組單選按鈕需要這樣做：
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 <fieldset data-role="controlgroup"> 15 <legend>請選擇你的年齡范圍：</legend> 16 <input type="radio" name="radio1" id="radio1" value="any" checked="checked" /> 17 <label for="radio1"> 18 不限</label> 19 <input type="radio" name="radio1" id="radio2" value="16-22" /> 20 <label for="radio2"> 21 16-22歲</label> 22 <input type="radio" name="radio1" id="radio3" value="23-30" /> 23 <label for="radio3"> 24 23-30歲</label> 25 <input type="radio" name="radio1" id="radio4" value="31-40" /> 26 <label for="radio4"> 27 31-40歲</label> 28 <input type="radio" name="radio1" id="radio5" value="40" /> 29 <label for="radio5"> 30 40歲以上</label> 31 </fieldset> 32 </body> 33 </html>
http://sandbox.runjs.cn/show/nwfuhvep
我們看到，他還是挺好看的哈。。。
我們先是豎排，我們設置一個橫排的單選按鈕看看：
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 <fieldset data-role="controlgroup" data-type="horizontal"> 15 <legend>請選擇你的年齡范圍：</legend> 16 <input type="radio" name="radio1" id="radio1" value="any" checked="checked" /> 17 <label for="radio1"> 18 不限</label> 19 <input type="radio" name="radio1" id="radio2" value="16-22" /> 20 <label for="radio2"> 21 16-22歲</label> 22 <input type="radio" name="radio1" id="radio3" value="23-30" /> 23 <label for="radio3"> 24 23-30歲</label> 25 </fieldset> 26 </body> 27 </html>
http://sandbox.runjs.cn/show/vz3bjotg
復選框
單選完了我們來看看復選框：
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 <fieldset data-role="controlgroup" data-type="horizontal"> 15 <legend>愛好：</legend> 16 <input type="checkbox" name="radio1" id="radio1" value="any" checked="checked" /> 17 <label for="radio1"> 18 足球</label> 19 <input type="checkbox" name="radio1" id="radio2" value="16-22" /> 20 <label for="radio2"> 21 籃球</label> 22 <input type="checkbox" name="radio1" id="radio3" value="23-30" /> 23 <label for="radio3"> 24 編碼（危險）</label> 25 </fieldset> 26 </body> 27 </html>
http://sandbox.runjs.cn/show/1zpxdut8
下拉菜單
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"> 15 <label class="select"> 16 請選擇興趣 17 <select> 18 <option>電影</option> 19 <option>體育</option> 20 <option>旅游</option> 21 </select> 22 </label> 23 24 <label class="select"> 25 請選擇興趣（多選） 26 <select> 27 <optgroup label="一般類"> 28 <option>電影</option> 29 <option>體育</option> 30 <option>旅游</option> 31 </optgroup> 32 <optgroup label="特殊類"> 33 <option>C</option> 34 <option>C++</option> 35 <option>Java</option> 36 </optgroup> 37 </select> 38 </label> 39 </div> 40 </body> 41 </html>
http://sandbox.runjs.cn/show/zu0zsl2w
我們這里做一點改變，樣式會發生變化：
View Code
http://sandbox.runjs.cn/show/ynvpsuyw
List列表
在移動設備平台下，由於移動設備屏幕比較小，我們又是用手在上面點擊的觸屏方式，傳統的列表模式在手機上就不太友好了。
雖然HTML5與CSS3提供了強大的界面實現方案，jquery mobile作為jquery框架的一個移動web插件，他根據移動屏幕大小優化了UI組件，
列表組件就是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="page"> 15 <header data-role="header"> 16 <h1> 17 普通鏈接列表</h1> 18 </header> 19 <div data-role="content"> 20 <ul data-role="listview" data-theme="g"> 21 <li><a href="01.htm">刀狂劍痴葉小釵</a> </li> 22 <li><a href="01.htm">刀狂劍痴葉小釵</a> </li> 23 <li><a href="01.htm">刀狂劍痴葉小釵</a> </li> 24 <li><a href="01.htm">刀狂劍痴葉小釵</a> </li> 25 <li><a href="01.htm">刀狂劍痴葉小釵</a> </li> 26 </ul> 27 </div> 28 </div> 29 </body> 30 </html>
http://sandbox.runjs.cn/show/icriwnze
多層次嵌套列表
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> 17 普通鏈接列表</h1> 18 </header> 19 <div data-role="content"> 20 <ul data-role="listview" data-theme="g"> 21 <li><a href="01.htm">刀狂劍痴葉小釵</a> 22 <p> 23 子級list</p> 24 <ul> 25 <li><a href="01.htm">清香白蓮素還真</a></li> 26 <li><a href="01.htm">清香白蓮素還真</a></li> 27 </ul> 28 </li> 29 <li><a href="01.htm">刀狂劍痴葉小釵</a> </li> 30 <li><a href="01.htm">刀狂劍痴葉小釵</a> 31 <p> 32 子級list</p> 33 <ul> 34 <li><a href="01.htm">清香白蓮素還真</a></li> 35 <li><a href="01.htm">清香白蓮素還真</a></li> 36 </ul> 37 </li> 38 <li><a href="01.htm">刀狂劍痴葉小釵</a> </li> 39 <li><a href="01.htm">刀狂劍痴葉小釵</a> </li> 40 </ul> 41 </div> 42 </div> 43 </body> 44 </html>
http://sandbox.runjs.cn/show/wc1n0sto
這個嵌套列表，我們點擊第一個后便可以看到這個啦。
列表分隔符
我們有時候會碰到需要對列表進行分組的功能，具有分組效果的列表可以在li元素上設置data-role屬性為list-divider來實現。
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> 17 列表分割</h1> 18 </header> 19 <div data-role="content"> 20 <ul data-role="listview" data-theme="g"> 21 <li data-role="list-divider">霹靂三巨頭</li> 22 <li><a href="01.htm">清香白蓮素還真</a> </li> 23 <li><a href="01.htm">百世經綸一頁書</a> </li> 24 <li><a href="01.htm">刀狂劍痴葉小釵</a> </li> 25 <li data-role="list-divider">火影三巨頭</li> 26 <li><a href="01.htm">宇智波斑</a> </li> 27 <li><a href="01.htm">初代火影</a> </li> 28 <li><a href="01.htm">六道仙人</a> </li> 29 <li data-role="list-divider">金光三巨頭</li> 30 <li><a href="01.htm">史艷文</a> </li> 31 <li><a href="01.htm">藏鏡人</a> </li> 32 <li><a href="01.htm">黑白郎君南宮很</a> </li> 33 </ul> 34 </div> 35 </div> 36 </body> 37 </html>
http://sandbox.runjs.cn/show/x34523jv
列表搜索
當設置data-filter為true時便具有了搜索功能了
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> 17 列表分割</h1> 18 </header> 19 <div data-role="content"> 20 <ul data-role="listview" data-theme="g" data-filter="true"> 21 <li><a href="01.htm">清香白蓮素還真</a> </li> 22 <li><a href="01.htm">百世經綸一頁書</a> </li> 23 <li><a href="01.htm">刀狂劍痴葉小釵</a> </li> 24 <li><a href="01.htm">宇智波斑</a> </li> 25 <li><a href="01.htm">初代火影</a> </li> 26 <li><a href="01.htm">六道仙人</a> </li> 27 <li><a href="01.htm">史艷文</a> </li> 28 <li><a href="01.htm">藏鏡人</a> </li> 29 <li><a href="01.htm">黑白郎君南宮很</a> </li> 30 <li><a href="01.htm">清香白蓮素還真</a> </li> 31 <li><a href="01.htm">百世經綸一頁書</a> </li> 32 <li><a href="01.htm">刀狂劍痴葉小釵</a> </li> 33 <li><a href="01.htm">宇智波斑</a> </li> 34 <li><a href="01.htm">初代火影</a> </li> 35 <li><a href="01.htm">六道仙人</a> </li> 36 <li><a href="01.htm">史艷文</a> </li> 37 <li><a href="01.htm">藏鏡人</a> </li> 38 <li><a href="01.htm">黑白郎君南宮很</a> </li> 39 </ul> 40 </div> 41 </div> 42 </body> 43 </html>
http://sandbox.runjs.cn/show/f8oxhkfs
這個是界面上的搜索與數據庫沒關系。
內嵌列表
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> 17 列表分割</h1> 18 </header> 19 <div data-role="content"> 20 <ul data-role="listview" data-theme="g" data-inset="true"> 21 <li><a href="01.htm">清香白蓮素還真<span class="ui-li-count">30</span></a> </li> 22 <li><a href="01.htm">百世經綸一頁書<span class="ui-li-count">30</span></a> </li> 23 <li><a href="01.htm">刀狂劍痴葉小釵<span class="ui-li-aside">本命</span></a> </li> 24 </ul> 25 <ol data-role="listview" data-theme="g" data-inset="true"> 26 <li><a href="01.htm">宇智波斑</a> </li> 27 <li><a href="01.htm">初代火影</a> </li> 28 <li><a href="01.htm">六道仙人</a> </li> 29 </ol> 30 <ul data-role="listview" data-theme="g" data-inset="true"> 31 <li><a href="01.htm">史艷文</a> </li> 32 <li><a href="01.htm">藏鏡人</a> </li> 33 <li><a href="01.htm">黑白郎君南宮很</a> </li> 34 </ul> 35 </div> 36 </div> 37 </body> 38 </html>
http://sandbox.runjs.cn/show/lpjnjowv
列表的性能問題
jquery mobile雖然提供了非常豐富的列表類型，但大部分類型都是針對不同需求而實現的內容格式列表。
實際上，jquery mobile並沒有實現列表的分頁功能，當數據量非常大時需要有分頁功能，在前面說過，jquery mobile提供一種可搜索過濾列表類型的列表。
前面我們就說了沒有通過數據庫檢索，可能出現數據量非常大的情況，對性能，對流量都不好，檢索時候可能出現假死的情況。
所以使用list功能需要慎重。
Event事件
好了，基本UI方面的我們就看完了，現在我們來看看事件方面的東西。
jquery mobile提供了豐富的事件處理機制，並且根據不同的移動設備，整合各種事件，使得開發者不必解決不同設備之間的事件處理差異。
頁面加載事件
我們在頁面中會使用
$(document).ready()
它的作用是當加載完成一個web頁面的Dom結構后就運行該方法。
在移動web應用程序時，仍然可以使用這個功能，但是jquery mobile的機制是每個視圖和頁面的內容都是使用ajax請求加載的，這樣每次顯示一個新視圖或者新頁面都沒辦法調用readey方法，這不是我們想要的結果。
所以針對jquery mobile提供了這個方法解決這個問題：pageCreate事件，該事件的含義是當視圖或頁面被切換時觸發的。
1 $('#page').live('pagecreate', function (e) { 2 alert('觸發之'); 3 });
touch事件
jquery mobile提供了最基本的觸摸事件：touch事件
tap：
快速觸摸屏幕並離開，類似於一次完整的點擊事件
taphold：
觸摸屏幕並保持一段時間
swipe：
在1秒內水平移動30px屏幕像素以上時觸發
swipeleft：
向左側滑動
swiperight：
向右側滑動
方向改變事件
orientationchange事件函數當移動設備方向發生改變時觸發。
在事件回調函數內的第二個參數返回一個用於識別當前方向的參數，該參數只會返回兩種值：portrait（縱向）和landscape（橫向）
但是該事件不是所有瀏覽器都支持，所以使用要慎重。
滾動事件
目前jquery mobile支持兩種滾動事件
scrollstart
開始滾動時觸發，需要注意是ios上該事件不穩定，原因是ios在滾動時會禁止dom操作
會將dom操作放入隊列中，待滾動結束后才執行這些操作，但是估計現在解決了。
scrollend
在滾動結束時觸發
顯示/隱藏事件
在基於jquery mobile的移動web應用中，我們知道一個web頁面存在多個不同的視圖或頁面，但每次只會顯示一個。
當顯示其中一個視圖時其余都會隱藏，每次視圖切換都會觸發顯示/隱藏事件
pagebeforeshow
當視圖通過動畫效果開始顯示在屏幕之前觸發事件
pagebeforehide
當視圖通過動畫效果開始隱藏之前觸發事件
pageshow
當視圖通過動畫效果顯示在屏幕之后觸發事件
pagehide
當視圖通過動畫效果隱藏后觸發事件
沒切換一次頁面，4鍾事件都會被觸發，例如：
當a視圖切換到b視圖時，首先觸發a視圖的pagebeforeshow事件和b視圖的pagebeforehide事件
當b視圖完成切換動畫效果后完整的顯示在屏幕中時，會觸發a視圖的pagehide事件和b視圖的pageshow事件
虛擬鼠標事件
jquery mobile提供了一種虛擬點擊事件來整合不同設備中mouse和touch事件
vmouseover
統一處理觸摸和鼠標懸停事件
vmousedown
統一處理觸摸和鼠標按下事件
vmousemove
處理觸摸和鼠標移動事件
vmouseup
處理觸摸和鼠標松開事件
vclick
處理觸摸和鼠標點擊事件
vmousecancel
處理觸摸和鼠標離開事件
結語
我們隊jquery mobile的學習暫時到這里，接下來我們在學習下phonegap，然后就實戰一下下。