为了方便说明和更加直观的展示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. Google 搜索的基本语法

    ★搜索引擎的选择 先简单说一下"搜索引擎的选择". 在咱们天朝,Google 屡屡被 GFW 骚扰,导致百度占了便宜,成为份额最高的搜索引擎.不过今天这篇教程,俺还是继续拿 Goo ...

  2. [Android阅读代码]android-async-http源码学习一

    android-async-http 下载地址 一个比较常用的Http请求库,基于org.apache.http对http操作进行封装. 特点: 1.每一个HTTP请求发生在UI线程之外,Client ...

  3. 数据结构《17》---- 自己主动补齐之《二》----Ternary Search Tree

    一. 序言 上一篇文章中,给出了 trie 树的一个实现. 能够看到,trie 树有一个巨大的弊病,内存占用过大. 本文给出还有一种数据结构来解决上述问题---- Ternary Search Tre ...

  4. poj3621 Sightseeing Cows --- 01分数规划

    典型的求最优比例环问题 參考资料: http://blog.csdn.net/hhaile/article/details/8883652 此题中,给出每一个点和每条边的权值,求一个环使 ans=∑点 ...

  5. [置顶] C++为什么是C++而不是++C

    来自<C++ primer> 问:C++为什么是C++而不是++C 答 :C++之名是Rick Mascitti在1983年夏天定名,c说明它的本质实在C语言演化而来的,”++“是C语言的 ...

  6. win7下硬盘安装win7+CentOS双系统方法

    原文:win7下硬盘安装win7+CentOS双系统方法 LinuxCentOS安装大致介绍: win7下硬盘安装win7+CentOS双系统方法 原则: 所有的看完在装,请仔细看 一 条件: 1. ...

  7. poj3259（spfa判负环）

    题目连接:http://poj.org/problem?id=3259 题意:John的农场里N块地,M条路连接两块地,W个虫洞,虫洞是一条单向路,会在你离开之前把你传送到目的地,就是当你过去的时候时 ...

  8. 依据二度人脉推荐好友sql

    friend表结构 DROP TABLE IF EXISTS FRIEND; create table friend(     uid        bigint not null comment ' ...

  9. PPP协议总结

    PPP协议总结 PPP协议是一种在点到点链路上传输.封装网络数据包的数据链路层协议,PPP支持同步/异步方式的链路上. 一. PPP支持的链路类型 1. 同步和异步专线 2. 同步拨号链路. 3. 异 ...

  10. Django写的投票系统1（转）

    当然主要是从django的帮助文档里面来的,权当是翻译吧 这个投票系统的主要功能有 1.一个前台页面,可以让用户来投票 2.一个管理员页面,可以用来添加.修改.删除投票 首页第一步要确定你已经安装了D ...