jQuery mobile 学习02 页面事件
浏览数：34 /
时间：2015年06月09日
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jqm/jquery.mobile-1.4.5.css" />
<script src="jqm/jquery-1.11.2.js"></script>
<script src="jqm/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" id="index" data-transition="slide">
<div data-role="header">
<h1>第一个页面</h1>
</div>
<div data-role="main" class="ui-content">
<p>我是第一个页面的内容</p>
<br/>
<br/>
<br/>
<a href="#page2" data-transition="slide">点我跳转到页面二</a>
<br/>
<br/>
<br/>
<a href="#page3" data-transition="slideup">点我跳转到页面三</a>
<br/>
<br/>
<br/>
<br/>
</div>
<div data-role="footer" data->
<h2>首页的底部菜单</h2>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>第二个页面显示了</h1>
</div>
<div data-role="main" class="ui-content">
<p>我是第二个页面的内容部分哦</p>
<br>
<br>
<br>
<a href="#index" data-transition="slidedown">跳转到首页</a>
<br>
<br>
<br>
<a href="#page3" data-transition="pop">跳转到第三个页面</a>
<br>
<br>
<br>
<br>
<br>
</div>
<div data-role="footer">
<h2>第二个页面的底部菜单栏</h2>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<h1>页面三</h1>
</div>
<div data-role="main" class="ui-content">
<p>页面三的内容</p>
<br>
<br>
<a href="#page2" data-transition="fade">进入页面2</a>
<br>
<br>
<br>
<a href="#index" data-transition="flip">进入首页</a>
<br>
<br>
</div>
<div data-role="footer">
<h3>页面三的底部</h3>
</div>
</div>
<!--
页面事件 被分为四类：
$(document).on(param1,param2,function(){})：绑定指定的事件，请注意和jQuery的ready方法区别
参数1：绑定事件的名称
参数2：可选参数，指定哪个页面，注意#号，不指定该参数，就会在每个页面上触发该事件
参数3：是一个回调函数
第一类：页面初始化事件 (不会重复触发)
Page Initialization：页面创建时，以及页面初始化之后
页面创建前 pagebeforecreate 当页面即将初始化，并且在jQuery mobile已经开始增强页面之前，触发该事件
$(document).on("pagebeforecreate","#index",function(){
alert("事件被触发！");
});
页面创建 pagecreate 当页面已创建，但增强完成之前，触发该事件
$(document).on("pagecreate","#index",function(){
alert("事件被触发！");
});
页面初始化 pageinit 当页面已初始化，并已完成增强之后，触发该事件
$(document).on("pageint","#index",function(){
alert("事件被触发！");
});
-->
<script type="text/javascript">
/*
$(document).on("pagebeforecreate",function(){
alert("触发 pagebeforecreate 事件！\nURL: ");
});
$(document).on("pagecreate",function(){
alert("触发 pagecreate 事件！\nURL: ");
});
$(document).on("pageinit",function(){
alert("触发 pageinit 事件！\nURL: ");
});
*/
</script>
<!--
第二类：页面加载事件(***待研究***)
Page Load/Unload：当外部页面加载时、卸载时或遭遇失败时
页面加载事件属于外部页面，无论外部页面何时载入DOM，将触发两个事件，第一个是pagebeforeload，第二个是pageload（成功）或pageloadfailed（失败）
pagebeforeload：在任何页面做出加载请求之前触发
pageload：在页面已成功加载并插入DOM后触发
$(document).on("pageload","#index",function(){
alert("加载页面成功！");
});
pageloadfailed：如果页面加载请求失败，触发，默认的将显示Error Loading Page的消息
-->
<!--
第三类：过渡事件
Page Transition：在页面过去之前和之后
一个页面过度到下一个页面时使用事件，页面过渡设计两个页面：一张come页面和一张go页面，这些过渡使页面切换更加动感
pagebeforeshow：在指定页面显示之前触发
pageshow：在指定页面显示完成之后触发
pagebeforehide：在指定页面隐藏之前触发
pagehide：在指定页面隐藏之前触发
-->
<script type="text/javascript">
/*
$(document).on("pagebeforeshow","#index",function(){ //第二个参数 如果不指定具体页面就默认为所有页面添加该事件
alert("pagebeforeshow 触发");
});
$(document).on("pageshow","#page2",function(){
alert("pageshow触发");
});
$(document).on("pagebeforehide","#index",function(){
alert("pagebeforehide触发");
});
$(document).on("pagehide","#index",function(){
alert("pagehide触发");
});
*/
</script>
<!--
第四类：
Page Change：当页面被更改，或遭遇失败时
-->
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
