为了方便说明和更加直观的展示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. 推荐一个IT人必备的东西【用过的都懂，让我们的环境越来越好吧】

    有个东西叫IT人手册,不知道各位有用过吗?不过很可惜以前那个关掉了,那个网站说出了我们IT人太多的新声以及一些黑心公司,不过被迫压力下关闭了 我不是托,我只是分享 我觉得这种东西应该存在下去~!!!至 ...

  2. ACM-计算几何之Quoit Design——hdu1007 zoj2107

    Quoit Design Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  3. How to convert `ctime` to `datetime` in Python? - Stack Overflow

    How to convert `ctime` to `datetime` in Python? - Stack Overflow How to convert `ctime` to `datetime ...

  4. Android实战简易教程-第九枪（BitmapFactory.Options对资源图片进行缩放）

    我们知道,我们编写的应用程序都是有一定内存限制的.程序占用了过高的内存就easy出现OOM(OutOfMemory)异常.因此在展示高分辨率图片的时候,最好先将图片进行压缩,压缩后的图片大小应该和用来 ...

  5. 更改Oracle实例的字符集

    (1).数据库服务器字符集select * from nls_database_parameters 来源于props$,是表示数据库的字符集. (2).服务端字符集环境select * from n ...

  6. 什么是gulp？

    gulp初涉 1.什么是gulp? gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器:它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用 ...

  7. 使用异步HTTP提升客户端性能(HttpAsyncClient)

    使用异步HTTP提升客户端性能(HttpAsyncClient) 大家都知道,应用层的网络模型有同步.异步之分. 同步,意为着线程阻塞,只有等本次请求全部都完成了,才能进行下一次请求. 异步,好处是不 ...

  8. Java并发编程（您不知道的线程池操作）

    Java并发编程(您不知道的线程池操作) 这几篇博客,一直在谈线程,设想一下这个场景,如果并发的线程很多,然而每个线程如果执行的时间很多的话,这样的话,就会大量的降低系统的效率.这时候就可以采用线程池 ...

  9. 聊聊高并发（二十九）解析java.util.concurrent各个组件（十一） 再看看ReentrantReadWriteLock可重入读-写锁

    上一篇聊聊高并发(二十八)解析java.util.concurrent各个组件(十) 理解ReentrantReadWriteLock可重入读-写锁 讲了可重入读写锁的基本情况和基本的方法,显示了怎样 ...

  10. 强大的PropertyGrid

    PropertyGrid, 做工具一定要用这东西..... 把要编辑的对象看成类的话, 全部要编辑的属性就是成员 嗯嗯, 近期看了几眼Ogitor, 它对于PropertyGrid的使用就非常不错 全 ...