利用JQuery Mobile開發web app

什麼是web app

web app 是基於web的應用程序,是針對移動設備優化後的web站點,它具備php

  1. 開發成本低——採用web開發技術,不須要考慮跨平臺以及底層適配問題;
  2. 升級簡單——不須要通知用戶,在服務端更新文件便可;
  3. 維護方便——本質是站點,因此維護方式於web站點相同

等優勢。開發web app使用的技術:前端 html5 + css + JavaScript / 後端 php | java | .net。css

隨着 html5 的發展,咱們能使用愈來愈多的功能,好比:地理定位、本地數據儲存、音視頻播放、調用照相機、GPU硬件加速等等。html

web app具備原生應用程序特性,同時也具備web應用程序特性。web app能從一個應用,挑轉到另一個web app應用,這樣就提升了用戶體驗。前端

什麼是JQuery Mobile

jQuery Mobile 是建立移動 web 應用程序的框架,是 JQuery在手機上和平板上的一個版本。它適用於全部流行的智能手機和平板電腦,使用 HTML5 和 CSS3 經過儘量少的腳本對頁面進行佈局。它屏蔽了瀏覽器之間的差別,高級的瀏覽器可使用高級的樣式和功能;對於低級的瀏覽器能自動降級。html5

JQM(JQuery Mobile的簡寫,如下相同)提供了一整套的UI組件(組件的方法與屬性)、瀏覽器的事件以及官方文檔。java

JQM使用入門

所需的「材料」以下表所示:jquery

軟件及類庫 下載地址
JQuery Mobile 類庫 http://jquerymobile.com/download/
JQuery Mobile 官方文檔 http://api.jquerymobile.com/category/all/
JQuery Mobile 官方demo http://demos.jquerymobile.com/1.4.5/
JQuery Mobile 中文文檔 http://www.jqmapi.com/api1.2/index.html

文件夾佈局

文件夾佈局及源文件安排以下圖:web

image

頭部信息

index.html 的頭部信息源代碼以下:後端

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet"" href="jquery.mobile-1.4.5.css">
    <script src="jquery.js"></script>
    <script src="jquery.mobile-1.4.5.js"></script>
</head>

注意:屬性值不加雙引號(」」)括起來也是能夠的。api

其中,

<meta name="viewport" content="width=device-width, initial-scale=1">

用來初始化移動設備的屏幕顯示:頁面寬度等於設備寬度,縮放比例設置爲1也就是禁止縮放。

 

 

頁面

在網頁的HTML中,插入以下代碼:

<body>

<div data-role="page">

  <div data-role="header">
    <h1>馮煜博的JQM學習</h1>
  </div>

  <div data-role="content">
    <p>我是一名自由的開發者!</p>
  </div>

  <div data-role="footer">
    <h1>頁腳文本</h1>
  </div>

</div>

</body>

效果以下圖:

image

例子中,html代碼<div>的屬性值釋義以下:

  • data-role="page" 是顯示在瀏覽器中的頁面
  • data-role="header" 建立頁面上方的工具欄(經常使用於標題和搜索按鈕)
  • data-role="content" 定義頁面的內容,好比文本、圖像、表單和按鈕,等等
  • data-role="footer" 建立頁面底部的工具欄

添加頁面

在 jQuery Mobile,能夠在單一 HTML 文件中建立多個頁面。經過惟一的 id 來分隔每張頁面,並使用 href 屬性來鏈接彼此,完整的<body>示例代碼以下:

<body>

<div data-role="page" id="index">
  <div data-role="header">
    <h1>馮煜博的JQM學習</h1>
  </div>

  <div data-role="content">
    <p>我是一名自由的開發者!</p>
    <a href="#pagetwo">轉到頁面一</a>
  </div>

  <div data-role="footer">
    <h1>頁腳文本</h1>
  </div>
</div>

<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#index">轉到頁面一</a>
  </div>
</div>

</body>

顯示的效果及頁面間跳轉以下圖:

image點擊鏈接後,跳轉以下圖:

image

 

頁面事件

JQuery Mobile擁有許多頁面事件,從w3school事件文檔截取以下表:

