【初探移動前端開發05】jQuery Mobile (整合版)

時間 2019-11-12

標籤初探移動前端開發05 jquery mobile 整合欄目 JQuery 简体版

原文原文鏈接

前言javascript

爲了方便你們看的方便，我這裏將這幾天的東西整合一下發出。css

裏面的例子請使用手機瀏覽器查看。html

什麼是jQuery Mobile？

jquery mobile是jquery在移動設備上的版本，他是基於jquery、HTML五、CSS3構建的，他提供了一個豐富的交互性強的接口用以兼容不一樣移動平臺。java

因而咱們去下載一番：jquery

我這裏就直接下載的這個壓縮文件了，完了咱們看看他有些什麼東西，咱們這個仍是要依賴jquery的，因此仍是準備一個吧。ios

這個東東是個好東西哦，他還有配套的樣式呢，依賴他咱們能夠開發一套不錯的手機應用呢。web

自定義屬性

在jquery mobile中，是使用自定義屬性驅動頁面的（data-....），好比：ajax

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，而後就實戰一下下。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。