2011년 8월 10일 수요일

jQuery Mobile - Page Hide and Show Events


Page Hide and Show Events
  • 대상 Page: page1
  • Event 종류: page가 화면에서 사라질 때
  • 행동: 발생한 이벤트 모두 출력


<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Mobile test page</title>
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css"
rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script>
$(document).ready(function() {
$("#page1").bind("pagehide", function(event, ui) {
var strAlert = "";
for ( var thing in event) {
strAlert += thing + " : " + event[thing] + "\n";
}
alert(strAlert);
});
});
</script>
</head>

<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>My Site</h1>
</div>
<div data-role="content">
<p>First page!</p>
<p>
<a href="#page2">Go to the second page!</a>
</p>
</div>
<div data-role="footer">
<h1>&copy; Copyright Info or Site URL</h1>
</div>
</div>

<div data-role="page" id="page2">
<div data-role="header">
<h1>My Site</h1>
</div>
<div data-role="content">
<p>Second page!</p>
<p>
<a href="#page3">Go to the Third page!</a>
</p>
</div>
<div data-role="footer">
<h1>&copy; Copyright Info or Site URL</h1>
</div>
</div>

<div data-role="page" id="page3">
<div data-role="header">
<h1>My Site</h1>
</div>
<div data-role="content">
<p>Third page!</p>
<p>
<a href="#page1">Go to the First page!</a>
</p>
</div>
<div data-role="footer">
<h1>&copy; Copyright Info or Site URL</h1>
</div>
</div>
</body>
</html>

Page Event의 종류는 4가지가 있다.
  • pagebeforehide: 현재 화면이 사라지기 전
  • pagebeforeshow: 새로운 화면이 출력되기 전
  • pagehide: 현재 화면이 사라진 직후
  • pageshow: 새로운 화면이 출력된 바로 직후

댓글 없음:

댓글 쓰기

블록체인 개요 및 오픈소스 동향

블록체인(block chain) 블록체인은 공공 거래장부이며 가상 화폐로 거래할때 발생할때 발생할 수 있는 해킹을 막는 기술. 분산 데이터베이스의 한 형태로, 지속적으로 성장하는 데이터 기록 리스트로서 분산 노드의 운영자에 의한 임의 조작이 불가...