This paper is the official HTML5 training course for Brother Lian it education organization, mainly introduces: HTML5 Mobile Development Road (--JQUERYMOBILE) page initialization process
A convenient description and more intuitive display of the Jquerymobile page initialization process and the triggering process for each event, I have drawn a flowchart:
650) this.width=650; "Src=" http://img.blog.csdn.net/20140505140123781?watermark/2/text/ ahr0cdovl2jsb2cuy3nkbi5uzxqvzgf3yw5nyw5iyw4=/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/ Southeast "style=" border:0px; "/>
The image is circled in red with the event in the interface, and the test code is as follows:
[HTML] view plain copy
Print? 650) this.width=650; "src=" Https://code.csdn.net/assets/CODE_ico.png "alt=" on Code View "Width=" "height=" 12 " Style= "border:0px;"/>650) this.width=650; "src=" Https://code.csdn.net/assets/ico_fork.svg "alt=" Derivation to My Code slice " Width= "height=" style= "border:0px;"/>
<! DOCTYPE HTML>
<html>
<head>
<title> Practice </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 is triggered");
});
$ (document). Live ("Mobileinit", function () {
Alert ("Mobileinit event Trigger");
});
$ (document). Delegate ("#page_MobileInit0", "Pageinit", function () {
Alert ("The Pageinit event of the Page_mobileinit0 page is triggered");
});
$ (document). Delegate ("#page_MobileInit0", "Pageshow", function () {
Alert ("The Pageshow event of the Page_mobileinit0 page is triggered");
});
$ (document). Delegate ("#page_MobileInit1", "Pageinit", function () {
Alert ("The Pageinit event of the Page_mobileinit1 page is triggered");
});
$ (document). Delegate ("#page_MobileInit1", "Pageshow", function () {
Alert ("The Pageshow event of the Page_mobileinit1 page is triggered");
});
</Script>
</head>
<body>
<section id="page_mobileinit0" data-role="page">
<header data-role="header">
<H1> page Events </H1>
</Header>
<div class="content" data-role="Content">
<P>jquery mobile page initialization is via Mobileinit, $ (document). Ready () and Pageinit implementation </P>
<a href="#" onclick="$ (document). Trigger (' Mobileinit ')"> Manual Trigger Mobileinit Event </a>
<a href="#page_MobileInit1"> Next </a><br/> </P>
</div>
</Section>
<section id="page_mobileinit1" data-role="page">
<header data-role="header">
<H1> page Events </H1>
</Header>
<div class="content" data-role="Content">
<P>jquery Mobile page initialization is implemented through Pageinit <br/>
<a href="#page_MobileInit0"> Return </a></P>
</div>
</Section>
</Body>
</html>
In addition to the events described above, there are 3 types of initialization events, such as Mobileinit, Ready (), and Pageinit, which are mainly used in mobile development.
HTML5 Mobile Development Road (--JQUERYMOBILE) page initialization process