2016. 3. 11. 14:07ㆍlanguage/jquery mobile
jquery mobile은 페이지 url을 자동으로 관리합니다.
사용자가 링크 또는 버튼으로 페이지를 이동할때마다 jquery mobile은 location.hash 객체를 갱신하여 히스토리 해시에 이동 정보를 저장합니다.
대화상자 ( 다이얼로그 팝업, dialog ) 는 modal 이므로 히스토리 해시에 저장되지 않습니다.
페이지 사이를 정확하게 직접 이동하려면 changePage() 메소드를 사용하여야 합니다.
페이지를 이동하기 전에 어떤 처리를 해야한다거나 할 때 직접 호출하여 사용할 수 있습니다.
changePage() 메소드에 대한 상세한 정보는 아래 주소에 나와있습니다.
http://api.jquerymobile.com/jQuery.mobile.changePage/
사용 방법은 다음과 같습니다.
|
$.mobile.changePage( "이동할 url 또는 페이지 아이디 또는 파일 등", { 옵션 }); |
cs |
옵션에는 배열로 들어갑니다.
여러 옵션이 있지만 그 중에서 중요한 것 몇가지만 짚고 넘어갑니다.
changeHash : boolean 타입으로 히스토리 해시에 저장할지를 결정합니다. 기본값은 true 이고 false로 입력 시 뒤로가기 버튼이 동작하지 않습니다.
data : 전송 시 넘겨줄 데이터를 입력합니다 (Json)
reverse : boolean 타입으로 페이지를 표시할 때 어떤 방향으로 불러올지를 결정합니다.
type : 페이시 전송 타입을 설정합니다 post 또는 get
transition : 화면 전환 에니메이션을 설정합니다.
( fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none )
2개의 html 파일을 생성합니다.
005changePage.html
|
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery mobile</title>
<link rel="stylesheet" href="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css">
<script src="./jquery/jquery-1.11.0.js"></script>
<script src="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<script type="text/javascript">
$(function(){
$("#goChangPage2Btn").bind("click",function(){
alert("005changePage2.html 페이지로 이동합니다." );
$.mobile.changePage( "005changePage2.html", {transition: "flip", changeHash: false });
});
$("#backBtn").bind("click",function(){
$.mobile.changePage( "#page1", { transition: "flip", changeHash: false });
});
});
</script>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>1 page</p>
<p><a href="#page2" >go page2</a></p>
<p><button id="goChangPage2Btn">go 005changePage2.html</button></p>
</div>
<footer data-role="footer"><h1>cofs</h1></footer>
</section>
<section id="page2" data-role="page">
<header data-role="header" data-add-back-btn="true"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>2 page</p>
<p><button id="backBtn">뒤로가기</button></p>
</div>
<footer data-role="footer"><h1>cofs</h1></footer>
</section>
</body>
</html> |
cs |
005changePage2.html
|
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery mobile</title>
<link rel="stylesheet" href="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css">
<script src="./jquery/jquery-1.11.0.js"></script>
<script src="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<section id="page3" data-role="page">
<script type="text/javascript">
$(function(){
$("#backBtn1").on("click",function(){
$.mobile.changePage( "005changePage.html", { transition: "slideup", changeHash: false, reverse :false });
});
});
</script>
<header data-role="header" data-add-back-btn="true"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>3 page</p>
<p><a href="#page4" >go page4</a></p>
<p><button id="backBtn1">뒤로가기</button></p>
</div>
<footer data-role="footer"><h1>cofs</h1></footer>
</section>
<section id="page4" data-role="page">
<header data-role="header" data-add-back-btn="true"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>4 page</p>
</div>
<footer data-role="footer"><h1>cofs</h1></footer>
</section>
</body>
</html> |
cs |
2016.06.30 추가설명
005changePage2.html 에서 go page4 A태그는 작동하지 않는 것이 정상입니다.
jqm에서 페이지 이동은 page를 갈아끼우는 형식(?) 이라서 page4 아이디를 가진 페이지는 로드되지 않아서 이동이 불가능합니다 ^^
005changePage2.html 에서 Back 버튼이 작동하지 않는 것 또한 정상입니다.
Back 버튼은 005changePage.html 에서 005changePage2.html 로 이동할 때 옵션 중 changeHash 를 false 로 지정했기 때문에 뒤로 갈 페이지가 없는 것입니다 ㅎㅎ
$.mobile.changePage 이벤트를 위주로 소스를 이해하시면 될 것 같습니다.
직접 실행해 실습하며 이해하기 바랍니다.
submit 기능도 사용 가능합니다.
|
$.mobile.changePage( "../resources/results.php", {
type: "post",
data: $( "form#search" ).serialize(),
changeHash: false
});
|
cs |
2016.07.04
일부 소스가 작동하지 않는다고 하시는 분들을 위해서 압축파일 올립니다.
test.zip
'language > jquery mobile' 카테고리의 다른 글
| jquery mobile 강좌 11 [ 목록 뷰 / listview / form 태그 적용 / 입력 폼 만들기 ] (5) (0) | 2016.03.16 |
|---|---|
| jquery mobile 강좌 10 [ 목록 뷰 / listview / 아코디언 / collapsibleset / accordion ] (4) (0) | 2016.03.16 |
| jquery mobile 강좌 9 [ 목록 뷰 / listview / 말풍선 count bubbles / 아이콘 icon / 썸네일 / thumbnails] (3) (0) | 2016.03.16 |
| jquery mobile 강좌 8 [ 목록 뷰 / listview / 버튼 나누기 / 검색 만들기 ] (2) (0) | 2016.03.15 |
| jquery mobile 강좌 7 [ 목록 뷰 / listview 목록 만들기 ] (1) (0) | 2016.03.15 |
| jquery mobile 강좌 6 [ 페이지 전환 애니메이션 / 화면 전환 / 애니메이션 /changePage / data-transition / data-direction ] (0) | 2016.03.15 |
| jquery mobile 강좌 4 [ 대화상자, 다이얼로그 팝업 ] (0) | 2016.03.11 |
| jquery mobile 강좌 3 [ 페이지 이벤트 / event ] (7) | 2016.03.11 |
| jquery mobile 강좌 2 [ 페이지 이동 및 뒤로가기 ] (8) | 2016.03.10 |
| jquery mobile 강좌 1 [ jquery mobile 기본 설정 및 화면 만들기 ] (4) | 2016.03.10 |