Page initialization - 在頁面建立前、當頁面建立時、頁面初始化以後

pagebeforecreate 在頁面建立前觸發。
pagecreate 在頁面建立時觸發,還未加載頁面元素。
pageinit 當頁面已經初始化完成時觸發。

Page Load/UnLoad - 當外部頁面加載時、卸載時或遭遇失敗時

pageload 在頁面成功加載並插入 DOM 後觸發。
pagebeforeload 在做出任何加載請求以前觸發。

Page Transition - 在頁面過渡以前和以後

pagebeforeshow 「去的頁面」以前,過渡動畫開始以前觸發。頁面2
pagebeshow 「去的頁面」開始加載,過渡動畫完成以後觸發。頁面2
pagebeforehide 「來的頁面」觸發,過渡動畫開始前觸發。頁面1
pagehide 「來的頁面」觸發,過渡動畫完成後觸發。頁面1

 

舉個例子

<div data-role="page" id="index">
  <div data-role="header">
    <h1>馮煜博的JQM學習</h1>
  </div>

  <div data-role="content">
    <p>我是一名自由的開發者!</p>
    <a href="#pagetwo">轉到頁面一</a>
  </div>

  <div data-role="footer">
    <h1>頁腳文本</h1>
  </div>
</div>
<script>
$(document).on("pageinit", "#index", function(){
    alert("pageinit 被觸發");
});
</script>

 

JQM能夠實現複雜列表

image

詳情能夠參閱w3school列表內容文檔

JQM表格

表格的代碼以下:

<table data-role="table" id="movie-table" data-mode="reflow" class="ui-responsive">
    <thead>
        <tr>
            <th>表標題1</th>
            <th>表標題2</th>
            <th>表標題3</th>
        </tr>
    </thead>
    <tbody>
            <td>表元素1</td>
            <td>表元素2</td>
            <td>表元素3</td>
    </tbody>
</table>

更多示例及代碼,詳見JQuery Mobile官方Demo之table

 

JQM事件

綁定方法

在JQuery中,綁定事件的方法使用 ready() 。

$(document).ready(function(){
    //此處是JQuery事件
});

在JQuery Mobile中,推薦使用 on() 方法綁定事件。

$(document).on("pageinit", "#page", function(){
    //當頁面已經初始化而且完善樣式後發生。
});

 

綁定示例

在頁面中,咱們有一個列表(ul/ol)。

<ul data-role="listview" data-inset="true" id="list">
    <li><a href="#">i am a</a></li>
</ul>

爲了給其中的<a>添加單擊事件,咱們作以下操做:

$(document).on("pageinit", "#index", function(){
    $("#list").on("click", "a", 
        function(){
            //事件體
            alert("you click a!");
    });
});

這是一種方法,也能夠另外一種:

$(document).on("pageinit", "#index", function(){
    $("#list").on("click", "a",fun);
});
var fun = function(){
    alert("i am a");
}

 

經常使用函數

setTimeout() 方法用於在指定的毫秒數後調用函數或計算表達式——w3school文檔

//寫法一
setTimeout("alert('3 seconds!')",3000)
//寫法二
setTimeout(function(){
    alert("3 seconds");
}, 3000);

 

 

方法聲明

推薦使用第一種方法聲明一個函數:

var 函數名稱 = function(){
    //方法體
}

不建議使用第二種方法聲明一個函數:

function 函數名稱(){
    //方法體
}

 

 

動態刷新

對於以下代碼,咱們但願加入新的一行(<li><a href="#">i am a</a></li>)

<ul data-role="listview" data-inset="true" id="list">
    <li><a href="#">i am a</a></li>
</ul>

因而咱們調用該方法:

$("#list").append("<li><a href=\"#\">i am a</a></li>");

可是顯示的效果不盡如人意,以下圖。

image

其實,咱們應該多加入一行JQuery代碼,使腳本刷新樣式。完整的添加元素代碼以下:

$("#list").append("<li><a href=\"#\">i am a</a></li>");
$("#list").listview("refresh");    //刷新樣式必備

 

參考資料

http://www.imooc.com/learn/207

http://www.w3school.com.cn/jquerymobile/

相關文章
相關標籤/搜索