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

3.1 Pages & dialogs

       f. Transitions

    Jquery mobile framwork เรียกใช้ไฟล์ css ในการปรับเปลี่ยนเอฟเฟค, ทำให้สามารถประยุกต์ใช้กับอีกหลายๆลิงค์ของหน้าเว็บหรือใช้กับการใช้งานส่วนของการ Submit form ด้วยการใช้ AJAX

หมายเหตุ : บางแฟลตฟอร์มในปัจจุบันมีปัญหาในเรื่องของ action การเปลี่ยนแปลง ซึ่งเรากำลังดำเนินการที่จะแก้ไขปัญหานี้ให้กับผู้ใช้ หากในการใช้งานพบเจอเกี่ยวกับปัญหา Flickers และในระหว่างการ action กระพริบหน้าหรือตอนท้ายที่มีการเปลี่ยนแปลงสามารถแนะนำพวกเราได้ สามารถ note ปัญหาไว้เพื่อจะได้แก้ปัญหานั้นๆ เพื่อที่จะทำให้รู้ถึงสาเหตุจากการใช้งานและความผิดพลาดบนบราวเซอร์ของบางแฟลตฟอร์มโดยเฉพาะแฟลตฟอร์มของแอนดรอยด์ที่จะต้องเพิ่มเติมโค้ด ดังต่อไปนี้ลงในไฟล์ css 

.ui-page { -webkit-backface-visibility: hidden; }

     การที่จะทำให้มองเห็น action ทั้งหมดให้ครบถ้วน ผู้ใช้ควรใช้บราวเซอร์ที่รองรับแฟลตฟอร์ม 3D โดยค่าเริ้มต้นของอุปกรณ์ปกติแล้วจะขาดการรองรับ 3D เช่น Android 2.x ที่ทำให้ไม่เห็น action แบบ fade ของการเปลี่ยนแปลง action ทั้งหมด พฤติกรรมการกำหนดเหล่านี้มีดังต่อไปนี้

กำหนดการเปลี่ยนแปลงบนลิงค์และ form submit (Setting a transition on a link or form submit)
     โดยปกติแล้ว framework ที่ใช้การเปลี่ยนแปลงแบบ fade ต้องเซ็ตแอฟเฟกต์ โดยเพิ่ม data-transition ที่ตัวแปลงของลิ้งค์

<a href="index.html" data-transition="pop">I'll pop</a> 

     เมื่อกดปุ่ม Back, framework จะย้อนเปลี่ยนไปยังหน้าเว็บที่ถูกเรียกใช้โดยอัตโนมัติ เพื่อการกำหนดให้มีความแน่นอนและถูกต้องของการ Back กลับหน้าเว็บก่อนหน้าควรต้องเพิ่มโค้ด

<a href="content.html" data-direction="reverse"<a>Back</a>

การกำหนดมาตรฐานของการเปลี่ยน(Global configuration of transitions)
     การตั้งค่าตัวเลือกมาตรฐานการเปลี่ยนหน้าเพจ หากคุณต้องการทำให้เป็นการเปลี่ยนที่แตกต่าง Dialogs จะมีตัวเลือกที่ต่างกันที่เรียกว่า มาตรฐานการเปลี่ยน Dialogs ที่สามารถกำหนดค่าได้

การรองรับของบราวเซอร์และการดำเนิดการ(Browser support and performance)
     การเปลี่ยนทั้งหมดเป็นการสร้างขึ้นด้วย CSS keyframe animations และ include ควบคู่กัน - webkit นำกฏหมายของผู้จำหนาย IOS,Blackberry,Android,Safari และ Chrome บราวเซอร์ พร้อมด้วย - moz กฏของบราวเซอร์ Firefox รองรับ keyframe,animations และ transition ความราบรื่นในการใช้เป็นสิ่งที่รุ่นของบราวเซอร์และฮาร์ดแวร์ ได้อย่างปลอดภัยไม่ล้าหลัง ถ้าไม่รองรับ animations. ในเชิงรุกจะไม่รวมการเปลี่ยนแปลงในสถานการณ์ที่มีการดำเนินการที่ผิดพลาด พวกเราไม่รวมบราวเซอร์ที่ไม่ได้ทำให้เป็น 3D และเอื้อให้การเปลี่ยนแปลงย้อนหลังและให้พื้นที่สูงสุดเมื่อมีการนำไปใช้ในการเปลี่ยนแปลง

