Hi Hi

'jquery mobile'에 해당되는 글 3건

  1. jQuery Mobile - moblieinit 이벤트

jQuery Mobile - moblieinit 이벤트

 

Query Mobile 은 웹앱의 각종 상황에 반응할 수 있게 유용한 이벤트를 제공한다. 모바일 웹앱 프레임워크답게 다양한 터치 이벤트를 제공하며 페이지 로딩과 생성, 이동에서 발생할 수 있는 다양한 페이지 이벤트를 지원한다.

mobileinit 이벤트는 웹앱이 시작되자마자 발생하는 이벤트로 jQuery Mobile 라이브러리가 로딩되자마자 방생한다. 그렇기 때문에 이벤트 핸들러는 jQuery Mobile 라이브러리가 로딩되기 전에 바인딩 되어야 한다. mobileinit 핸들러의 위치는 jQuery 라이브러리와 jQuery Mobile 라이브러리 사이에 위치해야한다.

mobileinit 이벤트 핸들러에서는 주로 jQuery Mobile의 기본 성정 값을 변경하는 코드를 작성한다. jQuery Mobile 의 주요 기본 성정 내용은 다음과 같다.

기본 설정 내용 

설명 

값 

 defaultPageTransition

  페이지 트랜지션 기본값 

 slide(기본) | slide | slidedown| pop| fade| flip

 loadingMessage   페이지 로딩 메시지

 loading(기본)

 pageLoadErrorMessage

  페이지 로딩 실패 메시지

  Error Loading Page(기본)

 

<!DOCTYPE html>
<html>
<head>
 <meta charset="euc-kr" />
 <mata name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
 <title> jQuery Mobile</title>
 
 <link rel="shortcut icon" href="./image/icon.png">
 <link rel="apple-touch-icon" href="./image/icon.png">
 
 <link href="./framework/jquery.mobile-1.0.css" rel="stylesheet" type="text/css" />
 <script src="./framework/jquery-1.6.4.js"></script>
 
 <script type="text/javascript">
  $(document).bind("mobileinit", function(){
   $.mobile.defaultPageTransition = "flip";
   $.mobile.loadingMessage = "로딩중...";
  
  });
 </script>
 

 <script src="./framework/jquery.mobile-1.0.js"></script>
</head>
<body>
 <div data-role="page">
  <div data-role="header">
   <h1>홈 페이지</h1>
  </div>
  <div data-role="content">
   <a href="mobileinit_second.jsp" data-role="button">Second Page</a>
  </div>
 </div>
</body>
</html>

 

mobileinit_second.jsp

<%@ page contentType="text/html;charset=euc-kr"%>

<%Thread.sleep(3000);%>

<div data-role="page">
 <div data-role="header">
  <h1>두번째 페이지</h1>
 </div>
 
 <div data-role="content">
  <h3>This is Second Page</h3> 
 </div>
</div>