利用JQuery Mobile開發web app

時間 2019-11-25

標籤利用 jquery mobile 開發 web app 欄目 JQuery 简体版

原文原文鏈接

什麼是web app

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

開發成本低——採用web開發技術，不須要考慮跨平臺以及底層適配問題；
升級簡單——不須要通知用戶，在服務端更新文件便可；
維護方便——本質是站點，因此維護方式於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

頭部信息

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>

效果以下圖：

例子中，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>

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

點擊鏈接後，跳轉以下圖：

頁面事件

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能夠實現複雜列表

詳情能夠參閱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>");

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

其實，咱們應該多加入一行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/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。