CSMJU jQuery Mobile

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

3.1 Pages & dialogs

       d. Page titles
AJAX ช่วยในส่วนของ title
       การโหลดเข้ามาหน้าแรกของ Jquery Mobile ขณะที่กดลิ้งค์หรือกด submit form, AJAX จะเป็นตัวที่ช่วยดึงเอาเนื้อหาของการเรียกหน้าเว็บที่มีทั้งสองหน้าใน DOM ที่จำเป็นจะต้องมีการเปลี่ยนแปลง ของหน้าเว็บ แต่ก็มีข้อเสียในการทำในลักษณะนี้คือ Page title จะเป็น Page title ของหน้าเว็บแรกตลอดไม่ได้แสดง Page titleล่าสุดตามหน้าที่เปลี่ยนตาม ที่เปลี่ยนแปลงหน้านั้นไปจึงนำเอา data title เข้ามาช่วยเพื่อให้มีการอัพเดทให้ตรงกับ title ของหน้าเว็บที่เราเลือกมาดูล่าสุด

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

CD ไฟล์: page_title.html

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

<div data-role="page" id="one">
<div data-role="header"><h1>Page-title "One"</h1></div>
<div data-role="content" >
<h3>Page title One</h3>
<p><a href="#foo">Page title "Two"</a></p>           
</div><!-- /content -->
<div data-role="footer">
<h4><i>Copyrigh@2012</i></h4>
</div></div>
<div data-role="page" id="foo" data-title="Page Foo" data-theme="a">
<div data-role="header">
<h3>Page Two</h3>
</div><!-- /header -->
<div data-role="content" data-theme="a">   
<h3>Page title Two</h3>
<a href="#one" data-direction="reverse">Back to page "one"</a>
</div>
<div data-role="footer">
<h4><i>Copyrigh@2012</i></h4>
</div>
</div>