jQuery Mobile初始化事件

事件分为以下几种:

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>

测试结果:

源码地址:

https://download.csdn.net/download/zang141588761/11122056

猜你喜欢

转载自blog.csdn.net/zang141588761/article/details/89349269