2014年11月16日 星期日

Jquery mobile 開發行動裝置web 瀏覽器


一、引用合適的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: 佈景主題
預設共有a,b,c,d,e 如下所示，如需客製作設定，請參考http://demos.jquerymobile.com/1.2.0/docs/api/themes.html

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/



張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)