鲨鱼网
创建由jQuery Mobile驱动的移动web应用程序
创始人
2024-08-03 01:50:52
0次

开始之前

为了使本教发挥最大作用，您应该熟悉使用 HTML、JavaScript 和 CSS 构建 web 应用程序。另外，这个移动 web 应用程序附带的服务器端代码是用 PHP 和 MySQL 编写的。熟悉服务器端编程也有助于您跟随本教程的操作。如果您熟悉其他服务器端平台，比如 ASP Classic、ASP.Net 或 Java™ Server Pages，那么您可能会发现，服务器端代码很容易理解。熟悉 jQuery 并不是必须的，当然，熟悉它不会有坏处。事实上，本教程的目标读者是致力于探索新框架的移动程序员，而不是准备拓展到移动空间的 jQuery 专业人员。学习完本教程后，您将了解如何构建一个基本的 jQuery Mobile 应用程序以及如何在移动浏览器和后端服务器之间管理数据。这个应用程序演示如何在销售相关数据上执行基本记录操作(比如 insert、update、delete)。当您从多个浏览器运行您的移动 web 应用程序时，您将注意到它有多么通用。最后，您可以将您的移动 web 应用程序的快捷键安装在 iPod 和 Android 设备的主屏幕上，从而演示如何部署一个 web 应用程序。

关于本教程

本教程介绍 jQuery Mobile (JQM) 框架，该框架用于编写针对移动行业的主流浏览器的移动 web 应用程序。JQM 用于向一些移动设备(比如 iPhone、iPad、Android、WebOS、BlackBerry Version 6 (Torch, Playbook) 等等)上运行的基于 web 的应用程序提供直观统一的用户体验。本教程首先简要介绍 JQM 项目，以及 JQM 与 HTML5 的关系及其对后者的依赖。然后，本教程介绍构建一个 JQM 应用程序的众多方法中的一种，以及 JQM 增强基本 web UI 元素的一些方法。最后，本教程将关注一个简单的销售驱动导向自动化的需求。

针对这个问题，本教程制定一个计划来实现一个针对移动设备用户的解决方案，无需进行本地移动开发。完成后的应用程序将被演示，这样当您跟随本教程逐步构建自己的应用程序时，就知道本教程将把您带向何处。当您学习使用 JQM 实现这个解决方案时，我们将逐一检查源文件中的函数。本教程最后将介绍几个技巧，以帮助您的用户在他们的移动设备上更轻松地访问您的应用程序。

先决条件

要跟随本教程，您需要以下组件：

◆文本编辑器 — 可以使用您喜欢的任何文本编辑器。支持语法高亮功能的编辑器更好用。Notepad++ 是一个很好用的开源编辑器。

◆JQuery Mobile 链接 — 实际上您无需下载任何内容。必要的文件通过 jQuery's Content Delivery Network (CDN) 提供。

◆Web 浏览器— 这个浏览器用于查看 jQuery Mobile 帮助和文档。

◆WebKit (Safari) 或 Chrome Browser — 这些浏览器支持在桌面机上进行 jQuery Mobile 开发。

◆移动设备 — 可以使用 iPod Touch、Android、BlackBerry Torch 或具有类似功能的移动设备。

◆PHP 和 MySQL 托管环境 — 用于应用程序的服务器端。

我在一个 MacBook Pro 上创建本教程的代码样例，通过 VMWare Fusion 运行 Windows® 7。我使用 Notepad++ 编辑文件，因为它不仅拥有不错的语法高亮显示功能，还有安全的 FTP，可以使与基于服务器的 PHP 文件交互变得非常直观。您也可以在 vi 中编辑文件，但谁想这样做呢?为了使用 MySQL 数据库，我使用我的主机帐户可用的 phpMyAdmin。为了在一个物理设备上进行测试，我使用一个运行 Android 2.2 的 Nexus One 和一个运行 iOS 4.1 的 iPod Touch。

