jQuery Mobile入門教程
簡介：jQuery Mobile框架能夠輕鬆的幫助咱們實現很是好看的、可跨設備的Web應用程序。咱們將後續的介紹中向你們介紹大量的代碼及實例。javascript
jQuery一直以來都是很是流行的富客戶端及Web應用程序開發中使用的JavaScript類庫,然而一直以來它都是爲桌面瀏覽器設計的，沒有特別爲移動應用程序設計。css
jQuery Mobile是一個新的項目用來添補在移動設備應用上的缺憾。它是基本jQuery框架並提供了必定範圍的用戶接口和特性，以便於開發人員在移動應用上使用。使用該框架能夠節省大量的js代碼開發時間，儘管目前的版本仍是不是一個穩定的版本。但它的應用效果已經備受矚目。html
接下來咱們將經過實例向你們展現jQuery Mobile的特性及好處，讓咱們看一下這個新框架是怎麼幫助你在短期內創建起一個高質量的移動應用程序,接下來的代碼講解中的代碼最好使用的移動設備平臺是IPhone或Android。或者是PC電腦上使用 Safari瀏覽器調試。java
jQuery Msobile 都能作什麼?
一、jQuery Mobile爲開發移動應用程序提供了很是簡單的用戶接口jquery
二、這種接口的配置是標籤驅動的，這意味着咱們能夠在HTML中創建大量的程序接口而不不須要寫一行js代碼android
三、提供了一些自定義的事件用來探測移動和觸摸動做。例如tap(敲擊)、tap-and-hold（點擊並按住）、swipe、orientation change瀏覽器
四、使用一些增強的功能時須要參照一下設備瀏覽器支持列表緩存
五、使用預設主題能夠輕鬆定製應用程序外觀服務器
jQuery Mobile 基本頁面結構
大部分jQuery Mobile Web應用程序都要遵循下面的基本模板app
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile基本頁面結構</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<p>Content goes here</p>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
在android模擬器中顯示效果以下：
代碼說明
要使用 jQuery Mobile，首先須要在開發的界面中包含以下3個內容
- CSS文件jquery.mobile-1.0a1.min.css
- jQuery library jquery-1.4.3.min.js
- jQuery Mobile library jquery.mobile-1.0a1.min.js
在上面的頁面基本模板中，引入這三個元素採用的是jQuery CDN方式，開發人員也能夠下載這些文件及主題到你的服務器上。
咱們能夠看到頁面中的內容都是包裝在div標籤中並在標籤中加入data-role=」page」屬性。 這樣jQuery Mobile就會知道哪些內容須要處理。
說明：data-屬性是HTML5新推出的頗有趣的一個特性，它可讓開發人員添加任意屬性到html標籤中,只要添加的屬性名有「data-」前綴。
在」page」div中，還能夠包含」header」， 」content」， 」footer」的div元素,這些元素都是可選的，但至少要包含一個 「content」div。
| div dat-role=」header」></div> |
在頁面的頂部創建導航工具欄，用於放置標題和按鈕（典型的至少要放一個「返回」按鈕，用於返回前一頁）。經過添加額外的屬性 data-position=」fixed」，能夠保證頭部始終保持屏幕的頂部 |
| <div dat-role=」content」></div> |
包含一些主要內容，例如文本內容，圖像，按鈕，列表，表單等等 |
| <div dat-role=」footer」></div> |
在頁面的底創建工具欄，添加一些功能按鈕 爲了確保它始終保持在頁面的底部，能夠給其加上data-position=」fixed」 屬性 |
多個頁面在同一個頁面中
有一種創建在一個 HTML頁面基礎之上的頁面結構，即在一個頁面中添加多個data-role=」page」。這意味着瀏覽器僅僅獲得一個頁面，就能夠實現頁面平滑切換的客戶體驗。參看下面實例：(目前有bug)
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile: Pages within Pages</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"/>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header"><h1>Home</h1></div>
<div data-role="content"><p><a href="#about">About this app</a></p></div>
</div>
<div data-role="page" id="about">
<div data-role="header"><h1>About This App</h1></div>
<div data-role="content"><p>This app rocks!<a href="#home">Go home</a></p></div>
</div>
</body>
</html>
正如所見，上面的代碼中包含了兩個」page」:主頁（id爲home）和」about」(id爲about)。從Home連接到About頁面採用的是鏈接地址爲#about，about頁面返回到首頁的連接地址爲#home。jQuery Mobile會自動切換連接的目的div顯示到移動瀏覽器中。該框架會隱藏除第一個包含data-role=」page」div之外的其它」page」
AJAX 導航
爲了實如今移動設備上的無縫客戶體驗，jQuery Mobile默認採用AJAX的方式載入一個目的連接頁面。所以，當在瀏覽器中點擊一個連接打一個新的頁面時，jQuery Mobile接收這個連接，經過AJAX的方式請求連接頁面，並把請求獲得的內容注入到當前頁面的DOM裏。另外還須要確保請求的頁面url惟一標識的。
這樣的結果就是用戶交互始終保存在同一個頁面中。新頁面中的內容也會輕鬆的顯示到這個頁面裏。這種平滑的客戶體驗相比於傳統打開一個新的頁面並等待數秒的方式要好不少。當一個新的頁面作爲新的data-role=」page」 div插入到主頁面時，主頁面會有效的緩存取到的內容。使得當要訪問一個頁面時可以儘快的顯示出來。這個工做過程聽起來難以置信的複雜，可是作爲開發人員的咱們大部份不須要了解其中工做的具體細節。只要能看到效果就OK。
注意:若是你不想採用AJAX的方式加載頁面，而想以原生的頁面加載方式打開一個連接頁面，只須要在打開的連接上添加屬性 rel=」external」屬性
頁面切換效果
你可使用多種不一樣的切換效果來顯示新頁面內容，只須要在連接裏添加data-transition屬性便可。可能的值以下
| slide |
從右到左切換（默認） |
| slideup |
從下到上切換 |
| slidedown |
從上到下切換 |
| pop |
以彈出的形式打開一個頁面 |
| fade |
漸變退色的方式切換 |
| flip |
舊頁面翻轉飛出，新頁面飛入 |
例如 <p><a href=」#about」 data-transition=」flip」>關於頁面</a></p>
在瀏覽器中查看效果
注意：查看以上的效果須要您的瀏覽器支持jQuery Mobile。例如：Mobile Safari, DeskTop Safari,或Chrome。
對話框
經過在連接中添加data-rel=」dialog」的屬性，可使連接頁面的顯示方式變爲對話框。給顯示的對話框加入切換的效果也是一個不錯的選擇
例如咱們將about的連接變成一個對話框並加入相應的切換效果。代碼以下
<p><a href="#about" data-rel="dialog" data-transition="slideup">About this app</a></p>
注意：目前的測試版本存在問題，當在一個頁面中寫多個」page」時在以dialog的方式打開一個頁面時，不會出現對話框效果
按鈕
按鈕是觸摸式應用程序的一部分，它們扮演連接的功能，由於它們提供了更大的目標，當你點擊連接的時候（比較適合，手指比較胖的人羣）
在jQuery Mobile中把一個連接變成button的效果，只須要在標籤中添加data-role=」button屬性便可」。例如：
<div data-role="content">
<p><a href="#about" data-role="button">About this app</a></p>
</div>
...
<div data-role="content">
<p>This app rocks!</p>
<a href="#home" data-role="button">Go home</a>
</div>
另外jQuery Mobile也會自動的轉換像表單元素中的submit，reset，button，或image爲按鈕樣式。
還能夠利用data-icon屬性創建各式各樣的按鈕，創建行內按鈕和按鈕組（水平或垂直的）
格式化文本
爲了使其儘量的靈活，jQuery Mobile使更多的普通HTML內容更加獨立。加入適當的縮進使內容的可讀性更強。
有兩種佈局方法使其格式化變得更簡單：佈局表格和可摺疊的內容塊
- 佈局表格：組織內容以列的形式顯示，有兩列表格，和三列表格
- 可摺疊的內容：當點擊內容塊的標題，則會將其隱藏的詳細內容展示出來
下面是一個可摺疊內容的實例，單擊標題將看到具體的內容，再點擊標題則會將展示的內容隱藏。
<!DOCTYPE html>
<html>
<head>
<title>Collapsible Content Demo</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"/>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Home</h1>
</div>
<div data-role="content">
<div data-role="collapsible" data-state="collapsed">
<h3>About this app</h3>
<p>This app rocks!</p>
</div>
</div>
</div>
</body>
</html>
觸摸選擇的表單元素
jQuery Mobile會自動替換標準的HTML表單元素，例如文本框，複選框，列表框。以這種自定義的樣式工做在觸摸設備上的表單元素，易用性更強。
例如，複選框將會變得很大，易於點選。點擊下拉列表時，將會彈出一組大按鈕列表選項，提供給用戶選擇。
該框架支持新的HTML5元素，例如search和range。另外你能夠利用列表框並添加data-role=」slider」並添加兩個option選項，建立不錯的」打開/關閉」開關，
另一個不錯的特色是組合單選框和組合複選框，能夠利用fieldset元素添加屬性data-role=」controlgroup」來建立一組單選按鈕或複選框，jQuery Mobile自動格式化他們的格式。使它們看上去更fashion!
通常來講，開發者不須要關心表單的那些高級特性，開發者僅須要以正常的方式建立你的表單，jQuery Mobile框架會幫你完成剩餘的工做。另外有一件事情須要開發人員來完成，即便用div或fieldset 屬性data-role=」fieldcontain」包裝每個label/field。這樣jQuery Mobile會在label/field對之間添加一個水平分割條。這樣的對齊方式可使其更容易查找。
下面是一個jQuery Mobile版的表單元素
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Form Demo</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"/>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>
Ice Cream Order Form
</h1>
</div>
<div data-role="content">
<form action="#" method="get">
<div data-role="fieldcontain">
<label for="name">
Your Name:
</label>
<input type="text" name="name" id="name" value=""/>
</div>
<div data-role="controlgroup">
<legend>
Which flavour(s) would you like?
</legend>
<input type="checkbox" name="vanilla" id="vanilla" class="custom"/>
<label for="vanilla">
Vanilla
</label>
<input type="checkbox" name="chocolate" id="chocolate"
class="custom"/>
<label for="chocolate">
Chocolate
</label>
<input type="checkbox" name="strawberry" id="strawberry"
class="custom"/>
<label for="strawberry">
Strawberry
</label>
</div>
<div data-role="fieldcontain">
<label for="quantity">
Number of Cones:
</label>
<input type="range" name="quantity" id="quantity" value="1"
min="1" max="10"/>
</div>
<div data-role="fieldcontain">
<label for="sprinkles">
Sprinkles:
</label>
<select name="sprinkles" id="sprinkles" data-role="slider">
<option value="off">
No
</option>
<option value="on">
Yes
</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="store">
Collect from Store:
</label>
<select name="store" id="store">
<option value="mainStreet">
Main Street
</option>
<option value="libertyAvenue">
Liberty Avenue
</option>
<option value="circleSquare">
Circle Square
</option>
<option value="angelRoad">
Angel Road
</option>
</select>
</div>
<div class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<button type="submit" data-theme="d">
Cancel
</button>
</div>
<div class="ui-block-b">
<button type="submit" data-theme="a">
Order Ice Cream
</button>
</div>
</fieldset>
</div>
</div>
</div>
</body>
</html>
列表視圖
列表視圖是jQuery Mobile中功能強大的一個特性。它會使標準的無序或有序列表應用更普遍。應用方法就是在ul或ol標籤中添加data-role=」listview」屬性。
下面的一些情景將會用到建立列表視圖
簡單的文件列表項
- 簡單的文件列表，會有一個好看的盒環繞着每個列表項
- 連接列表，框架會自動爲每個連接加一個箭頭」>」，顯示在連接按鈕的右側
- 嵌套列表，若是你在一個li中嵌套另外一個ul，jQuery Mobile會爲這個嵌套列表自動創建一個」page」，併爲它的父li自動加一個連接，這樣很容易實現樹狀菜單選項，設置功能等等。
- 分隔線的按鈕列表，在一個li中存放2個連接，你能夠創建一個還垂直分隔條，用戶可點擊左側或右側的列表選項，展示不一樣的內容
- 記數氣泡 若是你在列表選項中添加class=」ui-li-count」，框架會在其中生成一個」小泡泡」圖標顯現於列表選項的右側，並在」小泡泡」中顯示一些內容。相似在收信箱中看到已經收到的信息條數
- 查找過濾 在ul或ol中添加data-filter=」true」屬性。則這個列表項就具有的查詢的功能。」Filter result…」文本框將會顯示在列表項的上面，容許用戶根據條件來將一個大的列表項變小（過濾顯示）
- 列表分隔 將列表項分割，能夠在任意列表項上添加屬性data-role=」list-divider
- 列表縮略圖和圖標。將img元素放在在列表項的開始， jQuery Mobile將會以縮略圖的形式來展示，圖片的大小爲80 X 80像素。若是添加class=」ui-li-icon」類樣式img元素的大小將會以16 X 16像素的圖標
如下是一個列表項的實例
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Lists Demo</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"/>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>
Lists Demo
</h1>
</div>
<div data-role="content">
<h2 style="padding: 1em 0;">
A list view
</h2>
<ul data-role="listview" data-inset="true">
<li>
Cat
</li>
<li>
Dog
</li>
<li>
Mouse
</li>
<li>
Squirrel
</li>
</ul>
<h2 style="padding: 1em 0;">
A list of links
</h2>
<ul data-role="listview" data-inset="true">
<li>
<a href="#">About this app</a>
</li>
<li>
<a href="#">Buy ice cream</a>
</li>
<li>
<a href="#">Find a store</a>
</li>
</ul>
<h2 style="padding: 1em 0;">
Nested lists
</h2>
<ul data-role="listview" data-inset="true">
<li>
Play
<ul>
<li>
<a href="#">Easy</a>
</li>
<li>
<a href="#">Medium</a>
</li>
<li>
<a href="#">Hard</a>
</li>
</ul>
</li>
<li>
Settings
<ul>
<li>
<a href="#">Graphics</a>
</li>
<li>
<a href="#">Sound</a>
</li>
<li>
<a href="#">Device</a>
</li>
</ul>
</li>
<li>
Highscores
<ul>
<li>
<a href="#">View</a>
</li>
<li>
<a href="#">Submit</a>
</li>
<li>
<a href="#">Reset</a>
</li>
</ul>
</li>
</ul>
<h2 style="padding: 1em 0;">
A split button list with filter
</h2>
<ul data-role="listview" data-inset="true" data-filter="true">
<li>
<a href="#">The Grapes of Wrath</a>
<a href="#">Buy This Book</a>
</li>
<li>
<a href="#">The Trial</a>
<a href="#">Buy This Book</a>
</li>
<li>
<a href="#">A Tale of Two Cities</a>
<a href="#">Buy This Book</a>
</li>
</ul>
<h2 style="padding: 1em 0;">
A list with count bubbles
</h2>
<ul data-role="listview" data-inset="true">
<li>
<a href="#">SuperWidgets</a>
<span class="ui-li-count">14</span>
</li>
<li>
<a href="#">MegaWidgets</a>
<span class="ui-li-count">0</span>
</li>
<li>
<a href="#">WonderWidgets</a>
<span class="ui-li-count">327</span>
</li>
</ul>
</div>
</div>
</body>
</html>
主題
jQuery Mobile渲染的灰色、黑色和藍色及圓形的組件使其看起來很漂亮，可是若是你的整個應用都使用這樣的樣式，將會使其變得很乏味。jQuery Mobile容許你自定義官方一些組件的主題。例如：
- Font family
- Drop shadows
- 按鈕和盒狀元素的邊框圓角半徑
- 圖標組件
另外，每個主題包含26種不一樣顏色的切換（標記從a 到z），能夠控制前景顏色，背景色和漸變色，典型用法是使頁面元素部分替換，你可使用data-theme屬性。例如：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"/>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Home</h1>
</div>
<div data-role="content">
<a href="#" data-role="button" data-theme="a">About this app</a>
<a href="#" data-role="button" data-theme="b">About this app</a>
<a href="#" data-role="button" data-theme="c">About this app</a>
<a href="#" data-role="button" data-theme="d">About this app</a>
<a href="#" data-role="button" data-theme="e">About this app</a>
</div>
</div>
</body>
</html>
事件
框架還提供了簡單的用戶接口，並添加了移動設備支持的特殊事件。
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Events</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"/>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
<script type="text/javascript">
$( function() {
$('body').bind( 'taphold', function( e ) {
alert( 'You tapped and held!' );
e.stopImmediatePropagation();
return false;
} );
$('body').bind( 'swipe', function( e ) {
alert( 'You swiped!' );
e.stopImmediatePropagation();
return false;
} );
} );
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>jQuery Mobile Events</h1>
</div>
<div data-role="content">
<p>Try:</p>
<ul>
<li>Tapping and holding</li>
<li>Swiping</li>
</ul>
</div>
</div>
</body>
</html>
- 1. jQuery Mobile 入門教程
- 2. jQuery Mobile入門教程
- 3. jQuery Mobile 入門基礎教程
- 4. jQuery mobile入門
- 5. jQuery Mobile 快速入門
- 6. jQuery入門教程
- 7. 開發者必讀jQuery Mobile入門教程
- 8. 《jQuery Mobile快速入門》—— 2.1 jQuery Mobile頁面模板
- 9. jQuery教程——jQuery的快速入門
- 10. 移動WebApp開發-jQuery Mobile入門
- 更多相關文章...
- • Memcached入門教程 - NoSQL教程
- • jQuery Mobile 教程 - jQuery Mobile 教程
- • YAML 入門教程
- • Github 簡明教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。