Android+Jquery Mobile学习系列(2)-HTML5/Jquery Mobile基础

时间  2019-11-07
标签 android+jquery android jquery mobile 学习 系列 html5 html 基础 栏目 Android 繁體版
原文   原文链接

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

 

  • HTML5

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

 

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

 

 

  • 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网站也很不错。html5

 

 

  • 简单示例

首先到jquery mobile官网下载本身须要的版本，默认下载下来的文件包含Jquery Mobile和Jquery的js，同时也提供了不少Demo供参考。java

注：*.min.*系列是压缩过的文件，文件大小要比完整源码小不少，应用正式上线时最好用min文件，可以提升页面加载文件效率。
jquery


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

 

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，一个简单的示例以下。chrome

 

Html代码   收藏代码
  1. <body>  
  2. <div data-role="page">  
  3.   
  4.   <div data-role="header">  
  5.     <h1>欢迎来到个人主页</h1>  
  6.   </div>  
  7.   
  8.   <div data-role="content">  
  9.     <p>我如今是一个移动端开发者!!</p>  
  10.   </div>  
  11.   
  12.   <div data-role="footer">  
  13.     <h1>底部文本</h1>  
  14.   </div>  
  15.   
  16. </div>  
  17. </body>  

 

 

 

 

 

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

 

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

 

 

 

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

 

Html代码   收藏代码
  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.   
  8. <div data-role="page" id="pagetwo">  
  9.   <div data-role="header">  
  10.     <h1></h1>  
  11.   </div>  
  12.   
  13.   <div data-role="content">  
  14.     <p>Goodbye!</p>  
  15.     <a href="#pageone">页面①</a>  
  16.   </div>  
  17. </div>   


  

 

 

至于其它jquery mobile控件，这里就不赘述了，你们能够自行去相关教程网站学习了解。

 

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

 

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

 

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

 

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

 

 

Js代码   收藏代码
  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关键字，网上全是说它进行参数传递的文章。

 

 

Js代码   收藏代码
  1. $(document).unbind("pagebeforechange").bind("pagebeforechange", function(e, data) {  
  2.   
  3. });  

 

 

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

Js代码   收藏代码
  1. $.mobile.changePage("xx/two.html")  

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

 

 

下面来一个完整的示例，这个示例在chrome下就看获得效果，下面代码中有不少注释说明，你们自行消化理解吧。

Html代码   收藏代码
  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.   
  36.               <!-- 导航栏Tabs  参考：http://w3school.com.cn/jquerymobile/jquerymobile_navbars.asp -->  
  37.               <div data-role="navbar">  
  38.                 <ul>  
  39.                   <!-- class="ui-btn-active"选中状态 -->  
  40.                   <li>  
  41.                   <a href="#pageone" class="ui-btn-active">  
  42.                     首页  
  43.                   </a>  
  44.                 </li>  
  45.                 <!-- data-rel="dialog"让页面以弹出框的形式显示 -->  
  46.                 <li>  
  47.                 <a href="#pagetwo" data-rel="dialog">  
  48.                   页面二  
  49.                 </a>  
  50.               </li>  
  51.             </ul>  
  52.           </div>  
  53.         </div>  
  54.   
  55.         <!-- 内容区信息 -->  
  56.         <div data-role="content">  
  57.           <form method="post" action="#">  
  58.             <div data-role="fieldcontain">  
  59.               <input type="hidden" name="id" id="id">  
  60.               <input type="hidden" name="deleteFlag" id="deleteFlag">  
  61.               <input type="hidden" name="userType" id="userType">  
  62.               <label for="name">  
  63.                 姓名：  
  64.               </label>  
  65.               <input type="text" name="name" id="name" placeholder="您的姓名...">  
  66.               <br>  
  67.   
  68.               <label for="sex">  
  69.                 性别：  
  70.               </label>  
  71.               <input type="radio" name="sex" id="mail" value="1" checked="checked">  
  72.               <label for="mail">  
  73.                 男  
  74.               </label>  
  75.               <input type="radio" name="sex" id="femail" value="2">  
  76.               <label for="femail">  
  77.                 女  
  78.               </label>  
  79.               <br>  
  80.   
  81.               <label for="birthday">  
  82.                 生日：  
  83.               </label>  
  84.               <input type="date" name="birthday" id="birthday" >  
  85.               <br>  
  86.   
  87.               <label for="mobilePhone">  
  88.                 手机号码：  
  89.               </label>  
  90.               <input type="text" data-clear-btn="true" name="mobilePhone" id="mobilePhone" placeholder="您的手机号码...">  
  91.               <br>  
  92.   
  93.               <label for="email">  
  94.                 电子邮箱：  
  95.               </label>  
  96.               <input type="email" data-clear-btn="true" name="email" id="email" placeholder="您的电子邮箱...">  
  97.               <br>  
  98.             </div>  
  99.             <input type="button" id="save" data-inline="true" value="提交">  
  100.           </form>  
  101.         </div>  
  102.   
  103.         <div data-role="footer">  
  104.           <h1>  
  105.             页脚文本  
  106.           </h1>  
  107.         </div>  
  108.       </div>  
  109.   
  110.       <div data-role="page" id="pagetwo">  
  111.         <div data-role="header">  
  112.           <h1>  
  113.             页面2  
  114.           </h1>  
  115.         </div>  
  116.   
  117.         <div data-role="content">  
  118.           <p>  
  119.             这是页面2  
  120.           </p>  
  121.         </div>  
  122.   
  123.         <div data-role="footer">  
  124.           <h1>  
  125.             页脚文本  
  126.           </h1>  
  127.         </div>  
  128.       </div>  
  129.   
  130.     </body>  
  131.   </html>  

 

 

 

 

 

  • 注意事项

这段是2014-4-14补充。

在愈来愈深刻的开发学习中，发现了jquery mobile不少须要注意的地方，这里统一说明。

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

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

 

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


 

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

对按钮的经常使用操做以下：

Js代码   收藏代码
  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.   
  6. $("body").append("<a href=\"javascript:void(0);\" data-role=\"button\" id=\"del\">删除</a>")  
  7. $("#del").button();//动态新增一个按钮  

 

 

 

HTMl5和JQuery Mobile内容很是丰富，这里展现的只是冰山一角，我也知道得很少，但愿在后面项目开发中积累更多的知识。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程