Xiaoqiang's HTML5 mobile development road (50) - jquerymobile page initialization process-H5 Tutorial-php.cn

Xiaoqiang's HTML5 mobile development road (50) - jquerymobile page initialization process

黄舟

Release： 2017-02-15 13:49:36

Original

1444 people have browsed it

In order to facilitate explanation and more intuitively display the page initialization process of jquerymobile and the triggering process of each event, I drew a flow chart:

Figure The events circled in red boxes in the interface are the events in the interface. The test code is as follows:

<!DOCTYPE html>
<html>
<head>
<title>练习</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, 
      initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<link href="css/jquery.mobile-1.0.1.min.css" 
      rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.6.4.js" 
      type="text/javascript" ></script>
<script src="js/jquery.mobile-1.0.1.js"  
      type="text/javascript" ></script>
<script>
	$(document).ready(function(e){
		alert("document.ready被触发");
	});
	
	$(document).live("mobileinit", function(){
		alert("mobileinit事件触发");
	});
	$(document).delegate("#page_MobileInit0", "pageinit", function(){
		alert("page_MobileInit0页面的pageinit事件被触发");
	});
	$(document).delegate("#page_MobileInit0", "pageshow", function(){
		alert("page_MobileInit0页面的pageshow事件被触发");
	});
	$(document).delegate("#page_MobileInit1", "pageinit", function(){
		alert("page_MobileInit1页面的pageinit事件被触发");
	});
	$(document).delegate("#page_MobileInit1", "pageshow", function(){
		alert("page_MobileInit1页面的pageshow事件被触发");
	});
	
</script>    
</head>
	<body>
		<section id="page_MobileInit0" data-role="page">
			<header data-role="header">
				<h1>页面事件</h1>
			</header>
			<p class="content" data-role="content">
				<p>jQuery Mobile页面初始化是通过mobileinit、$(document).ready()以及pageinit实现的</p>
				<a href="#" onclick="$(document).trigger(&#39;mobileinit&#39;)">手动触发mobileinit事件</a>
				<a href="#page_MobileInit1">下一页</a><br/></p>
			</p>
		</section>
		
		<section id="page_MobileInit1" data-role="page">
			<header data-role="header">
				<h1>页面事件</h1>
			</header>
			<p class="content" data-role="content">
				<p>jQuery Mobile页面初始化是通过pageinit实现的<br/>
					<a href="#page_MobileInit0">返回</a></p>
			</p>
		</section>
	</body>
</html>

Copy after login

In addition to the events introduced above, there is also the onload event. The onload event is triggered when all relevant content (including images) is loaded. Because of the influence of images and other content, the onload event is triggered later. Although the onload event is also used in page development, in jQuery Mobile development, three initialization events, mobileinit, ready() and pageinit, are mainly used.
The above is the content of Xiaoqiang’s HTML5 mobile development road (50)-jquerymobile page initialization process. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!