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

本文为兄弟连IT教育机构官方 HTML5培训教程，主要介绍：HTML5移动开发之路（50）——jquerymobile页面初始化过程

了方便说明和更加直观的展示jquerymobile的页面初始化过程以及各个事件的触发过程，我绘制了一幅流程图：

图中用红色框圈起来的是界面中的事件，测试代码如下：

[html] view plain copy

print?

<!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>

除了上面介绍的事件外，还有 Mobile开发中，主要使用的是mobileinit、ready()和pageinit这3种初始化事件。

时间： 2024-12-14 19:13:51

HTML5移动开发之路（50）——jquerymobile页面初始化过程的相关文章

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

为了方便说明和更加直观的展示jquerymobile的页面初始化过程以及各个事件的触发过程,我绘制了一幅流程图: 图中用红色框圈起来的是界面中的事件,测试代码如下: <!DOCTYPE html> <html> <head> <title>练习</title> <meta charset="utf-8"> <meta name="viewport" content="width=

小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递

在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并传入下一个页面,然后在下一个页面中进行GET内容解析. 2.通过HTML5的Web Storage进行参数传递. 3.建立当前页面变量,在前一个页面将所需传递的参数内容赋值到变量中,在后一个页面从变量中将参数取出来.(程序灵活性较弱) 一.以GET方式实现页面间参数传递 <!DOCTYPE html

HTML5移动开发之路（53）——jQueryMobile页面间参数传递

本文为兄弟连IT教育机构官方 HTML5培训教程,主要介绍:HTML5移动开发之路(53)--jQueryMobile页面间参数传递在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并传入下一个页面,然后在下一个页面中进行GET内容解析. 2.通过HTML5的Web Storage进行参数传递. 3.建立当前页面变量,在前一个页面将所需传递的

HTML5移动开发之路（51）——jquerymobile中改善页面访问速度

本文为兄弟连IT教育机构官方 HTML5培训教程,主要介绍:HTML5移动开发之路(51)--jquerymobile中改善页面访问速度在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿.使用多页模版,可以改善页面跳转之间的流畅性,但是多个页面要一次性下载,所以下载时间变长,用户体验也会受到影响. 在基于预取技术的开发中,当第一个页面的DOM对象加载完成后,jQuery Mob

小强的HTML5移动开发之路（51）——jquerymobile中改善页面访问速度

在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿.使用多页模版,可以改善页面跳转之间的流畅性,但是多个页面要一次性下载,所以下载时间变长,用户体验也会受到影响. 在基于预取技术的开发中,当第一个页面的DOM对象加载完成后,jQuery Mobile会对标记data-prefetch的链接地址进行预取操作.预取的详细过程如下: 注意:使用预取功能时,不建议给所有链接都添加data-pr

HTML5移动开发之路（52）——jquerymobile中的触控交互

本文为兄弟连IT教育机构官方 HTML5培训教程,主要介绍:HTML5移动开发之路(52)--jquerymobile中的触控交互当使用移动设备进行触控操作时,最常用的就是轻击.按住屏幕或者手势操作,jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为. 一.轻击与按住直接上代码(一切皆在代码中,细细品吧!) [html] view plain copy print? <!DOCTYPE html> <html> <head> <t

HTML5移动开发之路（44）——JqueryMobile中的按钮

本文为兄弟连IT教育机构官方 HTML5培训教程,主要介绍:HTML5移动开发之路(44)--JqueryMobile中的按钮一.链接按钮 [html] view plain copy print? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Mobile Web 应用程序</title> <link href=

HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航

本文为兄弟连IT教育机构官方 HTML5培训教程,主要介绍:HTML5移动开发之路(43)--JqueryMobile页眉.工具栏和标签栏导航一.页眉 1.添加页眉和页脚 [html] view plain copy print? <div data-role="header"> <h1>第 1 页</h1> </div> [html] view plain copy print? <div data-role="

小强的HTML5移动开发之路（52）——jquerymobile中的触控交互

当使用移动设备进行触控操作时,最常用的就是轻击.按住屏幕或者手势操作,jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为. 一.轻击与按住直接上代码(一切皆在代码中,细细品吧!) <!DOCTYPE html> <html> <head> <title>练习</title> <meta charset="utf-8"> <meta name="viewport"