jQuery Mobile和JSON

最新推荐文章于 2021-03-30 17:21:15 发布

cuyi7076

最新推荐文章于 2021-03-30 17:21:15 发布

阅读量751

点赞数

文章标签：数据库 python java 人工智能 javascript ViewUI

原文链接：https://www.ibm.com/developerworks/xml/tutorials/x-jquerymobilejsontut/index.html

版权

在你开始前

常用缩略语

Ajax：异步JavaScript + XML
ASP：活动服务器页面
CSS：级联样式表
DOM：文档对象模型
FTP：文件传输协议
GPL：GNU通用公共许可证
HTML：超文本标记语言
HTTP：超文本传输协议
麻省理工学院：麻省理工学院
SQL：结构化查询语言
UI：用户界面
XML：可扩展标记语言

为了从本教程中获得最大收益，您应该习惯于使用HTML，JavaScript和CSS构造Web应用程序。此外，移动Web应用程序附带的服务器端代码是用PHP和MySQL编写的。熟悉本服务器端编程也可以为您提供帮助。如果您熟悉其他经典ASP.NET，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版本6（火炬，Playbook）等）上运行的基于Web的应用程序提供直观一致的用户体验。本教程首先对JQM项目以及JQM与HTML5以及对HTML5的依赖关系进行了概述。在简要介绍了构建JQM应用程序的多种方法之一以及JQM增强基本Web UI元素的某些方法之后，本教程将介绍基本的销售人员自动化需求。

面对了这个问题，本教程为无需移动开发的移动用户制定了解决方案的计划。演示了完整的应用程序，因此您可以逐步了解本教程将带您去哪里，并逐步构建自己的应用程序。在学习使用JQM实施解决方案时，将逐功能检查源文件。本教程以一些技巧结束，这些技巧使用户可以轻松地在移动设备上访问该应用程序。

先决条件

要遵循本教程，您需要以下内容：

文本编辑器-您可以使用任何喜欢的文本编辑器。具有语法高亮显示的编辑器可能会派上用场。 Notepad ++是一个运行良好的开源编辑器。
JQuery Mobile链接-您实际上不需要下载任何内容。必要的文件可通过jQuery的Content Delivery Network（CDN）获得。
Web浏览器-此浏览器用于查看jQuery Mobile帮助和文档。
WebKit（Safari）或Chrome浏览器-这些浏览器支持在桌面上进行jQuery Mobile开发。
移动设备-您可以使用iPod Touch，Android，BlackBerry Torch或类似功能的移动设备。
PHP和MySQL托管环境-用于应用程序的服务器端

我在运行Windows®7的VMWare Fusion的MacBook Pro上创建了本教程的代码示例。我使用Notepad ++来编辑文件，因为它具有出色的语法突出显示以及安全的FTP，使与基于服务器PHP文件进行交互非常简单。您可以在vi中编辑文件，但是谁愿意呢？为了使用MySQL数据库，我使用了托管帐户可用的phpMyAdmin。为了在物理设备上进行测试，我使用了运行Android 2.2的Nexus One和运行iOS 4.1的iPod Touch。

请参阅相关的主题为有用的链接; 下载示例应用程序的源代码。

jQuery Mobile

首先看一下JQM，以及如何使用它来增强移动Web应用程序的开发体验。尽管jQuery Core具有庞大的安装基础，但JQM尚处于起步阶段，在撰写本文时仍处于Alpha模式。看看JQM项目希望完成什么。

JQM，家族的最新成员

JQM的目标是在统一的UI中提供出色JavaScript功能，从而在最流行的智能手机和平板电脑设备上运行。与jQuery一样，JQM是可免费获取的开放源代码库，直接在Internet上托管。实际上，作为JQM统一和优化代码库的一部分，jQuery核心库本身已引起了很多关注。这种关注充分说明了移动浏览器技术在很短的时间内已经发展了多少。

与jQuery核心一样，开发计算机上无需安装任何软件。您只需将各种* .js和* .css文件直接包含到您的网页中，可以这么说，JQM的功能就在您的指尖。

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

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

