利用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/