事件分为以下几种:
1)初始化事件(Page Initialization):分别在页面初始在之前,页面创建时以及页面初始化之后触发事件。
2)外部页面加载事件(Page Load):外部页面加载时触发事件
3)页面切换事件(Page Transition):页面切换时触发事件
语法如下:
$(document).on(事件名称,选择器,事件处理函数);
1.Mobileinit
当jQueryMobile开始执行时,会先触发mobileinit事件。想要更改jQueryMobile默认的设置值时,就可以将函数绑定到mobileinit事件.
$(document).on("mobileinit",function(){});
2.Pagebeforecreate、Pagecreate、PageInit
这3个事件都是在初始化前后触发的,Pagebeforecreate会在页面DOM加载后,正在初始时触发;
Pagecreate是当页面的DOM加载完成,初始也完成时触发;Pageinit是在页面初始化之后中触发的。
$(document).on("pagebeforecreate",function(){
});
代码如下:
<html>
<head>
<title jQuery Mobile初始化事件></title>
<!--最佳屏幕宽度-->
<meta name="viewport" content="width=device-width,initial-scale=1" >
<link rel="stylesheet" href="jquery.mobile-1.4.0.min.css"/>
<script src="jquery-1.9.1.min.js"></script>
<script src="jquery.mobile-1.4.0.min.js"></script>
<script type="text/javascript">
$(document).one("pagebeforecreate",function(){
alert("pagebeforecreate事件被触发了!")
});
$(document).one("pagecreate",function(){
alert("pagecreate事件被触发了!")
});
$(document).one("pageinit",function(){
alert("pageinit事件被触发了!")
});
</script>
</head>
<body>
<!--第一页-->
<div data-role="page" data-title="第一页" id="first" data-theme="a">
<div data-role="header">
<a href="#second">按我到第二页</a>
<h1>jQuery Mobile初始化事件 第一页</h1>
</div>
<div data-role="content">
初始化事件测试<br>
这是第一页
</div>
<div data-role="footer">
<h4>页脚</h4>
</div>
</div>
<!--第二页-->
<div data-role="page" data-title="第二页" id="second" data-theme="b">
<div data-role="header">
<a href="#first">返回第一页</a>
<h1>jQuery Mobile初始化事件第二页</h1>
</div>
<div data-role="content">
初始化事件测试<br>
这是第二页
</div>
<div data-role="footer">
<h4>页脚</h4>
</div>
</div>
</body>
</html>
测试结果:
源码地址: