Do it 쉽게배우는 웹앱&하이브리드앱 미션 9

MISSION 9

 

 

이번 미션은 버튼 눌러서 페이지 이동하기, 백버튼(뒤로가기) 자동생성이네용.

파일 하나에 페이지를 여러개 구현해봅니다.

 

일단 소스부터 볼께요.

 

잡다한 것은 앞의 포스팅을 참고하세요 ㅎ

 

일단 첫 페이지 입니다.

 

<div data-role="page" id="page" data-theme="b" >
    <div data-role="header" >
        <h1>Page One</h1>
    </div>
    <div data-role="content">  
       
            <a href="#page2" data-transition="slide" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-right ui-icon-carat-r" data-transition="slide">Page Two</a>
           
           
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>

그리고 둘째 페이지 입니다.

 

<div data-role="page" id="page2" data-theme="b"   >
    <div data-role="header" data-add-back-btn=”true” >
        <h1>Page Two</h1>
       
    </div>
    <div data-role="content">  
        <a href="#page3" data-transition="slide" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-right ui-icon-carat-r" >Page Three</a>
       
           
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>

소스를 받아보시면 4페이지까지 있는데 같으니깐요.

 

둘을 비교해보면 다른접이 라인 2에 보이실 꺼예요.

 

첫 페이지에는 없는 그것!!

 

바로  "data-add-back-btn="true"" 

 

이 것이 바로 백버튼을 추가해 주는 거예요.

인터넷을 뒤져보니 "data-add-backbtn="true"도 있던데 이건 안되더라구요.

그리고 false로하면 버튼이 생기질 않습니다.

첫페이지는 뒤로 갈 곳이 없으니 둘째 페이지부터 넣어줍니다.

그리고 다른 페이지로 이동하는 것은 라인 7을 보시면 됩니다.

 

<a href="#page name" >  라는 코드가 보이실건데 이게 어느 곳으로 이동해라 이겁니다. 

 

"#페이지 이름 " 이라는 페이지로 이동하는거죠. 

 

그리고 당연히 페이지 이름이라는 페이지의 id가 정의되어 있어야 합니다.

 

참고로 하나의 파일안에 페이지가 여러개면 '#페이지이름'을 쓰고, 외부파일이라면 '페이지이름.html'을 씁니다.

 

실행화면입니다.

 

page Two를 눌러보면 아래와 같은 화면으로

 

뒤로가기 버튼이 추가된 걸 볼 수 있어요^^

 

그리고 라인7 뒤에 붙어있는것은 효과와 화살표 아이콘입니다.^^