小强的HTML5移动开发之路（50）——jquerymobile页面初始化过程

为了方便说明和更加直观的展示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="#" οnclick="$(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页面初始化过程相关推荐

小强的HTML5移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
小强的HTML5移动开发之路（14）——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
h5builder php,小强的HTML5移动开发之路（49）——HTML5开发神器HBuilder
今天给大家介绍一款开发HTML5的神器--HBuilder. 下载地址:http://www.php.cn/ 一.新建文件可以看到支持web app开发和普通网站前端开发,我们首先建立一个移动App ...
小强的HTML5移动开发之路（6）——Canvas图形绘制基础
在前面提到Canvas是HTML5中一个重要特点,canvas功能非常强大,用photoshop可以实现的效果canvas也同样可以实现,下面我们用canvas实现基本图形的绘制. 一.Canvas标 ...
小强的HTML5移动开发之路（51）——jquerymobile中改善页面访问速度
在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿.使用多页模版,可以改善页面跳转之间的 ...
小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器
在前面几篇文章中介绍了HTML5的特点和需要掌握的基础知识,下面我们开始真正的体验一下HTML5的优势,我们开始制作一个漂亮的视频播放器吧先别急,在开始制作之前先了解一下视频文件的基本知识. 一.视频 ...
小强的HTML5移动开发之路（10）——在线画板
在这一篇文章中我们用html5来实现一个在线的画板,玩过你画我猜的朋友今天也可以做一个简单的你画我猜小游戏啦,效果如下图所示: 过程很简单直接上代码了: <!DOCTYPE html PUBLI ...
小强的HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航
一.页眉 1.添加页眉和页脚 <div data-role="header"><h1>第 1 页</h1></div> <di ...
小强的HTML5移动开发之路（27）—— JavaScript回顾2
Javascript面向对象基础知识 1.如何定义一个类,使用如下语法来创建一个类 function Person(name, age){ //习惯上第一个字母大写//this修饰的变量称为属性thi ...

小强的HTML5移动开发之路（50）——jquerymobile页面初始化过程

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

最新文章

热门文章