<head>
<title>IBM JQuery Tutorial</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1
/jquery.mobile-1.0a1.min.css" />
<script src="//code.jquery.com/jquery-1.4.3.min.js"></script>   
<script src="//code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js">
</script>
<script src="//jquery.ibm.navitend.com/utils.js"></script>
</head>

清单1中的代码实际上是本教程的示例代码的一个秘密峰值，稍后将在本教程中进行重新讨论。现在注意，直接从jQuery的Content Delivery Network（CDN）下载单个样式表。 CDN用于在Internet上分发常用文件，从而使下载速度尽可能快。 CDN通常部署在大型基础结构中，通过将文件放置在Internet上的战略位置，这些文件将这些文件传播到最短距离的路径减少了。 jQuery CDN和其他类似的文件通常托管在大型的全球基础结构中，例如可从amazon.com和其他互联网巨头处获得的基础结构。

除CSS文件外，标头还包含三个JavaScript文件。第一个JavaScript文件以最小形式引用jQuery核心库，然后是JQM库的最小形式。最后，包含一个名为utils.js的特定于应用程序JavaScript文件。缩小意味着代码已针对快速下载和解析进行了优化。请记住，应用程序的每个页面都需要下载这些文件，因此请将它们的大小控制在最小范围内（并依靠缓存！），以极大地提高应用程序的性能。

清单1中的版本实际上是jQuery Mobile，alpha版本1。可以使用Alpha版本2，但是由于某些错误行为，本教程依赖于该代码的第一个alpha版本。在阅读本教程时，可能会下载较新版本的JQM文件。请参阅相关信息的链接，jQuery的CDN获取最新版本的库文件。 JQM在MIT和GPL许可下获得了双重许可，这基本上意味着，只要您保留jQuery的归属，就可以在应用程序中使用这些文件。

请注意，还可以下载jQuery文件的副本并直接从您自己的Web服务器托管它们。这种方法不是一个坏主意，尤其是当您发布依赖于此框架的商业应用程序时。对这些框架的更改可以而且确实会发生，有时甚至损害依赖特定行为的应用程序。商业企业通常对更易于支持的可预测行为感兴趣，而不是总是拥有最新消息。

专为触摸而生

JQM是一种触摸优化的框架，用于为基于移动浏览器的应用程序构建一致且理想的用户体验。您已经知道的有关编写Web应用程序的许多知识仍然适用。但是，使应用程序看起来一致的目标是JQM方法的真正关键。 JQM对标准表单元素进行了样式化，以使其既具有视觉吸引力又易于操作。考虑图1中的图像，这些图像显示了JQM风格化表单元素的子集。

图1. JQM表单元素

除了易于触摸的风格化UI元素之外，JQM的真正魔力还在于它如何管理屏幕过渡。让我们来看看。

扩展DOM

在传统的Web应用程序构造中，从服务器获取每个屏幕或页面，并替换屏幕的整个内容。这种方法意味着：

服务器往返
下载HTML
解析HTML
渲染HTML，包括级联样式的应用

JQM采用了不同的方法。 jQuery核心库的标志之一是开发人员可以轻松执行Ajax调用。 Ajax包含在浏览器的异步HTTP请求功能中。当获取整个页面非常昂贵时，Ajax通常用于获取页面的一部分或执行某些行内参考数据查找。 JQM通过拦截页面请求并将大多数请求转换为专门的Ajax调用，将Ajax提升到一个新的水平。最终结果是，当访问者浏览使用JQM构建的Web应用程序时，将操纵页面的DOM，而不是每次都替换每个页面。为了提供一些上下文，请看清单2中的样板JQM文档。

清单2. jQuery Mobile页面结构

<!DOCTYPE html>
<html>
    <head>
        <title>IBM jQuery Tutorial</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1
/jquery.mobile-1.0a1.min.css" />
        <script src="//code.jquery.com/jquery-1.4.3.min.js"></script>
        <script src="//code.jquery.com/mobile/1.0a1
