JQM 学习(一)

直接进主题:

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 - 当外部页面加载时、卸载时或遭遇失败时
页面加载属于外部页面,无论外部何时载入DOM,都会触发两个事件,第一个是 pagebeforeload,然后成功则触发pageload ,否则触发pageloadfailed,可以试下以下效果:

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

  • Page Transition - 在页面过渡之前和之后
页面过渡设计两个网页,跳转前和跳转后(a href="#page2"),上面的pagebeforecreate在页面渲染后就不会再触发,所以这时候再跳转时候会触发什么事件会比较重要。

点击跳转前会触发pagebeforeshow,然后跳转完后就显示pageshow,返回(a href=“#page1”)就触发pagebeforehide事件,隐藏后则会触发pagehide。这点非常重要。


3、了解JQM的加载方式

JQM加载方式是加载完所有的Js,然后再进行渲染html的。所以第一次会慢。


4、了解JQM的如何跳转后异步加载JS

很多人说在跳转的时候把js写在page下面。可以加载。但是这样写的不是很漂亮。可以写在pagebeforeshow下,再根据id进行加载不同的js。无论怎么样,看具体需求而定吧。


好了,今天学了基础的东西。下次写个列表上拉刷新下拉加载更多的例子DEMO。


谢谢!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值