本章介绍两个关键字[HTML5]和[Jquery Mobile]，简单说这两者的关系是：HTML5作为主体，Jquery Mobile在HTML5的基础上对其进行了优化、装饰。

  • HTML5

HTML5大家早就不陌生了，HTML最新版本，提供了很多富客户端功能支持，但是在台式系统因为受到某些浏览器限制发展缓慢，而移动设备因为没有旧包袱，所有厂家都在向HTML5靠齐，因此移动设备（特别是最新的设备）的浏览器对HTML5支持度非常高。所以大多数智能移动设备上都能跑HTML5应用。

关于HTML5，并不是你想像中的那么神秘。说白了，HTML5功能也是由HTML标签来实现，只是这些标签以前没有出现过，你可以像以前编写普通html页面那样添加上HTML5某些新特性标签，然后在支持HTML5的浏览器（比如chrome）上运行。想比较全面了解HTML5，我建议新手花一两个小时过一遍w3cschool的HTML5教程，非常简洁，但是能让你了解什么叫HTML5。

  • JQuery Mobile

jQuery Mobile是用于创建移动web应用的前端开发框架，可以使用于智能手机与平板电脑，它使用 HTML5 & CSS3 最小的脚本来布局网页。大家都知道，HTML原生的控件并不是那么“炫”，Jquery Mobile的主要作用之一是帮助不懂UI的开发人员让自己的HTML有“炫”的感觉。另外Jquery Mobile对HTML还提供了一些性能上的优化（比如Ajax转场，提高页面切换速度），并且提供了一些新的js事件供开发者调用。注：Jquery Mobile依赖于Jquery，所以HTML需要引用Jquery。

Jquery Mobile需要学习的内容蛮多的，我建议新手全面地过一遍Jquery Mobile的教程再做应用，我除了看w3cschool的教程外，还看了这位作者的文章，最近还发现Jquer Mobile中文API网站也很不错。

  • 简单示例

首先到jquery mobile官网下载自己需要的版本，默认下载下来的文件包含Jquery Mobile和Jquery的js，同时也提供了很多Demo供参考。

注：*.min.*系列是压缩过的文件，文件大小要比完整源码小很多，应用正式上线时最好用min文件，能够提高页面加载文件效率。

然后随意建一个HTML文件，注意页面头部要有<!DOCTYPE html>标签，页面引用以下三个必备文件（文件位置根据你的HTML相对位置来决定）。

  1. <link rel="stylesheet" href="../scripts/jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.css" type="text/css">
  2. <script src="../scripts/jquery.mobile-1.3.2/jquery.js" type="text/javascript" ></script>
  3. <script src="../scripts/jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.js" type="text/javascript" ></script>

在<Body>标签中编写页面元素，跟传统的HTML有所不同的是，jquery mobile把一个<div
data-role="page">当做一个页面，在page中可以定义三个主体区：头部header、内容区content和底部footer，一个简单的示例如下。

  1. <body>
  2. <div data-role="page">
  3. <div data-role="header">
  4. <h1>欢迎来到我的主页</h1>
  5. </div>
  6. <div data-role="content">
  7. <p>我现在是一个移动端开发者!!</p>
  8. </div>
  9. <div data-role="footer">
  10. <h1>底部文本</h1>
  11. </div>
  12. </div>
  13. </body>

