jQuery技术

jQuery Mobile 和 JSON(4)

字号+ 作者：H5之家 来源：H5之家 2016-08-07 17:01 我要评论( )

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

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

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

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

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

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

    清单 8. listviewshowOpps 生成一个 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 函数跳到数据库，取出所有行，首先显示最新记录，然后将数据组织到一个 listview 中。注意这个代码清单中的 JQM 特性。

  • 在获取行之前，将为 Add New Opportunity 生成一个定位标记。这里包含了两个特定于 JQM 的特性：
  • data-rel="dialog" 告知 JQM 新窗口出现时应该如何显示。它获取一个对话框的颜色方案。
  • data-transition="pop" 告知 JQM 对话框以弹出方式显示。当对话框被清除时，它执行一个反向过渡，这时，对话框逐渐缩小直到消失。当您试验这个应用程序时，尝试将这个值更改为翻页、淡出或其他可用过渡。
    显示了添加新条目的对话框屏幕。这次，它在一个 iPod 上处于纵向显示模式（portrait mode）。
    图 7. 添加一个新商机

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

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

    过滤后的结果的屏幕截图


    当用户输入一个词组时，将检查列表中的每个条目，查看是否存在该词组；如果不存在，将从列表中删除该条目，只留下匹配的条目。在 中，单词 “Lego” 只存在于一个条目中。 一个有趣的边注： 中的图像来自我的 MacBook 上运行的 WebKit (Safari)。Safari 和 Chrome 都是测试以移动为目标的 web 应用程序的桌面浏览器的不错选择。
  • 当用户选择链接中的一个条目时，他们实际上是使用一个 data-rel 值 dialog 和一个 data-transition 值 pop 激活一个定位。结果是 （同样来自桌面机）中的一个对话框视图中的一个特定条目的关联细节。这个条目显示 Person、Contact info 和 Comments 字段以及 Save Opportunity 按钮。
    图 9. 一条商机记录的细节

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


    注意，不管这个屏幕图像来自那个设备，它都有相似的观感。这个教程在 Android 设备、iPod 和 Safari（WebKit nightly build）上都能很好地运行。可以看出，jQuery Mobile 的一些设计目标取得了成果。
  • 这个代码清单中最后需要注意的项目是使用列表项列示的属性。在本例中，每个列表项都包含一个名为 data-ibm-jquery-contact 的自定义属性，该属性的值来自数据库中的 opp_contact 字段。这个项目存在的目的为了将来实现以下功能：添加当用户在列表中的一个条目上执行 “敲击并保持（taphold）” 操作时致电或发送电子邮件的能力。

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

    清单 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"); }

    　

    jQueryjQuery MobilJSONw

    1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • jquery学习总结（超级详细）

      jquery学习总结（超级详细）

      2016-08-10 17:01

    • jQuery操作checkbox选择(list/table)

      jQuery操作checkbox选择(list/table)

      2016-08-07 16:00

    • jquery源码学习笔记（一）jQuery的无new构建，jquery学习笔记

      jquery源码学习笔记（一）jQuery的无new构建，jquery学习笔记

      2016-08-07 10:00

    • [原]jQuery .tmpl(), .template()学习

      [原]jQuery .tmpl(), .template()学习

      2016-08-06 18:00

    网友点评
    精彩导读
    jquery学习总结（超级详细）

    jquery学习总结（超级详细）

    jQuery Mobile 和 JSON

    jQuery Mobile 和 JSON

    jquery小技巧大全介绍

    jquery小技巧大全介绍

    jQuery 许愿墙代码

    jQuery 许愿墙代码

    用JQuery在网页中实现分隔条功能的代码

    用JQuery在网页中实现分隔条功能的代码

    热门资讯
    Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by h5cn 备案： 黔ICP备15004751-2
    HTML5入门 HTML5技术 canvas教程 专题学习
    t