do it mission 9

한글 블로그로 보기


MISSION 9

This mission is using page link and auto back button.

I consist one file(html)

This is first page(main)

1. <div data-role="page" id="page" data-theme="b" >
2.     <div data-role="header" >
3.         <h1>Page One</h1>
4.     </div>
5.     <div data-role="content">  
6.        
7.             <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>
8.            
9.            
10.     </div>
11.     <div data-role="footer">
12.         <h4>Page Footer</h4>
13.     </div>
14. </div>

This is second page.

1. <div data-role="page" id="page2" data-theme="b"   >
2.     <div data-role="header" data-add-back-btn=”true” >
3.         <h1>Page Two</h1>
4.        
5.     </div>
6.     <div data-role="content">  
7.         <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>
8.        
9.            
10.     </div>
11.     <div data-role="footer">
12.         <h4>Page Footer</h4>
13.     </div>
14. </div>

compare pages.

Can you finding what is different?

line 2 is different.

second page added "data-add-back-btn="true"".

This code making automatically  add "back" button.

So we use second page.

Maybe don't need for first page.

And line 7 is page link.

<a href="#page name" > linked tag that is name is  "page name".

So if you click this button, open this page.

This is first page.

If you click page Two.

You can see second page.

And see back button.