前面说了一个<div data-role="page">标签表示一个页面，那么jquery
mobile支持一个<body>标签中存在多个page，它们的ID一定要不同，便于区分。页面初次加载时，默认只显示第一个page！而多个页面切换非常简单，只需要在跳转链接中加[#目标page的ID]即可。如下代码实现的功能是：点击[页面②]链接后页面切换到id为pagetwo的页面，然后点击[页面①]，又会回到pageone页面。

  1. <div data-role="page" id="pageone">
  2. <div data-role="content">
  3. <a href="#pagetwo">页面②</a>
  4. </div>
  5. </div>
  6. <div data-role="page" id="pagetwo">
  7. <div data-role="content">
  8. <a href="#pageone">页面①</a>
  9. </div>
  10. </div>

如果要让第二个页面以dialog弹出框的形式显示，则只需要在跳转的<a>标签中增加一个属性[data-rel="dialog"]。不过如果pagetwo只有一个data-role=content内容区的话，弹出框是没有关闭按钮的，所以你需要给pagetwo定义一个header。

  1. <div data-role="page" id="pageone">
  2. <div data-role="content">
  3. <p>Welcome!</p>
  4. <a href="#pagetwo" data-rel="dialog">页面②</a>
  5. </div>
  6. </div>
  7. <div data-role="page" id="pagetwo">
  8. <div data-role="header">
  9. <h1></h1>
  10. </div>
  11. <div data-role="content">
  12. <p>Goodbye!</p>
  13. <a href="#pageone">页面①</a>
  14. </div>
  15. </div>

至于其它jquery mobile控件，这里就不赘述了，大家可以自行去相关教程网站学习了解。

下面介绍一点jquery mobile的事件和方法。

jquery mobile用得最多的事件恐怕是pageinit，这个是指定page加载完成时调用的。而jquery的ready()反而用得比较少（这个后面章节说）。

  1. $(document).on("pageinit","#pageone",function(){
  2. alert("页面初始化");
  3. });

然后还有一些好玩的屏幕左右滑动事件和上下滚动事件。

  1. $(document).on("swipeleft",function(){
  2. alert("向左滑动");
  3. });
  4. $(document).on("swiperight","#pagethree",function(){
  5. alert("向右滑动");
  6. });
  7. $(document).on("scrollstart",function(){//关联事件：scrollstop
  8. //滚动页面   注：不论上下滑动 还是左右滑动都会触发
  9. });

还有一个是页面转场时用到的pagebeforechange事件，用于给第二个页面进行参数传递，你只要输入pagebeforechange关键字，网上全是说它进行参数传递的文章。

  1. $(document).unbind("pagebeforechange").bind("pagebeforechange", function(e, data) {
  2. });

传统页面的跳转可能是通过window.location来完成，jquery mobile提供了自带的转场方法，这种跳转是通过Ajax加载第二个页面，从速度上要比第一个高，但是用这种方式要注意很多问题（这个后面文章说明）。

  1. $.mobile.changePage("xx/two.html")

注：如果使用<a href="xx/tow.html">的形式到下一页，默认也是使用jquery mobile的changePage跳转的。

下面来一个完整的示例，这个示例在chrome下就看得到效果，下面代码中有很多注释说明，大家自行消化理解吧。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  5. <!-- 移动设备全屏 -->
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="stylesheet" href="../../scripts/jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.css" type="text/css">
  8. <script src="../../scripts/jquery.mobile-1.3.2/jquery.js" type="text/javascript" >
  9. </script>
  10. <script src="../../scripts/jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.js" type="text/javascript" >
  11. </script>
  12. <script src="../../scripts/bless.ui.core.js" type="text/javascript" >
  13. </script>
  14. <title>
  15. </title>
  16. <script type="text/javascript">
  17. $(document).on("pageinit","#pageone",function(){
  18. alert("页面初始化");
  19. });
  20. </script>
  21. </head>
  22. <body>
  23. <div data-role="page" id="pageone">
  24. <!-- 头部信息 -->
  25. <!-- data-position="fixed"固定位置 不随上下滑动而变化 -->
  26. <!-- data-fullscreen="true"双击屏幕后隐藏该部位，注意如果这样设置则会覆盖掉一部分content -->
  27. <div data-role="header" data-position="fixed">
  28. <!-- data-direction="reverse"反向操作，即从page1正向滑动过来，则本动画会反向滑动回page1 -->
  29. <a href="#" id="changePage" data-icon="arrow-l" data-transition="slide" data-direction="reverse">
  30. 返回
  31. </a>
  32. <h1>
  33. 欢迎访问我的主页
  34. </h1>
  35. <!-- 导航栏Tabs  参考：http://w3school.com.cn/jquerymobile/jquerymobile_navbars.asp -->
  36. <div data-role="navbar">
  37. <ul>
  38. <!-- class="ui-btn-active"选中状态 -->
  39. <li>
  40. <a href="#pageone" class="ui-btn-active">
  41. 首页
  42. </a>
  43. </li>
  44. <!-- data-rel="dialog"让页面以弹出框的形式显示 -->
  45. <li>
  46. <a href="#pagetwo" data-rel="dialog">
  47. 页面二
  48. </a>
  49. </li>
  50. </ul>
  51. </div>
  52. </div>
  53. <!-- 内容区信息 -->
  54. <div data-role="content">
  55. <form method="post" action="#">
  56. <div data-role="fieldcontain">
  57. <input type="hidden" name="id" id="id">
  58. <input type="hidden" name="deleteFlag" id="deleteFlag">
  59. <input type="hidden" name="userType" id="userType">
  60. <label for="name">
  61. 姓名：
  62. </label>
  63. <input type="text" name="name" id="name" placeholder="您的姓名...">
  64. <br>
  65. <label for="sex">
  66. 性别：
  67. </label>
  68. <input type="radio" name="sex" id="mail" value="1" checked="checked">
  69. <label for="mail">
  70. 男
  71. </label>
  72. <input type="radio" name="sex" id="femail" value="2">
  73. <label for="femail">
  74. 女
  75. </label>
  76. <br>
  77. <label for="birthday">
  78. 生日：
  79. </label>
  80. <input type="date" name="birthday" id="birthday" >
  81. <br>
  82. <label for="mobilePhone">
  83. 手机号码：
  84. </label>
  85. <input type="text" data-clear-btn="true" name="mobilePhone" id="mobilePhone" placeholder="您的手机号码...">
  86. <br>
  87. <label for="email">
  88. 电子邮箱：
  89. </label>
  90. <input type="email" data-clear-btn="true" name="email" id="email" placeholder="您的电子邮箱...">
  91. <br>
  92. </div>
  93. <input type="button" id="save" data-inline="true" value="提交">
  94. </form>
  95. </div>
  96. <div data-role="footer">
  97. <h1>
  98. 页脚文本
  99. </h1>
  100. </div>
  101. </div>
  102. <div data-role="page" id="pagetwo">
  103. <div data-role="header">
  104. <h1>
  105. 页面2
  106. </h1>
  107. </div>
  108. <div data-role="content">
  109. <p>
  110. 这是页面2
  111. </p>
  112. </div>
  113. <div data-role="footer">
  114. <h1>
  115. 页脚文本
  116. </h1>
  117. </div>
  118. </div>
  119. </body>
  120. </html>

  • 注意事项

这段是2014-4-14补充。

在越来越深入的开发学习中，发现了jquery mobile很多需要注意的地方，这里统一说明。

1、所有HTML元素几乎都被jquery mobile更改过，因为JQM在做页面渲染的时候,为了使样式跟客户端程序相似, 隐藏了原始的标签然后用一些新的标签和自定义的样式来表现原标签,其实新样式的标签已经不是原来的标签。

比如页面有一个ListView，你想通过javascript动态append一个新的ListView，这时最终效果绝对不是JqueryMobile提供的那种样式（这个可以通过桌面浏览器看代码知道）。要想让动态创建的元素被Jquery
Mobile渲染，就必须调用它提供的一些方法来刷新当前组件。具体的内容可参考这个博客《jQuery Mobile动态刷新页面样式》

2、移动设备javascript调试问题，在开发中经常会有一些javascript错误，最头疼的是不知道怎么调试，如果手机也有“开发者调试模式”就好了，可惜没有！根据我目前的经验，调试可以用两种方法：一个拷贝代码到电脑，通过PC浏览器来调试；另一个看LogCat日志，javascript报错都会在日志中体现，如下图所示，首先看错误信息是什么，然后看错误文件在哪儿，最后一个关键是看提示在文件哪一行出问题，然后你就可以跟过去看问题所在了。下图异常原因是bless.insurer.js文件第25行，名为"DOM"的对象不存在。

3、对于动态操作Button按钮，最好使用<a>标签来实现，而<input
type="button">完全不推荐，因为jquery mobile为了渲染出按钮的样式，会把input
button隐藏，而用div来替代其内容，这时开发人员想通过javascript来隐藏/显示/更改按钮文字的话，是没效果的。

对按钮的常用操作如下：

  1. <!-- <a href="javascript:void(0);" data-role="button" id="save">新增</a> -->
  2. $("#save").hide(); //隐藏按钮
  3. $("#save").show(); //显示按钮
  4. $("#save").find(".ui-btn-text").html("修改"); //修改按钮文字
  5. $("body").append("<a href=\"javascript:void(0);\" data-role=\"button\" id=\"del\">删除</a>")
  6. $("#del").button();//动态新增一个按钮

HTMl5和JQuery Mobile内容非常丰富，这里展示的只是冰山一角，我也知道得不多，希望在后面项目开发中积累更多的知识。

Android+Jquery Mobile学习系列(2)-HTML5/Jquery Mobile基础的更多相关文章

  1. Python学习系列（八）( 面向对象基础）

     Python学习系列(八)( 面向对象基础) Python学习系列(七)( 数据库编程) 一,面向对象 1,域:属于一个对象或类的变量.有两种类型,即实例变量—属于每个实例/类的对象:类变量—属于类 ...

  2. Android+Jquery Mobile学习系列-目录

    最近在研究学习基于Android的移动应用开发,准备给家里人做一个应用程序用用.向公司手机移动团队咨询了下,觉得使用Android的WebView上手最快,因为WebView等于是一个内置浏览器,可以 ...

  3. Android+Jquery Mobile学习系列(6)-个人信息设置

    本节开始,进行代码的实战练习.我的这个App是管理保险客户信息的,数据采用Sqlite存储在本地手机上,第一次使用需要先登记自己的个人信息,这个功能非常简单,也无关紧要,我是拿这个练手,方便做后面复杂 ...

  4. Android+Jquery Mobile学习系列(7)-保险人信息

    [保险人管理]是这个APP最重要的功能,用于保存保险客户的数据,给后面的功能提供数据支撑. 简单说说[保险人管理]功能:主要就是增.删.改.查四个功能,在新增和修改的时候不仅可以保存保险人的姓名.身份 ...

  5. jQuery源代码学习笔记：构造jQuery对象

    2.1源代码结构: (function( window, undefined ) { var jQuery = (function() { // 构建jQuery对象 var jQuery = fun ...

  6. Android+Jquery Mobile学习系列(9)-总结和代码分享

    经过一个多月的边学习边练手,学会了Android基于Web开发的毛皮,其实开发过程中用Android原生API不是很多,更多的是HTML/Javascript/Css. 个人觉得基于WebView的J ...

  7. Android+Jquery Mobile学习系列(4)-页面跳转及参数传递

    关于页面转场,这个必须得专门列出来说明一下,因为Jquery Mobile与普通的Web发开有一些区别,这个对于新手如果不了解的话,就会钻到死胡同.撸主前段时间就是很急躁地上手开发程序,结果在页面转场 ...

  8. Android+Jquery Mobile学习系列(8)-保单/生日提醒功能

    其实这个App基本功能早已做完,并且交给老婆试用去了.但由于最近项目要保证稳定,所以持续加班,没有时间写最后一点内容,本节也就简单截图做个说明,不详细叙述实现方式.我会把代码上传到最后一章中,有兴趣的 ...

  9. Android+Jquery Mobile学习系列(4)-页面转场及参数传递

    关于页面转场,这个必须得专门列出来说明一下,因为Jquery Mobile与普通的Web发开有一些区别,这个对于新手如果不了解的话,就会钻到死胡同.撸主前段时间就是很急躁地上手开发程序,结果在页面转场 ...

随机推荐

  1. Android RecyclerView遇到notifyDataSetChanged无效时的解决方案

    一.简述 不管AbsListView(ListView.GridView)或是新出的RecyclerView,在使用notifyDataSetChanged方法更新列表数据时,一定要保证数据为同个对象 ...

  2. Sql Server 优化 SQL 查询：如何写出高性能SQL语句

    1. 首先要搞明白什么叫执行计划? 执行计划是数据库根据SQL语句和相关表的统计信息作出的一个查询方案,这个方案是由查询优化器自动分析产生的,比如一条SQL语句如果用来从一个 10万条记录的表中查1条 ...

  3. Redis 之order set有序集合结构及命令详解

    1.zadd key score1 value1 score2 value2  添加元素 2.zrem key value1 value2 ..  删除集合中的元素 3.zremrangebyscor ...

  4. webstorm_completion

    js 使用yarn 安装声明定义文件 @types/xxx koa ==> @types/koa koa-router ==> @types/koa-router 安装webstorm中的 ...

  5. 293. [NOI2000] 单词查找树——COGS

    293. [NOI2000] 单词查找树 ★★   输入文件:trie.in   输出文件:trie.out   简单对比时间限制:1 s   内存限制:128 MB 在进行文法分析的时候,通常需要检 ...

  6. 蓝桥-区间K大数查询

    问题描述: 给定一个序列,每次询问序列中第l个数到第r个数中第K大的数是哪个. 输入格式 第一行包含一个数n,表示序列长度. 第二行包含n个正整数,表示给定的序列. 第三个包含一个正整数m,表示询问个 ...

  7. copy and rename a file multiple times using Matlab

    for file.txt***********n=10;fileinfo=importdata('file.txt');for i=1:nfilename=sprintf('file_%d.txt', ...

  8. java常见知识

    在JSP页面获取当前项目名称的方法: 方法1: <%= this.getServletContext().getContextPath() %> 方法2: 使用EL表达式 ${pageCo ...

  9. BUPT2017 springtraining(15) #3

    这里这里 A.签到题 #include <cstdio> double a[] = {0.4, 0.16, 0.063, 0.025, 0.010, 0.004}; int main() ...

  10. Serverless（baas & faas）无服务器计算

    自从2014年AWS推出Lambda服务后,Serverless一词越来越热,已经成为一种新型的软件设计架构,即Serverless Architecture.作为一种原生于公共云的架构,Server ...