jQuery Mobile
簡介
簡介：jQuery Mobile框架可以輕松的幫助我們實現非常好看的、可跨設備的Web應用程序。
jQuery Msobile 都能做什么
1. jQuery Mobile為開發移動應用程序提供了非常簡單的用戶接口
2. 這種接口的配置是標簽驅動的，這意味著我們可以在HTML中建立大量的程序接口而不不需要寫一行js代碼
3. 提供了一些自定義的事件用來探測移動和觸摸動作。例如tap(敲擊)、tap-and-hold（點擊并按住）、swipe、orientation change
4. 使用一些加強的功能時需要參照一下設備瀏覽器支持列表
5. 使用預設主題可以輕松定制應用程序外觀
jQuery Mobile 基本頁面結構
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Mobile基本頁面結構</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<link rel="stylesheet" />
<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>
要使用 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
<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”。
這意味著瀏覽器僅僅得到一個頁面，就可以實現頁面平滑切換的客戶體驗。
<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>
AJAX 導航
為了實現在移動設備上的無縫客戶體驗，
jQuery Mobile默認采用AJAX的方式載入一個目的鏈接頁面。
因此，當在瀏覽器中點擊一個鏈接打一個新的頁面時，
jQuery Mobile接收這個鏈接，通過AJAX的方式請求鏈接頁面，
并把請求得到的內容注入到當前頁面的DOM里。
另外還需要確保請求的頁面url唯一標識的。
頁面切換效果
你可以使用多種不同的切換效果來顯示新頁面內容，
只需要在鏈接里添加data-transition屬性即可。可能的值如下
| 屬性 | 含義 |
|---|---|
| slide | 從右到左切換（默認） |
| slideup | 從下到上切換 |
| slidedown | 從上到下切換 |
| pop | 以彈出的形式打開一個頁面 |
| fade | 漸變退色的方式切換 |
| flip | 舊頁面翻轉飛出，新頁面飛入 |
對話框
通過在鏈接中添加data-rel=”dialog”的屬性，
可以使鏈接頁面的顯示方式變為對話框。
給顯示的對話框加入切換的效果也是一個不錯的選擇
<p><a href="#about" data-rel="dialog" data-transition="slideup">About this app</a></p>
按鈕
在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使更多的普通HTML內容更加獨立。
加入適當的縮進使內容的可讀性更強。
有兩種布局方法使其格式化變得更簡單：布局表格和可折疊的內容塊
布局表格：組織內容以列的形式顯示，有兩列表格，和三列表格
可折疊的內容：當點擊內容塊的標題，則會將其隱藏的詳細內容展現出來
下面是一個可折疊內容的實例，單擊標題將看到具體的內容，再點擊標題則會將展現的內容隱藏。
<!DOCTYPE html>
<html>
<head>
<title>Collapsible Content Demo</title>
<link rel="stylesheet" />
<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渲染的灰色、黑色和藍色及圓形的組件使其看起來很漂亮，但是如果你的整個應用都使用這樣的樣式，將會使其變得很乏味。jQuery Mobile允許你自定義官方一些組件的主題。例如：
- Font family
- Drop shadows
- 按鈕和盒狀元素的邊框圓角半徑
- 圖標組件
另外，每一個主題包含26種不同顏色的切換（標記從a 到z），可以控制前景顏色，背景色和漸變色，典型用法是使頁面元素部分替換，你可以使用data-theme屬性。例如：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" />
<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" />
<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>
觸摸選擇的表單元素
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"
/>
<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"
/>
<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>
