Home / Developer  / jQuery Mobile ตอนที่ 3 สร้างลูกเล่น Page Transition เชื่อมต่อกัน

jQuery Mobile ตอนที่ 3 สร้างลูกเล่น Page Transition เชื่อมต่อกัน

บทเรียนตอนที่ 3 เกี่ยวกับ jQuery Mobile ครั้งนี้จะเป็นการพาไปรู้จักกับ Page Transition หรือแอนิเมชันสำหรับแสดงเวลาที่เปลี่ยนหน้าของเว็บครับก่อนที่จะเรียนรู้เกี่ยวกับบทเรียนนี้สำหรับผู้เริ่มเต้มนั้นผมแนะนำให้ไปศึกษาบทความก่อนหน้านี้นะครับนั่นคือ

ถ้าออกแบบหน้าจอ Interface ของ Mobile Application ของเราเป็นที่เรียบร้อยแล้ว ก็ให้พิจารณาส่วนของ Skeleton HTML ให้เรียบร้อยกันหน่อยนะครับว่าเป็นเหมือนตัวอย่างนี้หรือเปล่า

ภาพประกอบหน้าจอ HTML ที่สร้างไว้

ภาพประกอบหน้าจอ HTML ที่สร้างไว้

ส่วนนี่คือ โครงสร้างครับตรวจสอบและตรวจตราดูหน่อยว่า โอเคหรือยัง

เสร็จแล้วให้แทรก Path ของการเรียก Library ของ jQueryMobile อีกครั้งครับ ให้เหมือนตัวอย่างที่วางไว้

สังเกตดูว่า Transition ของการเปลี่ยนหน้าเว็บนั้นส่วนใหญ่จะอยู่ที่ Tag ของ a href หรือ ลิงค์หน้าใหม่นั่นเองครับ

ซึ่งสามารถเรียกจาก Tag Div หรือ Dialog ภายในหน้าซึ่งเราจะมี DIV ส่วนที่ชื่อว่า “popup” อยู่แล้ว

การเรียกก็คือ

หรือให้สร้างหน้าใหม่ขึ้นมาว่า Content.html ขึ้นมาครับ ตามนี้

หน้า Content รายละเอียด

หน้า Content รายละเอียด

วิธีการเรียก และเล่น Transition ก็จะแตกต่างกันไปตามนี้ครับ

วิธีการ Flip

วิธีการ Slide

และตัวอย่างอีกมากมาย ในหน้าตัวอย่างที่เตรียมไว้ให้ครับ ตัวอย่างสามารถเข้าไปเล่นได้ที่

http://www.daydev.com/demo/jquerymobile/

หรือ Scan QR Code ด้านล่างได้เลยครับ

QR Code

QR Code

ถามถึง Source Code ที่นี่ครับ
jQuery Mobile Complete Source (Version 1)

Comments

daydevthailand@gmail.com

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Review overview
1 COMMENT

POST A COMMENT