jQuery Mobile 初期化事件有mobileinit,pagebeforecreate,pagecreate,pageinit这个4个事件。本文尝试总结和比较4个事件。
事件触发顺序
第一个触发的事件是mobileinit，其次pagebeforecreate，再次pagecreate，最后pageinit。
mobileinit -> pagebeforecreate -> pagecreate -> pageinit。
mobileinit
jQuery mobile加载时最先触发的事件。
绑定此事件的JS代码，应该在jQuery之后，jQuery mobile之前。
0123456 |
<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的操作时徒劳的。
如下面的例子
01234567891011121314151617181920212223242526272829303132 |
<!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初始化之前 触发的事件。
因为DOM加载完成，上面的例子在pagebeforecreate事件中就变成了这样。
01234567891011121314151617181920212223242526272829303132 |
<!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('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()。