请参见 参考资料 获取帮助链接；下载 样例应用程序的源代码。#p#

jQuery Mobile

我们首先检查 JQM 以及如何使用它改进移动 web 应用程序开发体验。尽管 jQuery Core 可以完全安装使用，但 JQM 仍然处于婴儿期，在本文撰写之时还处于 alpha 阶段。我们可以看一看 JQM 项目期望实现的目标。

JQM — 最新的 jQuery 家族成员

JQM 的目标是在一个统一的 UI 中交付超级 JavaScript 功能，跨最流行的智能手机和平板电脑设备工作。与 jQuery 一样，JQM 是一个在 Internet 上直接托管、免费可用的开源代码基础。事实上，当 JQM 致力于统一和优化这个代码基时，jQuery 核心库受到了极大关注。这种关注充分说明，移动浏览器技术在极短的时间内取得了多么大的发展。

与 jQuery 核心库一样，您的开发计算机上不需要安装任何东西;只需将各种 *.js 和 *.css 文件直接包含到您的 web 页面中即可。这样，JQM 的功能就好像被放到了您的指尖，供您随时使用。

清单 1 展示了将 jQuery Mobile 文件添加到应用程序是多么简单!

清单 1. 将 jQuery Mobile 添加到应用程序

  1.   
  2. IBM JQuery Tutorial  
  4. /jquery.mobile-1.0a1.min.css"   />  
  5.      
  6.   
  7.   
  8.   
  9.   

清单 1 中的代码实际上是本教程的样例代码中的一个潜在高峰(sneak peak)，本教程稍后还将讨论它。注意，现在一个样式表已经直接从 jQuery 的 Content Delivery Network (CDN) 下载下来。CDN 用于分发跨 Internet 分发经常使用的文件，使得下载速度尽可能快。CDN 通常部署在一些大型基础架构上，通过在 Internet 上的一些战略位置放置文件，将这些文件需要传输的路径减小到最小距离。jQuery CDN 和其他类似 CDN 通常托管在一些世界级大型基础架构上，比如 amazon.com 和其他 Internet 巨头提供的基础架构。

除 CSS 文件外，这个头部还包含三个 JavaScript 文件。第一个 JavaScript 文件对缩减 形式的 jQuery 核心库的引用，然后是 JQM 库的缩减形式，最后是一个特定于应用程序的 JavaScript 文件 utils.js。缩减 意味着代码针对快速下载和解析进行过优化。记住，每个应用程序页面都需要下载这些文件，因此，应使它们的大小绝对最小(并依赖缓存!)来大幅提高应用程序性能。

清单 1 中的版本实际上是 jQuery Mobile alpha 发布 1。alpha 发布 2 已经可用，但由于存在一些 bug 行为，本教程依赖该代码的第一个 alpha 发布。您阅读本教程之时，这些 JQM 文件的一个更新版本可能已经可以下载。参见 参考资料 中 jQuery 的 CDN 链接，获取这些库文件的最新版本。JQM 受到 MIT 和 GPL 许可的双重许可;基本上，这意味着如果您保持这个 jQuery 属性，就能在您的应用程序中使用这些文件。

注意，也可以下载这些 jQuery 文件的一个副本并直接从您自己的 web 服务器托管它们。这种方法不是个坏主意，特别是当您正在发布一个依赖这个框架的商业应用程序时。这些框架可能会而且的确会发生更改，有时会损害依赖特定行为的应用程序。商业企业通常对可预测的行为更感兴趣，因为这种行为更容易支持;而不是总是追赶时髦。

面向触摸

JQM 是一个经过触摸优化的框架，用于为基于浏览器的移动 web 应用程序构建统一和理想的用户体验。您所知道的关于编写 web 应用程序的大部分知识仍然适用;但是，使应用程序看起来更统一这个目标是 JQM 方法的真正关键部分。JQM 采用一种特殊方式样式化标准表单元素，使其在视觉上更美观并更容易操作。请您仔细查看 图 1 中的图像，它们展示了 JQM 样式化表单元素的一个子集。

