直接进主题:
1、JQM的框架
2、了解JQM的初始化会触发那些事件。
3、了解JQM的加载方式
4、了解JQM的如何跳转后异步加载JS
1、Jqm的框架:
现在jqm已经发展到1.4.4版本了,引入jqm的css和js就可以开工了。
框架如下:
- data-role="page" 是显示在浏览器中的页面
- data-role="header" 创建页面上方的工具栏(常用于标题和搜索按钮)
- data-role="content" 定义页面的内容,比如文本、图像、表单和按钮,等等
- data-role="footer" 创建页面底部的工具栏
2、了解JQM的初始化会触发那些事件:
- Page Initialization - 在页面创建前,当页面创建时,以及在页面初始化之后
JQM和页面打交道的事件会触发一系列的事件。那么它在工作的时候又会经过那些事件呢?首先会触发pagebeforecreate,然后再触发pagecreate,最后触发pageinit事件。在触发pagebeforecreate时,页面即将初始化。但JQM仍未增强页面,在pagecreate时候,已经创建了页面了,但增强还是未完成。最后触发pageinit时候。页面初始化已经完成。DOM也已经加载完毕。JQM已经完成了页面增强。
可以试下效果:
$(document).on("pagebeforecreate",function(event){ alert("触发 pagebeforecreate 事件!"); }); $(document).on("pagecreate",function(event){ alert("触发 pagecreate 事件!"); }); $(document).on("pageinit",function(event){ alert("触发 pageinit 事件!") });
- Page Load/Unload - 当外部页面加载时、卸载时或遭遇失败时
$(document).on("pageload",function(event,data){ alert("触发 pageload 事件!\nURL: " + data.url); }); $(document).on("pageloadfailed",function(event,data){ alert("抱歉,被请求页面不存在。"); });
- Page Transition - 在页面过渡之前和之后
点击跳转前会触发pagebeforeshow,然后跳转完后就显示pageshow,返回(a href=“#page1”)就触发pagebeforehide事件,隐藏后则会触发pagehide。这点非常重要。
3、了解JQM的加载方式
JQM加载方式是加载完所有的Js,然后再进行渲染html的。所以第一次会慢。
4、了解JQM的如何跳转后异步加载JS
很多人说在跳转的时候把js写在page下面。可以加载。但是这样写的不是很漂亮。可以写在pagebeforeshow下,再根据id进行加载不同的js。无论怎么样,看具体需求而定吧。
好了,今天学了基础的东西。下次写个列表上拉刷新下拉加载更多的例子DEMO。
谢谢!