jquery mobile转场时加载js
jquery mobile拦截了所有的http请求,并使用ajax请求取代传统的http。请求发出后,框架会将请求的内容插入到页面中data-role="page"的部分,取代原来的内容。因而如果请求的新页面在head部分加载了其他的js,此时框架并不会加载该部分的js。
这就意味着head部分的js和css在绝大部分情况下并不会被加载并执行,通常情况下建议所有页面使用一套统一的js和css。但如果应用的复杂度较高或者为分工合作开发时,我们需要根据不同的页面加载不同的js或样式,这时候可以使用jquery mobile提供的pagecreate方法解决该问题。
我们知道在使用jquery框架时,我们习惯使用
$(document).ready(function(){ // TODO... })
方法加载自定义的方法。但这个方法在jquery mobile中,因为jquery mobile特殊的请求机制(ajax请求),很多时候并不能达到我们希望的功能。jquery mobile提供了pagecreate的事件,表示
页面初始化时,初始化之后触。
下面我们可以通过一个简单的例子,使用pagecreate实现不同page加载不同js的功能:
<body> <div data-role="page" id="pageOne"> <div data-role="header"> <h1>page one header</h1> </div> <div data-role="content"> <p>page one content</p> <a href="#pageTwo">page two</a> </div> <div data-role="footer"> <p>page one footer</p> </div> </div><!-- /page --> <div data-role="page" id="pageTwo"> <div data-role="header"> <a data-rel="back">back</a> <h1>page two header</h1> </div> <div data-role="content"> <p>page two content</p> </div> <div data-role="footer"> <p>page two footer</p> </div> </div><!-- /page --> <script> $(document).on("pagecreate", "#pageOne", function(){ alert("page one create"); }); $(document).on("pagecreate", "#pageTwo", function(){ alert("page two create"); }); </script> </body>
这样,页面在一开始渲染时,只会执行
alert("page one create");
当a标签跳转到pageTwo时才会执行:
alert("page two create");
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17