การกำหนดการเปลี่ยน fallback สำหรับการไม่รองรับ 3D (Defining fallback transitions for non-3D support)
     โดยปกติการเปลี่ยนทั้งหมดยกเว้นแบบ fade จะรองรับ 3D อุปกรณ์ที่ไม่รองรับ 3D จะขาดการเปลี่ยนแบบ fade และไม่แสดงการเปลี่ยนแบบดังกล่าว ซึ่งเราได้ทำแบบเดียวกันนี้กับแฟลตฟอร์มที่มีความสามารถต่ำอย่างเช่น android 2.x จากการเปลี่ยนขั้นสูงและแน่ใจว่าเรายังคงมีการเห็นที่ราบรื่น ทราบว่าจะมีแฟลตฟอร์มดังกล่าวที่เป็น android 3.0 ที่รองรับการใช้เทคนิค 3D แต่ยังคงมีความสามารถของ animation ที่ยังต่ำ ดังนั้น android 3.0 ยังไม่รับประกันว่าจะแสดง action ได้เหมือนกับทุกๆบราวเซอร์ 100% แต่เราพยายามที่จะทำให้เป็นไปตามเป้าหมาย
     การเปลี่ยน fallback สำหรับบราวเซอร์ที่ไม่รองรับ 3D สามารถที่จะกำหนดแต่ละประเภทการเปลี่ยน แต่โดยปกติแล้ว เราจะระบุ “fade” ที่ fallback เช่น set เปลี่ยน fallback เพื่อให้เปลี่ยนเป็นแบบ slideout ที่ “none” ตัวอย่างเช่น

$.mobile.transitionFallbacks.slideout = "none"

การตั้งค่าการเปลี่ยน max scroll(Setting a max scroll for transitions)
     โดยปกติปิดการเปลี่ยนจะเช็ตให้เป็น “none” เมื่อเข้ามาแต่ละ FROM หรือ การกำลังเข้าถึงหน้าเพจ ที่ scroll เลื่อนตำแหน่งคือ 3x ซึ่งเป็นความสูงของหน้าจออุปกรณ์ ฟีเจอร์นี้จะถูกเพิ่มเข้าไปด้วยเหตุผลของการตอบสนองที่ช้าและความเป็นไปได้ของบราวเซอร์ที่ชนกันเมื่อคลิกที่รายการหรือในอีกหลายๆกรณีที่ใช้ระยะเวลานานของการเข้าถึงหน้าเพจ ซึ่งนำไปสู่การที่บราวเซอร์พยายามเคลื่อนไปตำแหน่งสูงสุดของหน้าจอ scroll เลื่อตำแหน่งนไม่รวมความสูงของหน้าจอแต่เป็นการกำหนดส่วนย่อยของการดำเนินการ scroll เลื่อนตำแหน่งนี้กำหนดผ่านฟังก์ชัน

getMaxScrollForTransition

การตั้งค่าการเปลี่ยนความกว้างสูงสุด(Setting a max width for transitions)
      โดยปกติสามารถปิดการเปลี่ยนด้วยการ set ให้เป็น “none” ในขณะที่ความกว้างของวินโดว์ที่ใหญ่กว่าความกว้างของพิเซล ฟีเจอร์นี้จะช่วยเป็นประโยชน์ เพราะการเปลี่ยนแปลงอาจทำให้สับสนหรือทำงานได้ไม่ดีกับหน้าจอที่ใหญ่ ที่กำหนดตัวแปลผ่านเมธอด

$.mobile.maxTransitionWidth

     โดยค่ามาตรฐานเป็น fales เป็น options ที่รับค่าตัวเลขได้หลายค่าโดยแทนค่าความกว้างของ pixel หรือค่า fales ถ้าหากไม่เป็น fales สามารถใช้ “none” กรณีที่วินโดว์กว้างกว่าตัวแปลที่ระบุ

การใช้งานแบบเดียวกับการเปลี่ยนหน้าเพจ(Using same page transition)
     การเปลี่ยนหน้าเพจที่ใช้งานหน้าปัจจุบันปกติจะถูกละเว้นแต่สามารถเปิดการใช้งานด้วยใช้ option allowsamePageTransition ของ เมธอด $.mobile.changePage การเปลี่ยนทั้งหมดจะทำงานตามที่คาดไว้และสิ้นสุดลงเมื่อแสดงผลลัพท์

การกำหนดสร้างการเปลี่ยนเอง(Creating custom transitions)
     Jquery Mobile ช่วยเสริมเกี่ยวกับการกำหนดการเปลี่ยนเอง กำหนดที่

$.mobile.transitionHandlers

ดังนั้นคุณสามารถพัฒนาโดยการเลือกใช้กับ site หรือ app ของคุณได้

CD ไฟล์: page-transitions.html