前言
到目前為止，我打了幾天醬油了，這幾天落實了工作，并且看了一部電視連續劇（陳道明-手機），我很少看連續劇了，但是手機質量很高啊，各位可以看看。
我們今天先學習一下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">
結語
我們今天暫時學到這里，明天再繼續吧。
本文轉自葉小釵博客園博客，原文鏈接：http://www.cnblogs.com/yexiaochai/p/3186550.html如需轉載請自行聯系原作者
![[轉]IntelliJ IDEA 2020.1 正式發布，15 項重大特性、官方支持中文了！](http://pic.xiahunao.cn/[轉]IntelliJ IDEA 2020.1 正式發布，15 項重大特性、官方支持中文了！)
![[轉]C++二進制完成加減乘除](http://pic.xiahunao.cn/[轉]C++二進制完成加減乘除)
、火星坐標系（GCJ02）、百度地圖（BD09）坐標系轉換案例教程（附轉換工具下載）)