标准 JQM 表单元素（单选按钮、复选框、滑块和其他选择选项）的屏幕截图

图 1. JQM 表单元素

除便于触摸和样式化 UI 元素外，JQM 的真正魔力在于它管理屏幕过渡的方式。我们来看一看。#p#

应用程序架构

本节探索本教程的样例应用程序的架构，逐步演示构建过程的每个主要步骤。您可以逐步跟随本教程的操作，自己重建应用程序;或者，您也可以从 参考资料 下载完整的项目。

应用程序架构

这个应用程序 — 简单地命名为 jQuery tutorial — 跨两个主要平台实现：

◆移动代码，利用 JQM

◆服务器端代码，在一个 MySQL 数据库中提供数据持久性

所有服务器端交互通过一些 PHP 文件完成，数据在一个 MySQL 数据库中的一个名为 opportunities 的表中进行管理。

数据库结构非常简单，只有 4 个字段(参见 表 2)。

列名 注释
opp_id 一个条目的数值标识符，这个标识符通过数据库自动递增。
opp_person 潜在客户的姓名或名称。
opp_contact 潜在客户的联系信息。
opp_description 简短的商机说明。

图 5 展示了 phpMyAdmin 中的文件的结构。列标题包括 Field、Type、Collation、Attributes、Null、Default、Extra、Action。

数据库表结构的屏幕截图

图 5. 数据库表结构

您可以看到简单的结构和数据库类型。大部分条目是默认值。在一个生产应用程序中，您可能需要仔细考虑您的数据词典。

要启动应用程序，我使用 phpMyAdmin 的插入特性向数据库插入一些数据。图 6 显示了与本教程中显示的设备屏幕图像相关的数据的屏幕快照。列标题包括 opp_id、opp_person、opp_contact、opp_description。(查看图 6 的 大图。)

一些初始数据记录的屏幕截图

图 6. 一些初始数据记录

测试应用程序时，跳转到直接浏览下表是一个有用的健康检查。表 3 显示了应用程序使用的源文件清单。

表 3. 必要的应用程序源文件

文件 注释
header.php 包括 HTML 文档的头部分，包含必要的脚本标记来包含 JQM 文件。这个文件的内容在前面的 清单 1中已显示。
footer.php 包括任何 HTML 页脚信息。对于许多应用程序而言，这个信息包含 Google Analytics JavaScript glue 以帮助收集关于应用程序的统计数据。
index.php 应用程序用户界面的主页，充当部件控制器、来自一个类 MVC 范式的部件视图、或一个松散配置的 MVC 设计中的控制器的部件。
utils.php 这个文件用于放置所有数据访问例程。
db.php 这个文件用于存储数据库凭证。
utils.js 这个文件用于存储几个表单级验证脚本。
了解这些文件如何协同工作的最好方法是逐步检查每个文件，这是我们下面将介绍的内容。

构建应用程序

大多数应用程序的关键是创建正确的数据模型。如上节所述，这个应用程序的数据模型非常直观。在代码详解中，可以从 清单 5 中的数据库定义开始。

清单 5. opportunities SQL 脚本

  1.  CREATE TABLE IF NOT EXISTS `opportunities` (  
  2.   `opp_id` int(11) NOT NULL AUTO_INCREMENT,  
  3.   `opp_person` varchar(100) NOT NULL,  
  4.   `opp_contact` varchar(50) NOT NULL,  
  5.   `opp_description` varchar(500) NOT NULL,  
  6.   UNIQUE KEY `opp_id` (`opp_id`)  
  7. ) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=25 ;  

