jQuery 모바일 페이지 이벤트
jQuery Mobile 페이지 이벤트
jQuery Mobile에서 페이지를 처리하는 이벤트는 4가지 범주로 구분됩니다.
페이지 초기화 - 페이지 생성 전, 페이지 생성 시, 페이지 초기화 후
페이지 로드/언로드 - 외부 페이지가 로드, 언로드 또는 실패할 때
페이지 전환 - 페이지 전환 전 및 후
페이지 변경 - 페이지가 변경되거나 실패할 때
모든 jQuery Mobile 이벤트에 대한 자세한 내용을 보려면 jQuery Mobile 이벤트 참조를 방문하세요.
jQuery Mobile 초기화 이벤트
jQuery Mobile의 일반적인 페이지가 초기화되면 3단계를 거치게 됩니다.
페이지 생성 전
페이지 생성
페이지 초기화
이벤트 각 단계에서 실행되는 코드는 코드를 삽입하거나 조작하는 데 사용될 수 있습니다.
| Event | Description |
|---|---|
| pagebeforecreate | 이 이벤트는 페이지가 초기화되려고 할 때와 jQuery Mobile이 페이지 개선을 시작하기 전에 시작됩니다. |
| pagecreate | 이 이벤트는 페이지가 생성되었지만 개선이 완료되기 전에 트리거됩니다. |
| pageinit | 이 이벤트는 페이지가 초기화되고 jQuery Mobile이 페이지 개선을 완료한 후에 시작됩니다. |
다음 예는 jQuery Mobile에서 페이지를 생성할 때 각 이벤트가 트리거되는 시기를 보여줍니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagebeforecreate",function(){
alert("pagebeforecreate 事件触发 - 页面即将初始化。jQuery Mobile 还未增强页面");
});
$(document).on("pagecreate",function(){
alert("pagecreate 事件触发 - 页面已经创建，但还未增强完成");
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>头部文本</h1>
</div>
<div data-role="main" class="ui-content">
<p>页面已创建，并增强完成。</p>
</div>
<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
</body>
</html>Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
jQuery 모바일 로드 이벤트
페이지 로드 이벤트는 외부 페이지에 속합니다.
외부 페이지가 DOM을 로드할 때마다 두 가지 이벤트가 트리거됩니다. 첫 번째는 페이지 전로드이고, 두 번째는 페이지 로드(성공) 또는 페이지 로드 실패(실패)입니다.
이러한 이벤트는 아래 표에 설명되어 있습니다.
| Event | Description |
|---|---|
| pagebeforeload | 페이지 로드 요청이 이루어지기 전에 실행됩니다. |
| pageload | 페이지가 성공적으로 로드되어 DOM에 삽입된 후에 실행됩니다. |
| pageloadfailed | 이 이벤트는 페이지 로드 요청이 실패하면 트리거됩니다. 기본적으로 "페이지 로딩 오류" 메시지가 표시됩니다. |
다음은 pageload 및 pagloadfailed 이벤트가 작동하는 방식을 보여줍니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecontainerload",function(event,data){
alert("pagecontainerload 事件触发!\nURL: " + data.url);
});
$(document).on("pagecontainerloadfailed",function(event,data){
alert("抱歉，被请求页面不存在。");
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>页眉文本</h1>
</div>
<div data-role="main" class="ui-content">
<a href="externalpage.html">外部页面</a>
<br><br>
<a href="externalnotexist.html">外部页面不存在</a>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
jQuery 모바일 전환 이벤트
We 한 페이지가 다음 페이지로 전환될 때 이벤트 사용에서 볼 수도 있습니다.
페이지 전환에는 "이전" 페이지와 "이전" 페이지라는 두 페이지가 포함됩니다. 이러한 전환은 현재 활성 페이지("다가오는" 페이지)를 새 페이지("이전" 페이지)로 변경합니다. 더욱 동적으로 변합니다.
| Event | Description |
|---|---|
| pagebeforeshow | 은 전환 애니메이션이 시작되기 전, |
| pagebeforehide | 이 "다가오는" 페이지에서 실행됩니다. |
| pagehide | 는 전환 애니메이션이 완료된 후 "다가오는" 페이지에서 실행됩니다. |
| Instances |
인스턴스 실행»