/jquery.mobile-1.0a1.min.js"></script>
        <script src="//jquery.ibm.navitend.com/utils.js"></script>
    </head>
    <div  data-role="page">
        <div data-role="header">
            <h1>jQuery Tutorial</h1>
        </div>
        <div data-role="content">
            Page content goes here!
        </div>
        <div data-role="footer">
            Sample code for IBM developerWorks
        </div>
    </div>
</body>
</html>

JQM可以立即使用HTML5 data-*属性。注意清单2中div标签和data-role属性的广泛使用。在HTML5中，验证解析器实际上会忽略带有data-前缀的任何属性，并且应用程序可以自由解释这些属性。这就是JQM所做的；实际上，JQM特别依赖于data-role属性来将其核心功能串在一起。

表1显示了清单2中 data-role属性的四个实例。

表1.清单2中的`data-role`属性的四个实例

数据角色属性	评论
页	这是应用程序页面的封装`div` 。一个HTML文件可以包含一个或多个页面级`div`元素。
标头	JQM页面的标题。
内容	内容位于content `div` 。
页脚	JQM页面的页脚。

当JQM应用程序从一页切换到下一页时，发生的主要活动是将content div换出新页面的内容。发生了更多的魔力，但是在最简单的描述中，JQM将一组内容交换为另一组内容，并选择性地修改DOMCSS，以从当前页面过渡到新页面，或者同样重要的是，过渡到页面堆栈或哈希表中的前一页。图2演示了本教程的示例应用程序的主页，其中列出了在iPod上运行的多个条目。

图2.应用程序的主屏幕

该应用程序在列表中显示条目。选择条目后，JQM将加载一个新页面，并向用户显示一个加载对话框，以便用户可以看到正在发生的事情，如图3所示。

图3.加载新页面

加载状态图标旋转一会儿，然后，当页面内容被下载或位于现有DOM中时，JQM换出当前可见的内容并呈现新内容，如图4所示，该图演示了JQM中的对话框窗口。

图4.用于添加新数据的JQM对话框

用于添加新数据的JQM对话框的屏幕截图（显示Person，Conatct信息和Comments字段）

JQM致力于主题和色板的使用。请注意，图4中对话框的配色方案（深灰色，黑色背景）不同于图3中的配色方案（蓝色和灰色，浅背景）。鼓励您查看jQuery Mobile网页上与主题相关的文档，这些文档在参考资料中链接。

进行页面更改时，您可以选择多种转换，包括：

滑动
向上滑动
滑下
流行音乐
褪色
翻转

当用户向后导航时，过渡也可以自己反转。我特别喜欢翻页过渡。要选择特定的过渡，请使用data-transition属性，如下所示： <a href="somepage.html" data-transition="flip">Go to some page</a> 。

像jQuery Core一样，JQM还提供了绑定JavaScript事件的能力，包括以下事件：

设备方向已更改
创建前后的页面
显示前后的页面
隐藏前后的页面
点按
点住
滑动
向左滑动
向右滑动

要连接这些事件之一，可以使用清单3中的代码。

清单3.显示页面之前的通知

$('body').bind('pagebeforeshow',function(event,ui) {
    alert('beforeshow');
});

jQuery使用美元（ $ ）符号- $后面的任何内容都是jQuery语法。作为连接事件的另一个示例，假设您想在刷列表条目时执行某些操作。清单4演示了jQuery代码，用于捕获每个单独列表项上的swipeleft事件。

清单4.为列表项分配滑动处理程序

$('li').each( 
    function (idx) {
        $(this).bind (
            'swipeleft',
            function(event,ui) {
                alert("swipe left" + $(this).attr('data-ibm-jquery-key'));
            }
        );        
    });

该代码可以详细说明如下：

遍历每个li元素。 li元素是有序列表（ol）或无序列表（ul）中的列表项。
连接每个条目以跟踪swipeleft事件。
每当捕获向左滑动事件时，就会调用一个函数，该函数显示一个警报框。
您还可以利用HTML5 data*属性功能。请注意，在此示例中，您可以通过attr方法访问元素的属性。在这里，您获取与名为的定制属性关联的数据： data-ibm-jquery-key 。

