CSMJU jQuery Mobile

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

4.2 Events

pageload

   เรียกหลังจากหน้าเพจโหลดเสร็จเรียบร้อยและเพิ่มเข้าไปใน DOM Callbacks จะถูกผูกเหตุการณ์นี้ส่งผ่านข้อมูลของอ๊อฟเจ็คเป็นครั้งที่ 2 อ๊อฟเจ็คนี้ประกอบด้วยข้อมูลดังต่อไปนี้

ตัวอย่าง


$( document ).bind( "pageloadfailed", function( event, data ){
	// Let the framework know we're going to handle things.
	event.preventDefault();
	// ... attempt to load some other page ...
	// at some point, either in this callback, or through
	// some other async means, call resolve, passing in
	// the following args, plus a jQuery collection object
	// containing the DOM element for the page.
	data.deferred.resolve( data.absUrl, data.options, page );
});
or rejected like this:
$( document ).bind( "pageloadfailed", function( event, data ){
	// Let the framework know we're going to handle things.
	event.preventDefault();
	// ... attempt to load some other page ...
	// at some point, if the load fails, either in this
	// callback, or through some other async means, call
	// reject like this:
	data.deferred.reject( data.absUrl, data.options );
});

เหตุการณ์การเปลี่ยนหน้าเพจ(Page change events)

pagebeforechange

   เหตุการณ์นี้เป็นเหตุการณ์ที่เรียกใช้ก่อนที่ทุกๆหน้าเพจจะโหลดหรือมีการเปลี่ยนแปลงข้อมูลอ๊อฟเจ็คมีคุณสมบัติดังนี้

pagechange

   เหตุการณ์นี้เป็นการเรียกใช้ภายหลังจากมีการร้องขอการโหลดหน้าเพจไปที่ DOM และหน้าเพจทั้งหมดมีการเปลี่ยนแปลงไปเรียบร้อยแล้วคุณสมบัติของอ๊อฟเจ็คมีดังต่อไปนี้

$( 'div' ).live( 'pageshow',function(event, ui){
  alert( 'This page was just hidden: '+ ui.prevPage);
});
$( 'div' ).live( 'pagehide',function(event, ui){
  alert( 'This page was just shown: '+ ui.nextPage);
});

เหตุการณ์การเตรียมหน้าเพจ(Page initialization events)

   โดยพื้นฐานแล้ว jQuery Mobile มีปลั๊กอินการเริ่มต้นหน้าเพจเองอัตโนมัติบนข้อตกลงของการมาร์กอัพที่กำหนดไว้กับหน้าเพจตัวอย่างเช่น input ที่ประกอบด้วย type ของ range โดยจะสร้างการควบคุมการเลือก slider โดยอัตโนมัติ

pagebeforecreate

   เรียกใช้งานในขณะที่หน้าเพจกำลังเริ่มก่อนที่อีกหลายๆปลั๊กอินจะเริ่มขึ้น

ตัวอย่าง


$( '#aboutPage' ).live( 'pagebeforecreate',function(event){
  alert( 'This page was just inserted into the dom!' );
});

Note: สามารถจัดการมาร์กอัพของ jQuery Mobile ก่อนที่จะปล่อยให้ widgets จะเริ่มต้นโดยอัตโนมัติ

ตัวอย่างเหตุการณ์ที่ควรนำไปใช้


$( '#aboutPage' ).live( 'pagebeforecreate',function(event){
  // manipulate this page before its widgets are auto-initialized
});

pagecreate

   เรียกใช้งานเมื่อหน้าเพจมีการสร้างใน DOM(ผ่าน ajax หรืออื่นๆ)แต่ก่อนหน้านั้น widgets ทั้งหมดมีโอกาสที่จะเพิ่มการมาร์กอัพเพิ่มขึ้นเหตุการณ์นี้มีการนำไปใช้กันมากสำหรับผู้ใช้ที่ต้องการที่จะ สร้าง widgets ของตัวเองที่กำหนดเองเพื่อเพิ่มประสิทธิภาพการมาร์กอัพซึ่งมีความง่ายที่จะทำ jquery mobile widgets

ตัวอย่าง


$( '#aboutPage' ).live( 'pagecreate',function(event){
  ( ":jqmData(role='sweet-plugin')" ).sweetPlugin();
});

pageinit

เ   รียกใช้บนหน้าเพจเริ่มต้นภายหลังจากที่หน้าเพจเริ่มต้นขึ้น

$( '#aboutPage' ).live( 'pageinit',function(event){
  alert( 'This page was just enhanced by jQuery Mobile!' );
});

pageremove

   เหตุการณ์นี้จะถูกเรียกก่อนที่ framework พยายามที่จะกำจัดหน้าเพจออกจาก DOM เหตุการณ์ callback สามารถเรียก preventDefault เมื่อเป็นเหตุการณ์ของอ๊อฟเจ็คเพื่อที่จะป้องกันไม่ให้หน้าเพจไม่ถูกล

รูปแบบของเหตุการณ์(Layout events)

updatelayout

   เหตุการณ์นี้จะถูกเรียกโดยส่วนประกอบภายใน framework ที่เป็นแบบไดนามิก แสดง/ซ่อน ส่วนของเนื้อหาและเป็นการหมายถึงวิธีการทั่วไปที่จะแจ้งให้ส่วนประกอบ อื่น ๆที่ต้องการปรับปรุงขนาดหรือตำแหน่ง

ตัวอย่าง


$( '#foo' ).hide().trigger( 'updatelayout' );

เหตุการณ์ของแอนนิเมชัน(Animation Events)

   jQuery Mobile เปิดให้ใช้ปลั๊กอินของการแอนนิเมชันฉบับสมบรูณ์ออกมาแล้ว ซึ่งสามารถนำไปใช้หลังจากการเพิ่มหรือการลบคลาสนั้นๆ เอาไปประยุกต์กับการเปลี่ยนแปลงใน CSS

ตัวอย่าง


$(document).bind("pagehide", function(event, ui) {
  $(ui.nextPage).animationComplete(function() {
    alert('Animation completed');
  });
});

 

© CSMJU