jQuery技术

JQuery mobile(一)学习使用

字号+ 作者:H5之家 来源:H5之家 2017-01-05 12:05 我要评论( )

Html5学习-JQuery mobile web app使用1. JQuery mobile简介 JQuery mobile也就是我们常说的(JQM,或者 JQmobile) ,是JQuery在手机上 或者在平板上的一个版本,是

Html5学习-JQuery mobile web app使用1. JQuery mobile简介   JQuery mobile也就是我们常说的(JQM,或者 JQmobile) ,是JQuery在手机上 或者在平板上的一个版本,是创建移动 web app的框架
   JQM 是用在所有流行移动设备上,它使用Html5 和 css3 尽可能少的脚步来布局的。利用JQM 屏蔽了所有设备浏览器间的差异,它提供了一整套的UI组件   提供了丰富的官方文档,还提供了针对移动端浏览器的事件,比如触摸,滑动,页面跳转等。   所以作为我们开发 web app的流行框架之一。  参考网址

2. 基本的框架<!DOCTYPE html><html><head> <title>jQuery Mobile Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="" /> <script type="text/javascript" src=""></script> <script type="text/javascript" src=""></script></head><body></body> </html> 这里包含了头部head和身体body信息,<title>jQuery Mobile Demo</title>  这个页面title
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  页面显示时候编码,显示html格式类型
<meta name="viewport" content="width=device-width, initial-scale=1"> 这个是初始化移动设备的浏览显示,在不同移动设备显示方式不同,可鞥吧页面缩放,添加后默认不缩放了。
<link rel="stylesheet" href="" />
引入jqm 的css样式,这里显示版本较低,一般1.4.3了<script type="text/javascript" src=""></script><script type="text/javascript" src=""></script>
这里引入了jquery,以及jquery的脚本
3. 页面body显示内容 <body> <div data-role="page"> <div data-role="header"> <h1>Header</h1> </div> <div role="main" class="ui-content"> <p>Content goes here</p> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div></body>
4. 多个页面在同一个页面显示,并跳转在一个页面中添加多个data-role=”page”
JQM中可以实现单一html文件中创建多个页面并且相互跳转但是需要使用唯一的id来分隔每一个页面, 并用href来连接彼此<body> <div data-role="page" id="index"> <div data-role="header"> <h1>Header1</h1> </div> <div data-role="content"> <p>Content goes here1</p> <p><a href="#index1">index</a></p> </div> <div data-role="footer"> <h4>Footer1</h4> </div> </div> <div data-role="page" id="index1"> <div data-role="header"> <h1>Header2</h1> </div> <div role="main" class="ui-content"> <p>Content goes here2</p> <p><a href="#index">index2</a></p> </div> <div data-role="footer"> <h4>Footer2</h4> </div> </div> </body>
5. 页面切换效果 JQM 拥有从一个页面跳转到另一个页面的效果,过渡效果可应用于任何跳转data-transition="slide"例如 <p><a href=”#about” data-transition=”flip”>关于页面</a></p>



5. jqm 拥有很多页面事件


这里pagebeforecreate是在页面即将初始化的触发,pagecreate是在页面创建的时候,但是还没加载页面元素之前,pageinit是页面完成初始化,并完成页面加载触发$(document).on("pageinit",function(){ alert("触发 pageinit 事件 - 页面已初始化,DOM 已加载,jQuery Mobile 已完成页面增强。")}); $(document).on("pagebeforecreate",function(){ alert("触发 pagebeforecreate 事件 - 页面即将初始化。jQuery Mobile 仍未开始增强页面。");}); $(document).on("pagecreate",function(){ alert("触发 pagecreate 事件 - 已创建页面,但增强未完成。");});


$(document).on("pageload",function(event,data){ alert("触发 pageload 事件!/nURL: " + data.url);});$(document).on("pageloadfailed",function(event,data){ alert("抱歉,被请求页面不存在。");});


$(document).on("pagebeforeshow","#pagetwo",function(){ alert("触发 pagebeforeshow 事件 - 页面二即将显示");});$(document).on("pageshow","#pagetwo",function(){ alert("触发 pageshow 事件 - 现在显示页面二");});$(document).on("pagebeforehide","#pagetwo",function(){ alert("触发 pagebeforehide 事件 - 页面二即将隐藏");});$(document).on("pagehide","#pagetwo",function(){ alert("触发 pagehide 事件 - 现在隐藏页面二");});

android 和 html5学习群:191974931

   

 

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

相关文章
  • Jquery Is Not Defined

    Jquery Is Not Defined

    2017-01-05 15:02

  • jquery api-www撸撸吧com-川村真树

    jquery api-www撸撸吧com-川村真树

    2017-01-04 14:04

  • jQuery Mobile学习笔记案例实现

    jQuery Mobile学习笔记案例实现

    2017-01-04 12:03

  • jQuery内核详解与实践

    jQuery内核详解与实践

    2017-01-04 11:02

网友点评