jquery mobile转场时加载js

最新推荐文章于 2024-11-13 17:27:29 发布

weyoung001

最新推荐文章于 2024-11-13 17:27:29 发布

阅读量114

点赞数

分类专栏： android jquery mobile javascript web前端移动开发文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/weyoung001/article/details/84522614

版权

javascript 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

web前端

4 篇文章 0 订阅

订阅专栏

android

2 篇文章 0 订阅

订阅专栏

本文详细介绍了 jQuery Mobile 框架中的 pagecreate 事件及其如何用于实现不同页面加载不同 js 文件。通过使用 pagecreate 方法，开发者可以在页面初始化时加载特定于页面的 js 或 css，从而实现在不同页面上提供定制化的功能和外观。

摘要由CSDN通过智能技术生成

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>

这样，页面在一开始渲染时，只会执行