如果您想通过包含额外的字段来修改应用程序，可以通过两种方法将它们添加到数据库：一是通过 phpMyAdmin 这样的工具手动添加，如前面的 图 5 所示；二是通过扩展 SQL 脚本。数据库表就绪后，下一步是连接到数据库。可以通过一些 mysql 函数连接到数据库，如 清单 6 中的 db.php 所示。

清单 6. db.php

  2. $mysql_db = "databasename";  
  3. $mysql_user = "username";  
  4. $mysql_pass = "password";  
  5. $mysql_link = mysql_connect("localhost", $mysql_user, $mysql_pass);  
  6. mysql_select_db($mysql_db, $mysql_link);  
  7. ?>  

显然，您需要使用您自己的环境的数据库名、用户名和密码。如果您不能访问支持 MySQL 和 PHP 的主机帐户但想跟随本教程操作，则现在是配置您的环境的好时机。参见 参考资料 了解一些可用选项。

数据库就绪后，下一步是切换到一个自上而下的方法，这需要查看这个应用程序的主源文件 index.php，如 清单 7 所示。

清单 7. 主 UI 源文件

  2. require('db.php');  
  3. require('utils.php');  
  4. require('header.php');  
  5. ?>  
  6.       
  7.       
  8.     
    JQuery Tutorial
      
  9.     
  
  •       
  •   
  • $action = $_REQUEST['action'];  
  • if ($action == 'addnew') {  
  •    showOneOpp(-1);  
  • } else if ($action == 'upsert') {  
  •     if ($_REQUEST['id'] == '-1') {  
  •         addOpp($_REQUEST['person'],$_REQUEST['contact'],$_REQUEST['description']);  
  •     } else {  
  •         updateOpp($_REQUEST['id'],$_REQUEST['person'],$_REQUEST['contact'],  
  • $_REQUEST['description']);  
  •     }  
  •    showOpps();  
  • } else if ($action == 'delete') {  
  •     killOpp($_REQUEST['id']);  
  •     showOpps();  
  • } else if ($action == 'details') {  
  •     showOneOpp($_REQUEST['id']);  
  • } else {  
  •     showOpps();  
  • }  
  • ?>  
  •     
    •   
  •       
  •     Sample code for IBM developerWorks  
  •     
    •   
  •     
    •   
  •   
  •   
  •   

    • 这个 PHP 文件是服务器上的所有交互的入口点。根据一个名为 action 的参数的存在性和值，脚本执行不同的功能。在深入具体操作之前，请注意这个文档中的 jQuery Mobile 结构，该结构包含多个 div 元素，每个元素都带有相应 data-role，用于页面、页眉、内容和页脚。

    这个应用程序架构相当简单 — 页面每次加载时，其内容都将被 content div 中新生成的内容替代。在某种程度上，这可能带有欺骗性并返回一些旧的 web 应用程序习惯。也许是这样，但本教程的目标是在一个有用的真实世界场景中演示 JQM 的一些基本功能，因此，保持这个简单结构有助于实现所有目标。

    要理解发生了什么事，我们从上到下仔细查看一下 index.php。

    ◆db.php 文件被包含进来 — 这个文件向您提供数据库访问权。

    ◆utils.php 文件被包含进来 — 这个文件提供所有特定于这个应用程序的数据管理功能。

    ◆header.php 文件被包含进来 — 这个文件包含 jQuery Core 和 jQuery Mobile JavaScript 文件、jQuery Mobile CSS 文件以及一个特定于应用程序的 JavaScript 文件：utils.js。

    ◆JQM div 元素被定义，页眉包含一个 h1 标记和一个伴随标题文本。

    ◆通过从 $_REQUEST 内置数组提取建立 $action 变量。$_REQUEST 变量 coalesces $_GET 和 $_POST 数据，简化发送到这个页面的各种请求的处理过程。

    ◆使用以下选项评估 $action 变量，每个选项都调用 utils.php 中的一个或多个函数：

    ◆addnew — 显示一个空表单以添加一个新条目。当您正在参加商贸展或会见一位新的潜在客户时，这个特性可能正是您需要的。

    ◆upsert — 如果记录是新的，您可能想将它插入表中。如果记录已经存在，您需要更新它的列。如果 id 字段的值等于-1，说明您有一条全新的记录，必须执行插入操作。其他值代表一条有效记录、商机或标识符。

    ◆delete — 用户已请求删除这条记录。

    ◆details — 用户已经选择一个条目，想查看这个商机的细节。

    ◆如果 $action 变量为空，则表示只显示一列商机。这是页面首次加载时的默认行为。

    ◆页面最后包含 footer.php。在这个应用程序中，页脚包含一些 Google 分析代码，以便跟踪应用程序的使用情况。

    理解这个页面后，下一步是检查 utils.php 中包含的功能。特别是，您需要查看 showOpps 函数，该函数为用户界面生成一个商机列表，并引入一个新的 JQM 功能：listview，如 清单 8 所示。

    清单 8. listviewshowOpps 生成一个 listview

    1. function showOpps()  
    2. {  
    3. global $mysql_link;  
    4.   
    5. $COL_OPPID= 0;  
    6. $COL_PERSON= 1;  
    7. $COL_CONTACT= 2;  
    8. $COL_DESCRIPTION= 3;  
    9. $sql ="select * from opportunities order by opp_id desc";  
    10. $result = mysql_query($sql,$mysql_link);  
    11.   
    12.   if(mysql_num_rows($result))  
    13.   {  
    14.     print("
    15. href=\"index.php?action=addnew\">Add New Opportunity  
    16. ");  
    17.     print("");   
    18.     while($row = mysql_fetch_row($result)) {  
    19.         print("");  
    20.         print("
    21.  href=\"index.php?action=details&id=".$row[$COL_OPPID]."\">");  
    22.         print("Person: ".$row[$COL_PERSON]."");  
    23.         print("Contact: ".$row[$COL_CONTACT]."");  
    24.         print("Description: ".$row[$COL_DESCRIPTION]);  
    25.         print("");  
    26.   
    27.         print("
      28. \n");  
    28.     }  
    29.     print("");  
    30.    }  
    31. }  

    showOpps 函数跳到数据库，取出所有行，首先显示最新记录，然后将数据组织到一个 listview 中。注意这个代码清单中的 JQM 特性。

    ◆在获取行之前，将为 Add New Opportunity 生成一个定位标记。这里包含了两个特定于 JQM 的特性：

    ◆data-rel="dialog" 告知 JQM 新窗口出现时应该如何显示。它获取一个对话框的颜色方案。

    ◆data-transition="pop" 告知 JQM 对话框以弹出方式显示。当对话框被清除时，它执行一个反向过渡，这时，对话框逐渐缩小直到消失。当您试验这个应用程序时，尝试将这个值更改为翻页、淡出或其他可用过渡。

    图 7 显示了添加新条目的对话框屏幕。这次，它在一个 iPod 上处于纵向显示模式(portrait mode)。

    Adding a new opportunity 对话框的屏幕截图，其中包含 Person 字段、活动 Next 按钮和 qwerty 键盘

    图 7. 添加一个新商机

    ◆当列表被创建时，它被创建为一个无序列表(或 ul 元素)。 这个元素的 data-role 是一个 listview。这是 JQM 的一个重要属性，因为列表管理是一个重要主题。另外，要注意 data-filter="true" 属性。这个简单属性提供整个应用程序中最有价值的功能(尽管有争议) — 主屏幕上的先行(look-ahead)搜索，如 图 8 所示。

    过滤后的结果的屏幕截图

    图 8. 过滤后的结果

    当用户输入一个词组时，将检查列表中的每个条目，查看是否存在该词组;如果不存在，将从列表中删除该条目，只留下匹配的条目。在 图 8 中，单词 “Lego” 只存在于一个条目中。 一个有趣的边注：图 8 中的图像来自我的 MacBook 上运行的 WebKit (Safari)。Safari 和 Chrome 都是测试以移动为目标的 web 应用程序的桌面浏览器的不错选择。

    ◆当用户选择链接中的一个条目时，他们实际上是使用一个 data-rel 值 dialog 和一个 data-transition 值 pop 激活一个定位。结果是 图 9(同样来自桌面机)中的一个对话框视图中的一个特定条目的关联细节。这个条目显示 Person、Contact info 和 Comments 字段以及 Save Opportunity 按钮。

    一条商机记录的细节的屏幕截图

    图 9. 一条商机记录的细节

    注意，不管这个屏幕图像来自那个设备，它都有相似的观感。这个教程在 Android 设备、iPod 和 Safari(WebKit nightly build)上都能很好地运行。可以看出，jQuery Mobile 的一些设计目标取得了成果。

    ◆这个代码清单中最后需要注意的项目是使用列表项列示的属性。在本例中，每个列表项都包含一个名为 data-ibm-jquery-contact 的自定义属性，该属性的值来自数据库中的 opp_contact 字段。这个项目存在的目的为了将来实现以下功能：添加当用户在列表中的一个条目上执行 “敲击并保持(taphold)” 操作时致电或发送电子邮件的能力。

    当一条现有商机记录在对话框中显示(如 图 9 所示)之后，用户可以选择几个选项。这个页面的代码在 utils.php 中的 showOneOpp 函数中提供，如 清单 9 所示：

    清单 9. showOneOpp

    1. function showOneOpp($id)  
    2. {  
    3. global $mysql_link;  
    4.   
    5.   
    6. $COL_OPPID= 0;  
    7. $COL_PERSON= 1;  
    8. $COL_CONTACT= 2;  
    9. $COL_DESCRIPTION= 3;  
    10.   
    11. $person = "";  
    12. $contact = "";  
    13. $description = "";  
    14.   
    15.     if ($id != -1) {  
    16.         $sql ="select * from opportunities where opp_id = " . $id;  
    17.         $result = mysql_query($sql,$mysql_link);  
    18.   
    19.         if(mysql_num_rows($result)) {  
    20.             $row = mysql_fetch_row($result);  
    21.             $person = $row[$COL_PERSON];  
    22.             $contact = $row[$COL_CONTACT];  
    23.             $description = $row[$COL_DESCRIPTION];  
    24.         }  
    25.         print("
    26. \">Delete this entry");  
    27.     }  
    28.   
    29.     print("
    30. onsubmit=\"return checkForm();\">");  
    31.     print("");  
    32.     print("");  
    33.     print("
      ");  
    34.   
    35.     print("");  
    36.     print("Person");  
    37.     print("
    38. id=\"person\" value=\"$person\"   />");  
    39.     print("
    ");  
  •   
  •     print("");  
  •     print("Contact info");  
  •     print("
  • id=\"contact\" value=\"$contact\"   />");  
  •     print("
    • ");  
  •   
  •     print("");  
  •     print("Comments");  
  •     print("
  • id=\"description\" value=\"$description\"   />");  
  •     print("
    • ");  
  •   
  •     print("
    ");  
  •     print("Save Opportunity  
  • ");  
  •   
  •     print("\n");  
  •   
  • }  

    • 这个 showOneOpp 代码是填充您在其中编写所有表单元素的屏幕的一种强力方法。这个屏幕上的一些需要注意的项目包括：

    ◆如果 $id 等于 -1，那么您将准备这个屏幕以添加一条新的商机记录;否则，您将载入现有商机记录并初始化一些页级变量：$person、$contact 和 $description。

    ◆如果您拥有一条现有记录，那么您将显示一个链接，允许用于删除该商机。

    ◆每个字段周围的 data-role="fieldcontain" 帮助 JQM 显示这些字段：将标签和相关输入 HTML 元素组合在一起，通过细线分隔。

    ◆当用户填充这些字段并选择 Save Opportunity 按钮时，那些字段将受到检查，以确保所有字段都已填充，如果已填充，则保存字段。图 10 显示了警告用户填充所有字段的警报。

    表单级验证的屏幕截图

    图 10. 表单级验证

    ◆屏幕上的另一个选项是删除一个现有条目。如果选择该选项，另一个 JavaScript 函数将提示用户确认是否的确要移除选中的商机记录，如 图 11 所示。

    确认删除一条商机记录的屏幕截图

    图 11. 确认删除一条商机记录

    选择删除提示处的 OK 将使用一个动作 delete 将应用程序发送回 index.php。

    这些表单级验证的 JavaScript 例程包含在 utils.js 文件中，该文件由 header.php 包含文件加载。清单 10 显示了 utils.js。

    清单 10. Utils.js — 表单级验证

    1. function checkForm() {  
    2.     try {  
    3.         if ($.trim($('#person').val()) == "" ||  
    4.             $.trim($('#contact').val()) == "" ||  
    5.             $.trim($('#description').val()) == "") {  
    6.                 alert("Please enter all fields");  
    7.                 return false;  
    8.             }  
    9.     } catch (e) {  
    10.         alert(e);  
    11.         return false;  
    12.     }  
    13.     return true;  
    14. }  
    15.   
    16. function deleteEntry(id) {  
    17.     try {  
    18.         var confirmString = "Delete this entry.  Are you sure?\n" + $.trim($('#person')  
    19. .val()) + "\n" + $.trim($('#contact').val()) + "\n" + $.trim($('#description').val());  
    20.         if (window.confirm(confirmString)) {  
    21.             window.location="index.php?action=delete&id=" + id;  
    22.         }  
    23.     } catch (e) {  
    24.         alert(e);  
    25.         return false;  
    26.     }  
    27.     return true;  
    28.   
    29. }  

    这些函数是非常直观的 JavaScript，通过一些 jQuery 选择器辅助。

    您已经看到了这个应用程序的大部分功能。现在看看 utils.php 中实现的另外几个函数，如 清单 11 所示。

    清单 11. 更多数据管理例程

    1. function addOpp($person,$contact,$description)  
    2. {  
    3.     global $mysql_link;  
    4.   
    5.     $sql = "insert opportunities(opp_id,opp_person,opp_contact,opp_description) values   
    6. (NULL,'$person','$contact','$description')";  
    7.     $result = mysql_query($sql,$mysql_link);  
    8.     if ($result == 1) {  
    9.         return "SUCCESS";  
    10.     } else {  
    11.         return "FAILED";  
    12.     }  
    13.   
    14. }  
    15.   
    16. function updateOpp($id,$person,$contact,$description)  
    17. {  
    18. global $mysql_link;  
    19.   
    20. $sql = "update opportunities set opp_person='".$person."',opp_contact=   
    21. '".$contact."',opp_description='".$description."' where opp_id= ".$id;  
    22. $result = mysql_query($sql,$mysql_link);  
    23. if ($result == 1) {  
    24.     return "SUCCESS";       
    25. } else {  
    26.     return "FAILED";  
    27. }  
    28.   
    29. }  
    30.   
    31.   
    32. function killOpp($id)  
    33. {  
    34. global $mysql_link;  
    35.   
    36. $sql = "delete from opportunities where opp_id =$id";  
    37.   
    38. $result = mysql_query($sql,$mysql_link);  
    39.   
    40. }  

    可以看到，这些例程实现一些直观的 PHP/MySQL 数据访问功能：插入、更新和删除商机记录。

    尽管使用 jQuery Mobile 构建的本教程样例应用程序的代码到此结束，但这应该被视为一个起点，而不是一个终点，因为还有更多 jQuery Mobile 知识等待您去探索。JQM 项目计划在 2011 年初推出其 1.0 发布。随着时间推移，希望它能集成到 PhoneGap 这样的框架中，甚至可能集成到 Appcelerator 的 Titanium 这样的替代开发环境中。

    最后，本教程检查这个新创建的、由 JQM 驱动的 web 应用程序的安装快捷键。

    安装应用程序

    这个应用程序不是原生应用程序，因此不能从传统 App Store 下载，但是，您可以在您的设备的主屏幕上为它创建一个快捷键。图 12展示如何在一个 iPod 设备上创建一个快捷键。

    选择您的屏幕底部的 + 号之后出现的菜单的屏幕截图

    图 12. 选择您的屏幕底部的加号(+)

    iPod 平台允许添加新书签、向主屏幕添加链接、或将链接电邮给朋友。选择 Add to Home Screen 选项。然后，命名链接，如 图 13所示。

    Add to Home Screen 选项的屏幕截图

    图 13. 选择 Add to Home Screen

    您提供快捷键名称后，快捷键将出现在您的主屏幕中，正好在您的 “最喜爱的游戏” 旁边，如 图 14 所示。

    iPod 平台的主屏幕上的快捷键的屏幕截图

    图 14. iPod 平台的主屏幕上的快捷键

    在 Android 平台上添加快捷键需要更多步骤，首先需要创建一个新书签，如 图 15 所示。

    在 Android 平台上创建一个新书签的屏幕截图

    图 15. 在 Android 平台上创建一个新书签

    选中书签，给它提供一个名称，如 图 16 所示。

    可用书签的屏幕截图

    图 16. 可用书签

    现在您的书签拥有了一个名称，可供后续使用。

    下一步是转到主屏幕，按住屏幕上的一个空白区域。这时会出现一个选项，允许向主屏幕添加项目。选择 Shortcuts 选项，如 图 17所示。

    添加一个快捷键的屏幕截图

    图 17. 添加一个快捷键

    然后，选择 Bookmark 以查看现有书签，如 图 18 所示。

    选择查看现有书签的屏幕截图

    图 18. 选择查看现有书签

    然后，您将看到一些可用书签。选择您新创建的 jQuery Mobile 应用程序对应的适当条目，如 图 19 所示。

    选择您的 web 应用程序的屏幕截图

    图 19. 选择您的 web 应用程序

    最后，您的快捷键现在应该出现在桌面上，如 图 20 所示。

    Android 主屏幕上的 jQuery Mobile 应用程序快捷键的屏幕截图

    图 20. Android 主屏幕上的快捷键#p#

    结束语

    本教程到此结束。如果您跟随本教程的操作，您应该已经了解 jQuery Mobile 的基本结构及其与 jQuery Core 项目的关系。您创建了一个销售商机跟踪应用程序，该程序拥有跨平台兼容性，能在多种设备上运行。而且，您能将该应用程序安装到您最喜欢的智能手机的主屏幕上。

    上一篇：如何简化你的云？相关参考架构拾萃

    下一篇：构建高效又安全的云环境方案集锦

    相关内容

    热门资讯

    如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下，MySQL服务器仅侦听来自localhos...
    如何利用交换机和端口设置来管理... 在网络管理中，总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
    施耐德电气数据中心整体解决方案... 近日，全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”，作为该活动的...
    Windows恶意软件20年“... 在Windows的早期年代，病毒游走于系统之间，偶尔删除文件（但被删除的文件几乎都是可恢复的），并弹...
    20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
    2009 IBM动态架构新动力...
    通过 XML 进行内容发布
    德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站，直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
    着眼MAC地址，解救无法享受D... 在安装了DHCP服务器的局域网环境中，每一台工作站在上网之前，都要先从DHCP服务器那里享受到地址动...
    为啥国人偏爱 Mybatis，... 关于 SQL 和 ORM 的争论，永远都不会终止，我也一直在思考这个问题。昨天又跟群里的小伙伴进行...