<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>제이쿼리 모바일 연습</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).on("mobileinit", function(){
$.extend($.mobile, {
allowCrossDomainPages: true,
defaultPageTransition: "slide",
defaultDialogTranstion: "pop",
loadingMessage: "페이지 로딩 중입니다...",
loadingMessageTextVisible: true,
loadingMessageTheme : "a",
pageLoadErrorMessage: "페이지를 불러올 수 없습니다..",
pageLoadErrorMessageTheme: "b"
});
$(document).on("pagebeforecreate","#main", function(event){
$("#main button:eq(0)").bind("tap", function(event){
$.mobile.changePage("#secondPg");
});
$("#main button:eq(1)").bind("tap", function(event){
$.mobile.changePage("#secondPg", {transition:"slideup"});
});
$("#main button:eq(2)").bind("tap", function(event){
$.mobile.changePage("#secondPg", {reverse:true});
});
$("#main button:eq(3)").bind("tap", function(event){
$.mobile.changePage("#secondPg", {changeHash:false});
});
$("#main button:eq(4)").bind("tap", function(event){
$.mobile.changePage("external.jsp", {data : "name=김말똥&gender=남"});
});
$("#main button:eq(5)").bind("tap", function(event){
$.mobile.changePage("external.jsp", {data : "name=김말똥&gender=남", type: "post"});
});
$("#main button:eq(6)").bind("tap", function(event){
$.mobile.changePage("#secondPg", {dataUrl : "name=김말똥&gender=남"});
});
$("#main button:eq(7)").bind("tap", function(event){
$.mobile.changePage("external2.jsp", {reloadPage :true});
});
$("#main button:eq(8)").bind("tap", function(event){
$.mobile.changePage("external2.jsp", {showLoadMsg :true});
});
});
});
</script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- jQuery Mobile API
changePage()는 $.mobile 객체 하위의 메소드이다.
: 이동할 페이지의 주소와 그 이외의 기타 옵션들을 담은 JSON 형식으로 담아 파라미터를 전달한다.
예> $.mobile.changePage("이동할 페이지");
$.mobile.changePage("이동할 페이지", {옵션들....});
[옵션]
transition : 페이지전환시 적용할 애니메이션을 지정(string형식으로 지정)
reverse : 애니메이션의 역재생 여부를 지정(boolean)
changeHash : 이동할 페이지를 history에 담지 않는다. (boolean)
data : 페이지 이동 URL에 포함시킬 파라미터를 지정한다. 외부페이지에 대해서만 동작한다. (string 또는 json)
type : GET / POST 를 지정한다. 외부페이지에 대해서만 동작한다. (string)
dataUrl : 동일 파일내에 다른페이지로 이동시에 전달할 파라미터를 지정한다.(string 또는 json)
reloadPage : 외부파일의 DOM을 새로 읽어 들일때 사용한다. (boolean)
showLoadMsg : 페이지 이동시 로딩 메시지를 표시하고자 할때 사용한다.(boolean)
-->
</head>
<body>
<div data-role="page" id="main">
<div data-role="header" data-position="fixed" id="header">
<h3>changePage</h3>
</div><!-- header -->
<div role="main" class="ui-content">
<div data-role = "controlgroup">
<button>basic</button>
<button>transition</button>
<button>reverse</button>
<button>changeHash</button>
<button>data</button>
<button>type</button>
<button>dataUrl</button>
<button>reloadPage</button>
<button>showLoadMsg</button>
</div>
</div><!-- main -->
<div data-role="footer" data-position="fixed">
<h3>footer</h3>
</div><!-- footer -->
</div><!-- page1 -->
<div data-role="page" id="secondPg">
<div data-role="header" data-position="fixed">
<h3>Second Page</h3>
</div>
<div role="main" class="ui-content">
<a data-rel="back" data-theme="b" data-role="button">뒤로...</a>
<a href="#thirdPg" data-role="button">페이지 이동</a>
</div>
</div>
<div data-role="page" id="thirdPg">
<div data-role="header" data-position="fixed">
<h3>Third Page</h3>
</div>
<div role="main" class="ui-content">
<p>Third 페이지 입니다....</p>
<a data-rel="back" data-role="button" data-theme="b">뒤로</a>
</div>
</div>
</body>
</html>
'기존카테고리 > 하이브리드앱' 카테고리의 다른 글
| 디바이스 정보 얻기 (0) | 2017.11.06 |
|---|---|
| mobile API - parseUrl (0) | 2017.11.05 |
| 디바이스 방향계 (0) | 2017.11.04 |
| applicaton cache (0) | 2017.11.04 |
| [jQuery Mobile] 미디어 플레이어 조작 (0) | 2017.11.04 |