电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 使用 HTML5 创建移动设备上的离线 Web 应用程序（2） [打印本页]

作者: look_w 时间: 2018-9-19 20:39 标题: 使用 HTML5 创建移动设备上的离线 Web 应用程序（2）

示例应用程序本节概述示例应用程序 MyHomeStuff。它是一个简单的库存管理应用程序，可以用于追踪所拥有的物资。图 2 显示的是 iPhone 上的应用程序。
图 2. iPhone 视图

为简单起见，此处省略服务器段的数据同步。图 3 显示的是 Palm Pre Web 浏览器上的 MyHomeStuff 库存管理应用程序。
图 3. Palm Pre 视图

屏幕上半段是所有输入项目（书籍、电脑等）的概览。
当用户在清单中选择某一项目，其明细（Id、Quantity、Name）在表单中部显示。使用 Update 按钮可改变所选项目的明细。使用 Delete 按钮还可从应用程序中删除所选项目。在表单中输入项目的数量和名称并选择 Create 按钮可创建新项目。
应用程序状态显示在屏幕下半段。
HTML 细节HTML 页面包含声明、原标记，这些用于移动优化显示、对外部文件（manifest、JavaScript、css）是引用、以及组成应用程序基本结构必需的 HTML 元素。清单 1 显示了其代码。
清单 1. HTML 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

            <!DOCTYPE HTML>
            <html manifest="MyHomeStuff.manifest">
            <head>
            <meta name="viewport" content="width=device-width;
            initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
            <title>MyHomeStuff</title>
            <script type="text/javascript" src="MyHomeStuff.js" ></script>
            </head>
            <body onload="onInit()">
            <h3>Overview</h3>
      <ul id="itemData" ></ul>
<h3>Details</h3>
      <form name="itemForm">
         <label for="id">Id: </label>
         <input type="text" name="id" id="id" size=2 disabled="true"/>
         <label for="amount">Amount: </label>
         <input type="text" name="amount" id="amount" size = 3/>
         <label for="name">Name: </label>
         <input type="text" name="name" id="name" size=16 /> <br>
         <br>
         <input type="button" name="create" value="create"
            onclick="onCreate()" />
         <input type="button" name="update" value="update"
            onclick="onUpdate()" />
         <input type="button" name="delete" value="delete"
      </form>
<h4>Status</h4>
      <div id="status"></div>
</body>
</html>

HTML 元素的事件处理属性指定当页面初始加载（onload）及点击按钮元素（onclick）时执行哪些 JavaScript 函数。
离线 Web 应用程序的 HTML 页面以 <!DOCTYPE HTML> 标记开始。通过 <html manifest="MyHomeStuff.manifest"> 标记中的清单属性来引用清单。
如上所述，清单指定需要加载到缓存中的文件。本应用程序包含一个 HTML 文件和一个 JavaScript 文件。引用清单的 HTML 文件自动包含在应用程序缓存中。清单只包含以下部分：
清单 2. Manifest 文件

1
2
3

CACHE MANIFEST

MyHomeStuff.js

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)