Heim > Artikel > Web-Frontend > Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (50) – Initialisierungsprozess der jquerymobile-Seite

Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (50) – Initialisierungsprozess der jquerymobile-Seite

黄舟Original: 2017-02-15 13:49:361642Durchsuche

Um die Erklärung zu erleichtern und den Seiteninitialisierungsprozess von jquerymobile und den Auslöseprozess jedes Ereignisses intuitiver darzustellen, habe ich ein Flussdiagramm gezeichnet:

Abb. Die Ereignisse in der Benutzeroberfläche sind in roten Kästchen eingekreist. Der Testcode lautet wie folgt:

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

Zusätzlich zu den oben vorgestellten Ereignissen gibt es auch die Onload-Ereignis. Das Onload-Ereignis wird ausgelöst, wenn alle relevanten Inhalte (einschließlich Bilder) geladen sind. Aufgrund des Einflusses von Bildern und anderen Inhalten wird das Onload-Ereignis später ausgelöst. Obwohl das Onload-Ereignis auch in der Seitenentwicklung verwendet wird, werden in der jQuery Mobile-Entwicklung hauptsächlich drei Initialisierungsereignisse verwendet: mobileinit, ready () und pageinit.
Das Obige ist der Inhalt des HTML5 Mobile Development Road (50)-jquerymobile-Seiteninitialisierungsprozesses. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (49) – HTML5-Entwicklungsartefakt HBuilderNächster Artikel：Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (49) – HTML5-Entwicklungsartefakt HBuilder

In Verbindung stehende Artikel

Mehr sehen