混合数据和UI元素的优点值得商;；但是，将数据直接存储在UI元素中的功能以及易于绑定的功能提供了一些创造性的编码机会。

该讨论实际上仅涉及jQuery Mobile功能的表面，但目前已经足够。现在考虑一下本教程示例应用程序背后的动机。

销售人员自动化（SFA）

虽然在众多App Store中不乏娱乐应用程序，但许多业务应用程序属于销售人员自动化类别。这些应用程序旨在帮助管理个人或一组销售人员的销售活动。无论哪个行业，销售的成功都取决于一个简单的口号：“赢得进行下一步的权利”。如果您的销售过程不错，那么最终您将结束销售。

本教程中创建的应用程序针对销售流程的前端，有时也称为机会。您在本教程中构建的应用程序允许用户直接从他或她的手机管理新机会。为什么？简单。当商务人员不在办公室，在会议或社交活动上进行互动时，他们经常会遇到可能对其产品和服务感兴趣的人。该应用程序的目标是为用户提供一种捕获三个重要信息的简单方法：

人员 -他们希望跟进的交易对手的名称
联系信息 —电话号码或电子邮件地址
评论 —关于机会的简短说明

例如，这是一个潜在的条目：

人员：乔·博格斯
联系信息：jbloggs@someorganizationabc.com
评论：乔需要身份管理方面的帮助。

简短，甜美并切入要点。当我回到办公室时，我可以向Joe发送电子邮件，以了解有关他特定痛点的更多信息，或提供有关公司产品和服务的某些信息，这些信息与需要身份管理帮助的人有关。

该应用程序绝不是完整的销售队伍自动化应用程序；但是，使用场景足以开始使用某些JQM功能，并且如果忠实地使用它，很可能会改善任何道路销售人员的结果。而且，如果您的销售团队拥有各种设备，包括iPhone，Android，BlackBerry Torch和WebOS，则此应用程序可以在所有这些设备上运行。让我们看看它是如何构造的。

应用架构

本节探讨了本教程示例应用程序的体系结构，并逐步完成了其构建过程中的每个主要步骤。您可以自己逐步构建应用程序，也可以从参考资料下载完整的项目。

应用架构

此应用程序简称为jQuery教程，在两个主要平台上实现：

利用JQM的移动代码
服务器端代码，在MySQL数据库中提供数据持久性

所有服务器端交互都在PHP文件中进行，数据管理在一个表中，该表名为MySQL数据库中的“机会”。

数据库结构非常简单，只有四个字段（请参阅表2 ）。

表2.数据库结构的四个字段

栏名	评论
opp_id	条目的数字标识符。该标识符由数据库自动递增。
opp_person	个人或公司名称。
opp_contact	人的联系信息。
opp_description	机会的简要说明。

图5显示了phpMyAdmin中文件的结构。列标题包括字段，类型，排序规则，属性，空，默认，额外，操作。（查看图5的放大图。）

图5.数据库表结构

您可以看到简单的结构和数据库类型。这些条目大多数是默认值。在生产应用程序中，您可能需要更多地考虑数据字典。

为了使该应用程序起步，我使用phpMyAdmin的insert功能为数据库填充了一些数据。图6显示了与本教程中介绍的设备屏幕图像相关的数据快照。列标题包括opp_id，opp_person，opp_contact，opp_description。（查看图6的大图。）

图6.一些初始数据记录

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

表3.所需的应用程序源文件

文件	评论
header.php	包括HTML文档的开头部分，包括包含JQM文件所需的脚本标记。该文件的内容如清单1所示。
footer.php	包括任何HTML页脚信息。对于许多应用程序，此信息包括Google Analytics（分析）JavaScript胶水，以帮助收集应用程序的使用情况统计信息。
index.php	应用程序用户界面的主页，充当部件控制器，来自准MVC范例的部件视图，是松散配置的MVC设计中控制器的一部分。
utils.php	所有数据访问例程都放在此文件中。
db.php	数据库凭据存储在此文件中。
utils.js	此文件中包含几个表单级验证脚本。

