Route de développement mobile HTML5 de Xiaoqiang (50) - Processus d'initialisation de la page jquerymobile-Tutoriel H5-php.cn

Route de développement mobile HTML5 de Xiaoqiang (50) - Processus d'initialisation de la page jquerymobile

黄舟

Libérer： 2017-02-15 13:49:36

original

1706 Les gens l'ont consulté

Afin de faciliter l'explication et d'afficher de manière plus intuitive le processus d'initialisation de la page de jquerymobile et le processus de déclenchement de chaque événement, j'ai dessiné un organigramme :

Fig. Les événements dans l'interface sont entourés de cases rouges. Le code du test est le suivant :

<!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>

Copier après la connexion

En plus des événements introduits ci-dessus, il y a aussi les événements présentés ci-dessus. événement de chargement. L'événement onload est déclenché lorsque tout le contenu pertinent (y compris les images) est chargé. En raison de l'influence des images et autres contenus, l'événement onload est déclenché plus tard. Bien que l'événement onload soit également utilisé dans le développement de pages, dans le développement jQuery Mobile, trois événements d'initialisation, mobileinit, ready() et pageinit, sont principalement utilisés.
Ce qui précède est le contenu du processus d'initialisation de la page HTML5 mobile development road (50)-jquerymobile de Xiaoqiang. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !