CSMJU jQuery Mobile

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

3.1 Pages & dialogs

       m. Scripting pages

สคริปและสไตล์ในส่วนของ head(Scripts & styles in the head)
   สคริปและสไตล์อ้างอิงถึงในส่วนของ head ของหน้าเพจซึ่ง effect ต่างๆจะไม่มีผลเมื่อมีการโหลดหน้าเพจผ่าน AJAX แต่จะมีการทำงานเมื่อหน้าเพจร้องขอผ่าน HTTP ปกติ
   ถ้าคุณต้องการที่จะโหลดเฉพาะเจาะจงในสคริปหรือสไตล์แนะนำให้ใช้ logic ที่เป็นเหตุการณ์ pageinit (รายละเอียดด้านล่าง) ซึ่งจะถูกกำหนดโดยแอตทรบิวต์ของ id
รายละเอียดเหตุการณ์ pageinit 

$( document ).delegate("#aboutPage", "pageinit", function() {
  alert('A page with an id of "aboutPage" was just created by jQuery Mobile!');
});

   หากต้องการที่จะจัดการเนื้อหาของหน้าเพจก่อนถึงเหตุการณ์ของ pageinit และ widgets เริ่มต้นอัตโนมัติ สามารถผูกเหตุการณ์แทนด้วยเหตุการณ์ pagebeforecreate
ตัวอย่าง 


$( document ).delegate("#aboutPage", "pagebeforecreate", function() {
  alert('A page with an id of "aboutPage" is about to be created by jQuery Mobile!');
});

การเปลี่ยนหน้า(Changing pages)
   ถ้าต้องการที่จะเปลี่ยนหน้าเพจโดยใช้ javascript สามารถใช้เมธอด changePage
ตัวอย่าง 


//transition to the "about us" page with a slideup transition
$.mobile.changePage( "about/us.html", { transition: "slideup"} );
//transition to the "search results" page, using data from a form with an id of "search"
$.mobile.changePage( "searchresults.php", {
	type: "post",
	data: $("form#search").serialize()
});

การโหลดหน้าเพจ(Loading pages)
ยกตัวอย่างการใช้เมธอด loadPage 


//load the "about us" page into the DOM
$.mobile.loadPage( "about/us.html" );

การเพิ่มมาร์กอัพใหม่(Enhancing new markup)    ยกตัวอย่างเช่น ถ้าจะบล๊อกมาร์กอัพของ HTML (พูดถึงการ login) โดยโหลดผ่าน AJAX เรียกเหตุการณ์สร้างโดยอัตโนมัติการเปลี่ยนแปลง widgetsทั้งหมดในกรณีนี้จะมี input และ buttons เป็นเวอร์ชันที่เพิ่มขึ้นมา
ตัวอย่าง 

$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

Create vs. refresh: ความแตกต่างที่สำคัญ
   การ create เหมาะสำหรับเหตุการณ์การเพิ่มการมาร์คอัพที่ใดที่หนึ่งหรือมากกว่านั้นของ widgets ส่วนเมธอดการ refresh ควรใช้ widgets ที่มีอยู่จัดการกับโปรแกรมและความต้องการในการแก้ไข UI ให้เหมาะสม
   หน้าเพจที่เป็นแบบ dynamic เรียงด้วย data-role="listview" นี่คือการ create และถ้ามี list ที่มากขึ้นเรื่อยๆ โปรแกรมจะดึงเอาเมธอดrefresh มา refresh list ใหม่และจะยังคง list เดิมไว้
   ข้อมูลแอตทริบิวต์ data-enhance="false" ได้มีการเพิ่มแอตทริบิวต์ใหม่ที่สามารถเพิ่มพื่นที่การป้องกันการ auto-initialization ทำได้โดยการผ่าน $.fn.jqmEnhanceable ซึ่งฟีเจอร์นี้จะต้องใช้งานร่วมกับ $.mobile.ignoreContentEnabled=true Scroll เลื่อนตำแหน่งภายในหน้าเพจ (Scrolling to a position within a page)
ตัวอย่าง 


//scroll to Y 300px
$.mobile.silentScroll(300);

พารามิเตอร์ที่ผ่านระหว่างหน้าเพจ(Passing parameters between pages)
   jQuery Mobile ไม่รองรับ query พารามิเตอร์ภายในหน้าเพจตัวอย่างเช่น link "#somePage?someId=1" มันหมายถึง "#somePage" และถ้านำ link ภายใน div ของหน้าเพจด้วย id ของ "somePage" และประยุกต์ data-url ของ "#somePage?someId=1" ไปยังหน้าเพจนั้นหลังจากนั้นเรียกพารามิเตอร์อื่นๆเช่น "#somePage?someId=2" ก็จะพบกับ div เดียวกันเพราะ jQuery Mobile หมายถึง data-url ใน div ซึ่งเป็นการ set ครั้งเดียวและจะยังคงอยู่ที่ "#somePage?someId=1

 

© CSMJU