观察这些文件如何协同工作的最佳方法是逐步浏览每个文件，接下来将介绍。

构建应用程序

大多数应用程序的关键是正确建立数据模型。如上一节所述，该应用程序的数据模型非常简单。在代码演练中，您可以从清单5的数据库定义开始。

清单5.机会SQL脚本

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

如果要通过包括其他字段来修改应用程序，则需要通过诸如phpMyAdmin之类的工具（如图5所示）将它们手动添加到数据库中，或者通过扩展SQL脚本。数据库表到位后，就该连接数据库了。您可以通过一些mysql函数完成此任务，如清单6的 db.php 所示。

清单6. db.php

<?
$mysql_db = "databasename";
$mysql_user = "username";
$mysql_pass = "password";
$mysql_link = mysql_connect("localhost", $mysql_user, $mysql_pass);
mysql_select_db($mysql_db, $mysql_link);
?>

显然，您需要用数据库名称，用户名和密码代替您自己的环境。如果您无权访问启用了MySQL和PHP的托管帐户，并且想继续进行下去，那么现在是配置环境的好时机。请参阅相关信息对一些可用的选项。

有了数据库之后，是时候通过查看该应用程序的主要源文件index.php切换到自顶向下方法，如清单7所示。

清单7.主UI源文件

<?
require('db.php');
require('utils.php');
require('header.php');
?>
    <div  data-role="page">
    <div data-role="header">
    <h1>JQuery Tutorial</h1>
    </div>
    <div data-role="content">

<? 
$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();
}
?>
    </div>
    <div data-role="footer">
    Sample code for IBM developerWorks
    </div>
    </div>
<? require('footer.php'); ?>
</body>
</html>

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

此应用程序体系结构非常简单-每次加载页面时，将内容替换为content div中新生成的content 。在某种程度上，这可能是作弊，并且会恢复一些较旧的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变量将$_GET和$_POST数据合并在一起，从而简化了发送到该页面的各种请求的处理。
$action变量使用以下选项进行评估，每个选项都调用utils.php中实现的一个或多个函数：
1. addnew显示一个空表单以添加新条目。当您参加贸易展览会并遇到新的前景时，这就是您的功能。
2. upsert如果记录是新记录， upsert将其插入表中。如果记录已经存在，则需要更新其列。如果id字段等于-1 ，则表明您有一个全新的记录，必须执行插入操作。任何其他值都将解释为有效的记录或机会标识符。
3. delete —用户已请求删除此记录。
4. details -用户已选择一个条目，并希望查看机会的详细信息。
5. 如果$action变量为空，则只需显示机会列表。这是页面首次加载时的默认方案。
该页面通过包含footer.php结束。在此应用程序中，页脚包含一些Google分析代码，以帮助跟踪该应用程序的使用情况。

有了这个页面，现在该看看utils.php中包含的功能了。特别是，您希望观察showOpps函数，因为它生成了用户界面的机会列表，并带有清单8中引入的新JQM功能listview。

清单8. listview `showOpps`生成一个listview

