为了方便说明和更加直观的展示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. 鸟哥之安裝 CentOS7.x

    http://linux.vbird.org/linux_basic/0157installcentos7.php since 2002/01/01 新手建議 開始閱讀之前 網站導覽 Linux 基礎 ...

  2. 16位图像Alpha混合的实现（用汇编写的，比MMX还要快）

    Alpha 混合的算法很简单,基于下面的公式就可以实现: D := A * (S - D) / 255 + D D 是目标图像的像素, S 是源图像的像素 A 是 Alpha 值, 0 为全透明, 2 ...

  3. [SVN]两个分支合并

    Date:2014-1-1 Summary: 记录一下自己使用SVN时候的操作步骤,先吃鱼,再学钓鱼 Contents: 环境:从同事的branch迁出一份代码,作为自己的分支进行开发,同时同事也在自 ...

  4. Java线程面试题 Top 50(转)

    不管你是新程序员还是老手,你一定在面试中遇到过有关线程的问题.Java语言一个重要的特点就是内置了对并发的支持,让Java大受企业和程序员的欢迎.大多数待遇丰厚的Java开发职位都要求开发者精通多线程 ...

  5. lightoj 1297（三分）

    传送门:Largest Box 题意:长度为L宽度为W的纸四个角去掉x*x的正方形,然后形成一个长方体,问能组成长方体的最大体积为多少. 分析:三分x求最值. #include <cstdio& ...

  6. 算法起步之Dijkstra算法

    原文:算法起步之Dijkstra算法 友情提示:转载请注明出处[作者 idlear    博客:http://blog.csdn.net/idlear/article/details/19687579 ...

  7. 2013 吉林通化邀请赛 D-City 离线型的并查集

    题意:给定n个点和m条边,问你拆掉前i条边后,整个图的连同城市的数量. i从1到m. 思路:计算连通的城市,很容易想到并查集,但是题目里是拆边,所以我们可以反向去做. 存下拆边的信息,从后往前建边. ...

  8. Cocos3d初探

    预计要相当长的一段时间内研究游戏引擎,在这里做一下过程中的备忘. 上一周项目须要,研究了一下cocos2d-x,本周接着来做cocos3d-x的代码研究 首先是搭建cocos3d-x的开发环境: 依据 ...

  9. iOS App 性能优化总结

    今天简单总结一些clientapp 优化的方案和方向. 我相信开发一个app大部分团队都能够完毕,可是性能久不一样啦,和我们都写一个冒泡算法一样,我相信每一个人写的冒泡算法都不一样,这些区别就带来了性 ...

  10. hdu1160（最长上升子序列）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1160 题意:给定一些小猫的属性:体重和速度.然后求某些猫顺序的排列,使得体重上升,速度下降,这样的排列 ...