<%@ 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" target="_blank" rel="external nofollow" />
<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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" data-transition="slide">點我跳轉到頁面二</a>
<br/>
<br/>
<br/>
<a href="#page3" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" data-transition="slidedown">跳轉到首頁</a>
<br>
<br>
<br>
<a href="#page3" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" data-transition="fade">進入頁面2</a>
<br>
<br>
<br>
<a href="#index" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 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>
![C#學習筆記：使用事件[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)