一、引用合適的jQueryMobile.css和jQuery.mobile.js
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, maximum-scale=1" />
<title>Monster Live Messenger</title>
<link href="jquery.mobile/jquery.mobile-1.2.0.css" rel="stylesheet" />
<script src="jquery/jquery-1.8.3.js"></script>
<script src="jquery.mobile/jquery.mobile-1.2.0.min.js"></script>
</head>
|
•
Device-width: 偵測到的裝置寬度
•
initial-scale: ：第一次進入頁面的初始比例
•
Maximum-scale: 如設為1，即為使用者無法再放大比例
二、Meta屬性
三、行動網頁結構
JqueryMobile 網頁都被包覆在data-role="page"
id="home" 的div中，所有標籤都有data-role 視為JQueryMobile 的角色，其中每個div的id均為獨一無二的識別，它代表每個頁面的名稱。
JQueryMobile 的data-role
l 表頭 data-role="header"
l 表身 data-role="
content "
l 表尾 data-role="footer"
l 按鈕 data-role="button" , 只允許放置在超連結<a data-role>
JQueryMobile 的其他的屬性
l data-inset : 加上圓弧型的css
l data-transition : 頁面過場特效 css
l data-rel:
彈跳視窗的特效
範例程式碼
|
<div data-role="page" id="home">
<div data-role="header">
<h3>
Monster Live Messenger</h3>
</div>
<div data-role="content">
<a href="contacts.html" data-ajax="false" data-role="button" data-inset="true">contacts</a>
<a href="photos.html" data-role="button" data-inset="true">photos</a>
</div>
<div data-role="footer">
<a href="#about" data-transition="flip" data-rel="dialog">abount</a>
</div>
</div>
|
展示結果:
四、如何呼叫其他頁面
舉例如下: 在頁尾中有About連結，可點擊到另一個頁面
l 轉換特效 data-transition: flip 翻轉…
l 外貌樣式: data-rel: dialog 以對話方塊的樣式呈現此頁
l 轉頁: a href=”#about” 以導覽至about頁面
ü 連結到頁面:
1.
同一檔案: <a
href=‘#divName’ … >
2.
不同檔案: <a href=“相對路徑檔案”>
<div data-role="footer">
<a href="#about" data-transition="flip" data-rel="dialog">abount</a>
</div>
|
About 頁面
<div data-role="page" id="about">
<div data-role="header">
<h3>About
MLM</h3>
</div>
<div data-role="content">
<img width="100%" src="images/MLMLogo.png" />
</div>
<div data-role="footer">
<h3>copyright
2013</h3>
</div>
</div>
|
範例
<a></a>常用屬性
• data-role: 其他: button… 等
• data-ajax: false:頁面整個刷新 , true:頁面不會整個刷新
• data-rel: 呈現的樣式
• showDialog 對話方塊
• Back 回上一頁
• Popup 跳出視窗
• data-transition: 置換網頁的特效
<div data-role="content">
<a href="contacts.html" data-ajax="false" data-role="button" data-inset="true">contacts</a>
<a href="photos.html" data-role="button" data-inset="true">photos</a>
</div>
|
五、如何使用列表清單
JQueryMobile 的data-role :
l listView: data-role="listview" : 適用在ul 標籤
JQueryMobile 的其他屬性:
l data-theme: 佈景主題
l data-filter: 搜尋清單 : 自動過濾符合的列表清單
<div id="conent" data-role="content">
<!-- 增加列表清單，從jquery 程式控制 -->
<ul data-role="listview" data-theme="a" id="superheroes" data-filter="true"></ul>
</div>
|
列表展示樣式
六、減少Loading負擔
•
引用必要的JS和css在<head></head> 樣式
<body>
<div data-role="page" id="contacts_superheroes">
<div id="header" data-role="header">
<a data-role="button" data-rel="back">back</a>
<h3>this
is a super heroes</h3>
</div>
<div id="conent" data-role="content">
<!-- 增加列表清單，從jquery 程式控制 -->
<ul data-role="listview" data-theme="a" id="superheroes" data-filter="true"></ul>
</div>
<div id="footer" data-role="footer">
</div>
</div>
<!--
為了加快下載速度，減少等待的時機 -->
<script src="jquery/contacts.js"></script>
<script src="jquery/pageinit.js"></script>
</body>
|
從JSON格式讀取資料
var contacts_data = {
"list": {
"superheroes": [
{name: "Hulk", id: "TheIncredibleHulkFilm"},
{name: "Iron
Man", id: "IronMan2"},
{name: "Thor", id: "ThorMovie"},
{name: "Captain
America", id: "CaptainAmericaMovie"},
{name: "Batman", id: "batman"},
{name: "Spider-Man", id: "theamazingspiderman"}
],
"groups": [
{name: "JavaScript.tw", id: "186298388138174"},
{name: "node.js@<台灣>@", id: "262800543746083"},
{name: "HTML5@<與>@CSS3@<在台灣>@", id: "195360017158294"}
]
}
};
|
七、初始化頁面
在jqueryMobile 的網頁結構中，可以把好頁個相關頁面放在同一頁面上<html></html>，所以即使觸發page_lode事件，反而造成所有<div data-role=’page’> 觸發page_lode事件，如果只需觸發某頁面data-role=’page’的初始事件時，使用
pageinit 被委派給其他函式一起執行該事件
$(document).delegate("#contacts_superheroes", "pageinit", function () {
var superheroes = contacts_data.list.superheroes;
var data = "";
for (var i = 0; i < superheroes.length;
i++) {
var picture = "http://graph.facebook.com/" + superheroes[i].id + "/picture";
data += "<li>";
data += "<img src='" + picture + "' width='100%'>";
data += "<h3>" + superheroes[i].name + "</h3>";
data += "<p>" + superheroes[i].id + "</p>";
data += "</li>";
}
$("#superheroes").append(data);
$("#superheroes").listview("refresh");
});
|
八、有超連結的ListView
在<li></li>
內包覆一層<a></a>
$(document).delegate("#contacts_superheroes", "pageinit", function () {
var superheroes = contacts_data.list.superheroes;
var data = "";
for (var i = 0; i < superheroes.length;
i++) {
var picture = "http://graph.facebook.com/" + superheroes[i].id + "/picture";
data += "<li>";
data += "<a
href='http://graph.facebook.com/'"+superheroes[i].id+
"/picture>";
data += "<img src='" + picture + "' width='100%'>";
data += "<h3>" + superheroes[i].name + "</h3>";
data += "<p>" + superheroes[i].id + "</p>";
data += "</a>"
data += "</li>";
}
$("#superheroes").append(data);
$("#superheroes").listview("refresh");
});
|
九、加上分類區
var superheroes = contacts_data.list.superheroes;
var data = "";
data += "<li
data-role='list-divider'>";
data+="<h3>super
Heroes</h3>"
data += "</li>"
for (var i = 0; i < superheroes.length;
i++) {
var picture = "http://graph.facebook.com/" + superheroes[i].id + "/picture";
data += "<li>";
data += "<a href='http://graph.facebook.com/'"+superheroes[i].id+ "/picture>";
data += "<img src='" + picture + "' width='100%'>";
data += "<h3>" + superheroes[i].name + "</h3>";
data += "<p>" + superheroes[i].id + "</p>";
data += "</a>"
data += "</li>";
}
|
呈現樣式
Button 加上Icon
<a data role="button" data rel="back">back</a>
|
按鈕屬性 Data-icon=“back” Data-iconpose
位置 Left
位置Righ
位置NoText
更多相關資料請參考 http://demos.jquerymobile.com/1.4.5/
