jquery mobile 강좌 5 [ 페이지 이동 / changePage ]

2016. 3. 11. 14:07language/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

 

 

 

  • 프로필사진
    2016.06.03 16:22

    비밀댓글입니다

  • 프로필사진
    2016.06.08 13:21

    비밀댓글입니다

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2016.06.08 15:05 신고

      먼저 반갑습니다 ^^
      도움이 되련지 ... 모르겠지만
      일단
      비슷한 상황을 만들어 보니 진짜 스크롤이 맨위로 가더라구요

      비동기 방식으로 페이지 이동을 해보시는 것이 어떠신지 ...
      그럼 쉽게 해결될 문제인데 ㅠㅠ

      유상훈님 상황이 그냥 새로운 페이지로 이동하는 상황이라서 jquery mobile 을 가지고 이것저것 만져볼 필요는 없어보이고
      api doc 에도 딱히 보이는건 없네요

      고전적인 방법이지만 꼭 스크롤을 원래위치로 가야한다면 매 페이지를 떠날 때마다(이동할 때 마다 이동되기 전에) 스크롤 위치를 쿠키로 저장시켜 놓고 이동합니다.
      페이지 로드 최초에 쿠키에서 해당 페이지의 스크롤 값이 있으면 그 위치로 스크롤 이동, 없으면 최상단으로 스크롤 이동 등등 이런식으로 구현할 수 있어요

      plugin 도 있어보이고 (영어 못해서 잘 못 본것일 수 있음)

      stackoverflow 에도 비슷한 사례가 있어 보이네요 ㅎㅎ
      http://stackoverflow.com/questions/15802134/jquery-mobile-go-back-button-scrolls-to-top

      화이팅입니다 ^^

  • 프로필사진
    JC2016.06.29 19:57

    안녕하세요. 우선 좋은 정보글 감사합니다ㅎㅎ

    005changePage.html에서 005changePage2.html로 이동하려고 버튼을 누르면 팝업은 잘 뜨지만 Error loading page가 뜨면서 005changePage2.html로 이동이 되지 않습니다. 예제 소스를 그대로 붙여넣어도 보고 혹시 오타라도 있는지 싶어서 잘 살펴보기도 했지만 계속 Error loading page가 뜹니다.

    IE, chrome에서 실행중입니다.

    혹시 왜 그런지 알 수 있을까요? 같은 이유로 jquery mobile 19번 포스팅의 swipe page도 실행이 되지 않아 답답합니다ㅜㅜ

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2016.06.30 09:21 신고

      안녕하세요 ㅎㅎ
      의견주셔서 감사합니다

      일단 소스는 제가 복사해서 테스트해 본 결과 005changePage.html 파일에서 005changePage2.html 파일간에 이동은 문제가 없었습니다.
      또한 팝업이 뜨는 소스가 아닌데 팝업이 뜬다는 것이 조금 의문입니다.

      강좌 19번도 역시 방금 테스트해보았는데 문제 없었습니다 ㅠㅠ
      비슷한 증상이 보여야 도움을 드릴 수 있을 것 같은데 확인이 안되네요ㅠㅠ

      테스트는 ie11에서 진행되었고 jqm 버전은 1.4.5 , jquery 버전은 1.11.0 입니다.

      005changePage2.html 에서 go page4 A태그는 작동하지 않는 것이 정상입니다.
      jqm에서 페이지 이동은 page를 갈아끼우는 형식(?) 이라서 page4 아이디를 가진 페이지는 로드되지 않아서 이동이 불가능합니다 ^^

      005changePage2.html 에서 Back 버튼이 작동하지 않는 것 또한 정상입니다.
      Back 버튼은 005changePage.html 에서 005changePage2.html 로 이동할 때 옵션 중 changeHash 를 false 로 지정했기 때문에 뒤로 갈 페이지가 없는 것입니다 ㅎㅎ

      $.mobile.changePage 이벤트를 위주로 봐주시면 될거 같아요

      또 의문이 있으시면 댓글 주세요 ㅎㅎ 환영입니다.

    • 프로필사진
      JC2016.06.30 14:58

      자세한 답변 감사합니다 :D
      그래도 문제는 해결이 되지 않았습니다ㅜㅜ

      현재 제가 겪고 있는 문제입니다.
      http://jc-test.tistory.com/1
      위 주소를 참고하시면 좋을 것 같습니다.

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2016.06.30 16:56 신고

      혹시 테스트 하고 있는 컴퓨터가 맥인가요 ?
      OS 별로 절대경로와 절대경로와 상대경로를 지정하는 방식이 조금 다른데 혹시 그 문제가 아닐까요 ?
      저는 윈도우에서 테스트 했습니다 ㅎㅎ

      또는.... 희박한 확률이지만 파일 인코딩문제로 눈에 보이지 않는 특수문자들이 들어가 있을 수 도 있습니다 (아주희박한....)

    • 프로필사진
      JC2016.06.30 17:31

      windows 10, IE11에서 테스트했습니다.
      다른 곳에 이상이 없다면 인코딩 문제일까요?

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2016.07.04 09:26 신고

      일단 본문 맨 아래에 방금 테스트한 파일 압축해서 올려두었습니다. 실행해 보시면 될것같아요 ㅎㅎ

      그래도 안되면...
      $.mobile.changePage( "./005changePage2.html", {transition: "flip", changeHash: false });

      이렇게 경로를 수정해보시는것도 추천해드려요
      그래도 해결안되면 ㅠ 더 고민해봐야할거같아요 ㅠ

    • 프로필사진
      JC2016.07.06 17:41

      올려주신 소스로 IE11에서 정상동작 확인했습니다 ㅎㅎ
      (같은 소스인데 어째서 제건 안되는 걸까요ㅠㅠ)

      다만 크롬에서는 '요청한 작업을 처리하지 못하였습니다'라는 에러 메시지를 띄웁니다. 우선 IE 정상동작을 확인했으니 크롬 동작은 나중에 알아봐야겠어요 ㅜ

      답변 감사합니다 :)

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2016.07.06 17:42 신고

      신기한 현상이네요 ㅠ
      일단 된다고 하시니 그래도 다행입니다 !!

  • 프로필사진
    몰라무서워2016.09.29 14:16

    changeHash 를 false 로 하나 true 로 하나 뒤로가기 버튼이 동작하는데 어찌된걸까요?

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2016.09.29 14:54 신고

      뭔가 착각이 있으신거 같은데 그럴 경우는 없습니다.

      혹시나 그럴 경우가 있는지 확인 가능한 소스가 있다면 첨부좀 해주시겠습니까 ?