วิธีตั้งค่า default transition ให้กับ JQuery Mobile Application

แม้ว่า Page Transition ใน JQuery Mobile จะง่ายแสนง่าย และทำให้การเปลี่ยนหน้าเพจใน Web application ของเราเหมือนกับ mobile app แต่จะให้เรามานั่งกำหนดทุกๆ link ก็ใช่จะดี ใช่มั้ยครับ (พยักหน้า) เอาล่ะ เราจะมากำหนด Transition ทีต้องการให้ใช้งานเหมือนกันทั้งแอพ ผ่าน default transition กัน

วิธีกำหนดให้ Transition ที่เราต้องการเป็นค่าเริ่มต้นใน JQuery Mobile app ของเรา

1. วาง script ในตำแหน่งที่ถูกต้อง

อย่างแรกที่เราต้องรู้ คือตำแหน่งที่จะเรียก function ที่เอาไว้กำหนด default transition ครับ จะวางตามใจฉันไม่ได้ ตำแหน่งที่ถูกต้องคือหลังจากที่เราเรียก script JQuery และก่อนเรียก script JQuery Mobile โดยเราจะเขียน script tag เข้าไป หรือโหลด javasript file เข้ามาก็ได้ ตามตัวอย่างด้านล่าง

<script src="jquery.js"></script> // jquery script
  // ตรงนี้แหละ
<script src="jquery-mobile.js"></script> // jquery mobile script

ส่วนนี่คือ script ที่เอาไว้ตั้งค่า configuration ครับ

$(document).on("mobileinit", function(){

});

2. กำหนดชื่อของ Transition ที่ต้องการ

จากนั้นเราถึงสามารถกำหนดค่าของ Transition ให้กับทั้ง application ได้ง่ายๆ แบบนี้

$(document).on("mobileinit", function(){
    $.mobile.defaultPageTransition = "flip";
});

3. ทดสอบ

จากนั้นก็ให้ save ไฟล์ทั้งหมด แล้วลองทดสอบผ่านหน้า Web browser หรือ Mobile web browser ดูครับ

ก่อนไปต่อ

การกำหนด Transition ที่เราต้องการให้เป็น default transition นั้น เป็นวิธีการที่อำนวยความสะดวกมาก แต่เราก็สามารถกำหนด Transition เฉพาะ link ตามปกติหลังจากที่เรากำหนด default transition ไปแล้วได้เช่นกัน

ขอให้สนุกครับ 🙂

ดูการตั้งค่า default configuration อื่นๆ ได้ที่นี่นะ