jquery mobile 的4个初始化事件
来源:互联网 发布:js中的window.onload 编辑:程序博客网 时间:2024/04/30 02:07
jQuery Mobile 初期化事件有mobileinit,pagebeforecreate,pagecreate,pageinit这个4个事件。本文尝试总结和比较4个事件。
事件触发顺序
第一个触发的事件是mobileinit,其次pagebeforecreate,再次pagecreate,最后pageinit。
mobileinit -> pagebeforecreate -> pagecreate -> pageinit。
mobileinit
jQuery mobile加载时最先触发的事件。
绑定此事件的JS代码,应该在jQuery之后,jQuery mobile之前。
<script src="jquery.js"></script><script>$(document).live('mobileinit',function(event){// ....});</script><script src="jquery.mobile-1.0.1.min.js"></script>
因为Document还没有加入到DOM树中,mobileinit事件中对html的操作时徒劳的。
如下面的例子
<!DOCTYPE html><html><head><metahttp-equiv="content-type"content="text/html; charset=UTF-8"><metacharset="UTF-8"><title>jQuery mobile API</title><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css"/><scriptsrc="http://code.jquery.com/jquery-1.6.4.min.js"></script><script>$("#page0").live('mobileinit',function(event){ $('ul').attr('data-role', 'listview'); }); </script><scriptsrc="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script><body><divdata-role="page"id="page0"><divdata-role="header"data-theme="b"><h3>欢迎访问PG99.NET</h3></div><divdata-role="content"data-theme="c"><ul><li><ahref="#">LI1</a></li><li><ahref="#">LI2</a></li><li><ahref="#">LI3</a></li></ul></div><divdata-role="footer"data-theme="a"><h3>欢迎访问PG99.NET</h3></div></div></body</html>
上面的例子,想在ul标签中加入data-role=”listview”的属性。结果是让人失望的。
pagebeforecreate
页面的DOM加载后,DOM初始化之前 触发的事件。
ntent="text/html; charset=UTF-8"><metacharset="UTF-8"><title>jQuery mobile API</title><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css"/><scriptsrc="http://code.jquery.com/jquery-1.6.4.min.js"></script><script>$("#page0").live('pagebeforecreate',function(event){ $('ul').attr('data-role', 'listview'); }); </script><scriptsrc="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script><body><divdata-role="page"id="page0"><divdata-role="header"data-theme="b"><h3>欢迎访问PG99.NET</h3></div><divdata-role="content"data-theme="c"><ul><li><ahref="#">LI1</a></li><li><ahref="#">LI2</a></li><li><ahref="#">LI3</a></li></ul></div><divdata-role="footer"data-theme="a"><h3>欢迎访问PG99.NET</h3></div></div></body</html>
pagecreate
这个事件,在HTML已经在DOM中建立完成,初始化也完成,但在展开widget之前触发的事件。
pageinit
展开完成后触发的事件。是jQuery mobile中的$(document).ready()。
- JQuery Mobile 的4个初始化事件
- jquery mobile 的4个初始化事件
- jquery mobile 的4个初始化事件
- 继承扩展jQuery Mobile的初始化事件
- jQuery Mobile的API事件
- jQuery Mobile的API事件
- jQuery的Mobile事件处理
- 深入jQuery Mobile的事件
- jquery mobile 的事件测试
- jquery mobile 入门4 (事件)
- 【Jquery mobile】事件
- jquery mobile中的事件
- jQuery mobile 事件 swipe
- JQuery Mobile事件详解
- jQuery Mobile 基础事件
- jQuery Mobile 页面事件
- jquery mobile中的事件
- JS-jquery mobile事件
- memcached 压力测试以及性能分析
- xcode反汇编调试iOS模拟器程序(七)Debug与Release的区别
- 如何为iOS设备开发通用的应用程序
- QT绘制半透明窗体
- 将文件上传到网络共享服务器的方法
- jquery mobile 的4个初始化事件
- 用定时器进行miller2编码的思考
- 函数调用具体过程-堆栈【1】
- 苹果UDID(uniqueIdentifier)的替代方案
- list_for_each_entry list_for_each_entry_safe
- mysql忘记密码了该怎么办?
- 使用Spring的AOP后,Struts2的@InputConfig注解不起作用
- ZOJ 2750 Idiomatic Phrases Game(邻接表+dijkstra)
- PLSQ连接数据库报ORA-12514错误的解决办法