CSMJU jQuery Mobile

เมนู
ถัดไป ก่อนหน้า

3.1 Pages & dialogs

       c. Multi-page
  jQuery Mobile แบบ Multi page เป็นการเชื่อมโยงลิ้งภายในหน้าโดยการเชื่อมกันโดยการเรียกผ่าน id ของหน้าเว็บที่ต้องการให้แสดง

ตัวอย่างหน้าจอ

CD ไฟล์: multipage-template.html

ตัวอย่างโค้ด

<div data-role="page" id="one">
<div data-role="header">
<h1>Multi-page</h1>
</div>
<div data-role="content" >
<h3>Page One</h3>
<p><a href="#two" data-role="button">Show page "two"</a></p>       
<p><a href="#popup"data-role="button" data-rel="dialog" data-transition="pop">Show page "popup" (as a dialog)</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4><i>Copyrigh@2012</i></h4>
</div>
</div>
<div data-role="page" id="two" data-theme="a">
<div data-role="header">
<h3>Page Two</h3>
</div><!-- /header -->
<div data-role="content" data-theme="a">   
<h2>Two</h2>
<p><a href="#one" data-direction="reverse" data-role="button" >Back to page "one"</a></p>     
</div>
<div data-role="footer">
<h4><i>Copyrigh@2012</i></h4>
</div>
</div>
<div data-role="page" id="popup">
<div data-role="header" data-theme="a">
<h1>Dialog</h1>
</div>
<div data-role="content" >
<h2>Popup</h2>                       
<p><a href="#one" data-rel="back" data-role="button" data-inline="true" data-icon="back">Back to page "one"</a></p>  
</div>
<div data-role="footer">
<h4><i>Copyrigh@2012</i></h4>
</div>
</div>