jquery mobile 的4个初始化事件

最新推荐文章于 2019-04-17 09:27:43 发布

沈阳斌子

最新推荐文章于 2019-04-17 09:27:43 发布

阅读量2.4k

点赞数

分类专栏： Jquery Mobile

Jquery Mobile 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>