为了方便说明和更加直观的展示jquerymobile的页面初始化过程以及各个事件的触发过程，我绘制了一幅流程图：

图中用红色框圈起来的是界面中的事件，測试代码例如以下：

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

			<div class="content" data-role="content">

				<p>jQuery Mobile页面初始化是通过mobileinit、$(document).ready()以及pageinit实现的</p>

				<a href="#" onclick="$(document).trigger('mobileinit')">手动触发mobileinit事件</a>

				<a href="#page_MobileInit1">下一页</a><br/></p>

			</div>

		</section>

		<section id="page_MobileInit1" data-role="page">

			<header data-role="header">

				<h1>页面事件</h1>

			</header>

			<div class="content" data-role="content">

				<p>jQuery Mobile页面初始化是通过pageinit实现的<br/>

					<a href="#page_MobileInit0">返回</a></p>

			</div>

		</section>

	</body>

</html>

除了上面介绍的事件外，还有onload事件。当全部相关内容（包含图片）载入完毕后会触发onload事件。由于受到图片等内容的影响，onload事件的触发时间比較晚。尽管在页面开发中也会用到onload事件，可是在jQuery Mobile开发中，主要使用的是mobileinit、ready()和pageinit这3种初始化事件。

小强的HTML5移动开发之路（50）——jquerymobile页面初始化过程的更多相关文章

  1. 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

    一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...

  2. 小强的HTML5移动开发之路（18）——HTML5地理定位

    来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...

  3. 小强的HTML5移动开发之路（14）——Video标签详解

    来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...

  4. 小强的HTML5移动开发之路（13）——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  5. 小强的HTML5移动开发之路（11）——链接，图片，表格，框架

    来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...

  6. 小强的HTML5移动开发之路（37）——jqMobi快速入门

    在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...

  7. 小强的HTML5移动开发之路（48）——（小练习）新闻订阅系统【1】

    一.总体设计 二.数据库设计 --新闻类别表 create table news_cate( news_cateid int primary key auto_increment, news_icon ...

  8. 小强的HTML5移动开发之路（12）——从一个多媒体标签说起

    来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...

  9. 小强的HTML5移动开发之路（6）——Canvas图形绘制基础

    来自:http://blog.csdn.net/dawanganban/article/details/17686039 在前面提到Canvas是HTML5中一个重要特点,canvas功能非常强大,用 ...

随机推荐

  1. thinkPHP 输出及其模板调用（三）

    原文:thinkPHP 输出及其模板调用(三) ThinkPHP 的输出(重点) a.通过 echo 等PHP原生的输出方式在页面中输出 b.通过display方法输出(thinkphp\Home\L ...

  2. 【智能家居篇】wifi网络接入原理（上）——扫描Scanning

    转载请注明出处:http://blog.csdn.net/Righthek 谢谢! 对于低头党来说,在使用WIFI功能时,常常性的操作是打开手机上的WIFI设备,搜索到心目中的热点,输入passwor ...

  3. freemarker自己定义标签（二）

    freemarker自己定义标签 1.自己定义标签 通过自己定义标签,写一个反复指定字符串 2.实现源代码 <html> <head> <meta http-equiv= ...

  4. 方案猿身高project联赛，艺术家，相反，养殖场！-------三笔

    已经看到了程序猿在电影中都是非常厉害的人物,硬道理键盘噼里啪啦后,奇妙的事情会发生. 当我报了这个专业,開始认真的写程序,在这个领域学习的时候,却发现非常多干这一行 的都自称"码农" ...

  5. CF 519E（树上倍增求lca）

    传送门:A and B and Lecture Rooms 题意:给定一棵树,每次询问到达点u,v距离相等的点有多少个. 分析:按情况考虑: 1.abs(deep[u]-deep[v])%2==1时, ...

  6. POj 1879 Tempus et mobilius Time and motion (模拟+群)

    题目特别长,大意为球的传递. 三个轨道,一个库.各自是分钟单位的轨道.5min单位的轨道.一小时单位的轨道.还有就是n容量的库. 每过一分钟,一个小球从库里面出来,库符合先进先出,进入分钟轨道.假设分 ...

  7. 只能从脚本中调用在类定义上有[ScriptService]属性的Web服务问题的解决方案

    ajax调用webservice中的接口时, 会出现[只能从脚本中调用在类定义上有[ScriptService]属性的...]的异常. 这是因为, 在.net3.5中, 访问web服务, 要对web服 ...

  8. 阿里云免费试用之体验——阿里云serverECS试用心得

    自上次參加了阿里云的开发人员大会回来 心里就一直惦记着阿里云 由于曾经各种各样什么的server也用了不少 年前開始接触阿里云 一直没有给予很多其它的关注 參加了这次的开发人员大会后 就想更进一步的了 ...

  9. PHP上传文件超过了最大文件大小限制导致无法上传成功

    最近的研究<HeadFirst PHP & MySQL>第一本书5章"使用存储在文件中的数据",难道当一个文件上传应用程序,发生了错误.即,文件不能成功上传.这 ...

  10. JAVA Socket(多个客户同时连接，信息共享) client (java/ruby)

    第一步 充分理解Socket 1.什么是socket 所谓socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄.应用程序通常通过"套接字" ...