function showOpps()
{
global $mysql_link;

$COL_OPPID= 0;
$COL_PERSON= 1;
$COL_CONTACT= 2;
$COL_DESCRIPTION= 3;
$sql ="select * from opportunities order by opp_id desc";
$result = mysql_query($sql,$mysql_link);

  if(mysql_num_rows($result))
  {
    print("<a data-rel=\"dialog\" data-transition=\"pop\" 
href=\"index.php?action=addnew\">Add New Opportunity</a>
<br/><br/>");
    print("<ul data-role=\"listview\" data-filter=\"true\">"); 
    while($row = mysql_fetch_row($result)) {
        print("<li data-ibm-jquery-contact=\"".$row[$COL_CONTACT]."\">");
        print("<a data-rel=\"dialog\" data-transition=\"pop\"
 href=\"index.php?action=details&id=".$row[$COL_OPPID]."\">");
        print("Person:&nbsp;".$row[$COL_PERSON]."<br/>");
        print("Contact:&nbsp;".$row[$COL_CONTACT]."<br/>");
        print("Description:&nbsp;".$row[$COL_DESCRIPTION]);
        print("</a>");

        print("</li>\n");
    }
    print("</ul>");
   }
}

showOpps函数跳转到数据库，获取所有行，首先显示最新记录，然后将数据组织到列表视图中。注意此代码清单中的JQM功能。

在获取行之前，将为添加新机会生成锚标记。这里包括两个特定于JQM的功能：
1. data-rel="dialog"告诉JQM新窗口在显示时应如何显示。它获取对话框的配色方案。
2. data-transition="pop"告诉JQM在显示框时使其弹出。清除该框后，它将执行反向转换，其中对话框将缩小直到不再可见。在处理应用程序时，请尝试将值更改为翻转，淡入淡出或其他可用过渡之一。
  图7显示了用于添加新条目的对话框屏幕。这次，它在iPod上处于纵向模式。
  图7.添加新机会
创建列表后，它将创建为无序列表或ul元素。该元素的data-role是一个列表视图。这是JQM的重要属性，因为列表管理是一个重要的主题。另外，请注意data-filter="true"属性。这个简单的属性可以说是整个应用程序中最有价值的功能-在主屏幕上进行预搜索，如图8所示。
图8.过滤结果

当用户键入短语时，将检查列表中的每个条目以查看是否找到了短语；如果不是，则从列表中删除该条目，仅保留匹配的条目。在图8中，仅在一个条目中发现了“乐高”一词。作为一个有趣的旁注：图8中的图像来自运行在MacBook上的WebKit（Safari）。 Safari和Chrome都是用于测试以移动设备定位的Web应用程序的良好桌面浏览器。
当用户选择链接的条目他们实际上是激活与一个锚data-rel的dialog和data-transition的pop 。结果是与特定条目相关的详细信息，该特定条目显示在对话框视图中，如图9所示，该条目也取自桌面。该条目显示“人员”，“联系信息”和“评论”字段以及“保存机会”按钮。
图9.机会记录的详细信息

无论从哪个设备捕获屏幕图像，请注意相似的外观。本教程可以在Android设备，iPod和Safari（WebKit每晚构建）上同样良好地运行。您会看到jQuery Mobile的一些设计目标正在实现。
在此代码清单中要观察的最后一项是与清单项一起列出的属性。在这种情况下，每个列表项都包含一个名为data-ibm-jquery-contact的自定义属性，该属性的值取自数据库中的opp_contact字段。此项用于将来的功能，以便在用户对列表中的条目执行轻按保持操作时增加呼叫或发送电子邮件的功能。

在对话框中显示现有机会记录之后，如图9所示，用户将有几个可用选项。该页面的代码在showOneOpp函数中提供，该函数位于utils.php中，并在清单9中给出。

清单9. showOneOpp

function showOneOpp($id)
{
global $mysql_link;


$COL_OPPID= 0;
$COL_PERSON= 1;
$COL_CONTACT= 2;
$COL_DESCRIPTION= 3;

$person = "";
$contact = "";
$description = "";

    if ($id != -1) {
        $sql ="select * from opportunities where opp_id = " . $id;
        $result = mysql_query($sql,$mysql_link);

        if(mysql_num_rows($result)) {
            $row = mysql_fetch_row($result);
            $person = $row[$COL_PERSON];
            $contact = $row[$COL_CONTACT];
            $description = $row[$COL_DESCRIPTION];
        }
        print("<a rel=\"external\" href=\"javascript:deleteEntry($id)
\">Delete this entry</a>");
    }

    print("<form method=\"post\" rel=\"external\" action=\"index.php\" 
onsubmit=\"return checkForm();\">");
    print("<input type=\"hidden\" name=\"action\" value=\"upsert\"/>");
    print("<input type=\"hidden\" name=\"id\" value=\"$id\"/>");
    print("<fieldset>");

    print("<div data-role=\"fieldcontain\">");
    print("<label for=\"person\">Person</label>");
    print("<input type=\"text\" name=\"person\" maxlength=\"100\" 
id=\"person\" value=\"$person\" />");
    print("</div>");

    print("<div data-role=\"fieldcontain\">");
    print("<label for=\"contact\">Contact info</label>");
    print("<input type=\"text\" name=\"contact\" maxlength=\"100\" 
id=\"contact\" value=\"$contact\" />");
    print("</div>");

    print("<div data-role=\"fieldcontain\">");
    print("<label for=\"description\">Comments</label>");
    print("<input type=\"text\" name=\"description\" maxlength=\"100\" 
id=\"description\" value=\"$description\" />");
    print("</div>");

    print("<fieldset>");
    print("<button type=\"submit\" value=\"Save\">Save Opportunity
</button>");

    print("</form>\n");

}

showOneOpp代码是填充屏幕的一种相当蛮力的方法，您可以在其中编写所有表单元素。此屏幕上需要注意的一些项目包括：

如果$id为-1 ，则准备添加新机会记录的屏幕；否则，您将加载现有机会记录并初始化一些页面级变量，即$person ， $contact和$description 。
如果您有现有记录，则显示一个链接，以允许用户删除机会。
每个字段周围的data-role="fieldcontain"通过将标签和相关的输入HTML元素分组在一起（用细线分隔），帮助JQM显示字段。
当用户填充字段并选择“ 保存机会”按钮时，将检查字段以确保已全部填充，如果已填充，则将保存记录。图10显示了一个警告，警告用户填充所有字段。
图10.表单级别验证
此屏幕上的另一个选项是删除现有条目。在这种情况下，另一个JavaScript函数会提示用户确认他们确实要删除所选的机会记录，如图11所示。
图11.确认删除机会记录

在此删除提示下选择“ 确定” ，将应用程序通过delete操作发送回index.php。

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

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

function checkForm() {
    try {
        if ($.trim($('#person').val()) == "" ||
            $.trim($('#contact').val()) == "" ||
            $.trim($('#description').val()) == "") {
                alert("Please enter all fields");
                return false;
            }
    } catch (e) {
        alert(e);
        return false;
    }
    return true;
}

function deleteEntry(id) {
    try {
        var confirmString = "Delete this entry.  Are you sure?\n" + $.trim($('#person')
.val()) + "\n" + $.trim($('#contact').val()) + "\n" + $.trim($('#description').val());
        if (window.confirm(confirmString)) {
            window.location="index.php?action=delete&id=" + id;
        }
    } catch (e) {
        alert(e);
        return false;
    }
    return true;

}

这些功能是相当简单JavaScript，并借助一些jQuery选择器魔术。

您已经看到了大多数应用程序功能。现在来看utils.php中实现的更多功能。清单11中显示了它们。

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

function addOpp($person,$contact,$description)
{
    global $mysql_link;

    $sql = "insert opportunities(opp_id,opp_person,opp_contact,opp_description) values 
(NULL,'$person','$contact','$description')";
    $result = mysql_query($sql,$mysql_link);
    if ($result == 1) {
        return "SUCCESS";
    } else {
        return "FAILED";
    }

}

function updateOpp($id,$person,$contact,$description)
{
global $mysql_link;

$sql = "update opportunities set opp_person='".$person."',opp_contact= 
'".$contact."',opp_description='".$description."' where opp_id= ".$id;
$result = mysql_query($sql,$mysql_link);
if ($result == 1) {
    return "SUCCESS";     
} else {
    return "FAILED";
}

}


function killOpp($id)
{
global $mysql_link;

$sql = "delete from opportunities where opp_id =$id";

$result = mysql_query($sql,$mysql_link);

}

查看这些例程，您会发现它们实现了直接PHP / MySQL数据访问功能，用于插入，更新和删除机会记录。

尽管这使使用jQuery Mobile构建的本教程示例应用程序的代码更加完整，但可以说它更多的是起点而不是结尾，因为关于jQuery Mobile的知识还很多。 JQM项目将于2011年初某个时候发布其1.0版本。随着时间的流逝，希望将其合并到诸如PhoneGap之类的框架中，甚至可能并入诸如Appcelerator的Titanium之类的替代开发环境中。

结束本教程，请看一下如何安装由JQM支持的新创建的Web应用程序的快捷方式。

安装应用程序

此应用程序不是本机应用程序，因此无法从传统的App Store下载。但是，您可以在设备的主屏幕上为其创建快捷方式。图12演示了在iPod设备上创建快捷方式的过程。

图12.选择屏幕底部的加号（+）

iPod平台允许您添加新书签，添加到主屏幕的链接或将链接通过电子邮件发送给朋友。选择添加到主屏幕选项。接下来，给链接起一个名字，如图13所示。

图13.选择添加到主屏幕

为快捷方式提供名称后，该快捷方式将放到您喜欢的游戏旁边的主屏幕中，如图14所示。

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

从创建新书签开始，在Android平台上添加快捷方式的过程需要执行几个步骤，如图15所示。

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

选择书签后，必须为其命名，如图16所示。

图16.可用书签

现在，您的书签有了名称，可供以后使用。

下一步是转到主屏幕，按住屏幕的空白区域。这将显示将项目添加到主屏幕的选项。选择Shortcuts选项，如图17所示。

图17.添加快捷方式

接下来，选择Bookmark查看现有书签，如图18所示。

图18.选择查看现有书签

接下来，为您提供可用的书签。为您新创建的jQuery Mobile应用程序选择适当的条目，如图19所示。

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

最终，您的快捷方式现在位于桌面上，如图20所示。

图20. Android主屏幕上的快捷方式

Android主屏幕上显示的jQuery Mobile应用程序快捷方式的屏幕截图

摘要

这样就完成了。如果继续学习，您将了解jQuery Mobile的基本结构以及它与jQuery Core项目的关系。您构建了一个销售机会跟踪应用程序，该应用程序可以在具有跨平台兼容性的多个设备上运行，并且可以将该应用程序安装到您喜欢的智能手机的主屏幕上。

翻译自: https://www.ibm.com/developerworks/xml/tutorials/x-jquerymobilejsontut/index.html

cuyi7076

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery Mobile和JSON

在你开始前常用缩略语 Ajax：异步JavaScript + XML ASP：活动服务器页面 CSS：级联样式表 DOM：文档对象模型 FTP：文件传输协议 GPL：GNU通用公共许可证 HTML：超文本标记语言 HTTP：超文本传输协议麻省理工学院：麻省理工学院 SQL：结构化查询语言 UI：用户界面 XML：可扩展标记语言 ...
复制链接

扫一扫

jQuery Mobile和JSON

在你开始前

常用缩略语

关于本教程

先决条件

jQuery Mobile

JQM，家族的最新成员

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

专为触摸而生

图1. JQM表单元素

扩展DOM

清单2. jQuery Mobile页面结构

表1.清单2中的data-role属性的四个实例

图2.应用程序的主屏幕

图3.加载新页面

图4.用于添加新数据的JQM对话框

清单3.显示页面之前的通知

清单4.为列表项分配滑动处理程序

销售人员自动化（SFA）

应用架构

应用架构

表2.数据库结构的四个字段

图5.数据库表结构

图6.一些初始数据记录

表3.所需的应用程序源文件

构建应用程序

清单5.机会SQL脚本

清单6. db.php

清单7.主UI源文件

清单8. listview showOpps生成一个listview

图7.添加新机会

图8.过滤结果

图9.机会记录的详细信息

清单9. showOneOpp

图10.表单级别验证

图11.确认删除机会记录

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

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

安装应用程序

图12.选择屏幕底部的加号（+）

图13.选择添加到主屏幕

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

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

图16.可用书签

图17.添加快捷方式

图18.选择查看现有书签

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

图20. Android主屏幕上的快捷方式

摘要

“相关推荐”对你有帮助么？

表1.清单2中的`data-role`属性的四个实例

清单8. listview `showOpps`生成一个listview