为了方便说明和更加直观的展示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. 不显示系统错误对话框SetErrorMode（要学会搜索）

    关闭程序时报dde server window错误有人碰到过吗,用的别人的一个OCX控件,把这个控件去掉就不会报这个错误 //不显示系统错误对话框 SetErrorMode(SEM_NOGPFAULT ...

  2. [Xcode]some little skill

    Date:2014-1-2 Summary: 自己在使用Xcode的一些小习惯,记录下来,我是这么用的,你呢? Contents:1.使用#warning 在工作中,难免需要做一些test,但是又怕忘 ...

  3. 三框架：使用数据源dbcp注意

    使用spring整合hibernate时间,需要使用该数据源,数据源使用apache的dbcp,使用dbcp当需要依靠pool的jar包.选择dbcp和pool当你需要注意. DBCP 2 compi ...

  4. Linux 挂载NTFS文件系统

    步骤如下: 1.安装ntfs-3g包 [root@CS-1 pub]# yum install ntfs-3g 2.创建挂载目录 [root@CS-1 pub]# mkdir /data 3.挂载NT ...

  5. VSTO学习笔记（一）VSTO概述

    原文:VSTO学习笔记(一)VSTO概述 接触VSTO纯属偶然,前段时间因为忙于一个项目,在客户端Excel中制作一个插件,从远程服务器端(SharePoint Excel Services)上下载E ...

  6. 【Swift】—— 中国课程

    Apple宣布更换oc武器语言 Swift ,在牛叉的中国开发者社区9几天之内,以完成.这是福音许多中国的开发商啊,兴奋的发现之后,写存储在日志,马上防止忘记: GitHub开源项目:<The ...

  7. swift 简单语句 控制流语句

    在 Swift 中.有两种类型的语句:简单语句和控制流语句.简单语句是最常见的.用于构造表达式和声明.控制流语句则用于控制程序运行的流程,Swift 中有三种类型的控制流语句:循环语句.分支语句和控制 ...

  8. hdu2222Keywords Search (特里)

    Problem Description In the modern time, Search engine came into the life of everybody like Google, B ...

  9. Android_模拟时钟内时针、分针触摸转动

    最近实现了android里的一个机能,在activity里面画了一个模拟的时针,然后触摸上面的时针跟分针可以实现调时间的功能. 其实,说起原来来还是挺简单的,但是我花了将近一周的时间才全部实现,有点惭 ...

  10. U11认识与学习bash

    1.使用命令clear来清除界面． 2.命令别名设置alias和unalias: 例如: alias lm='ls -l | more' 查看当前的别名设置有哪些: alias unalias lm ...