jQuery Mobile - การเปลี่ยน

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

ตารางต่อไปนี้แสดงรายการการเปลี่ยนหน้าที่ใช้ใน jQuery Mobile framework -

ซีเนียร์	การเปลี่ยนและคำอธิบาย	สำหรับเพจ	สำหรับ Dialogs
1	fade คุณสามารถทำให้องค์ประกอบจางลงและมองไม่เห็นได้	จางหน้า	กล่องโต้ตอบ Fade
2	flip พลิกองค์ประกอบจากด้านหลังไปด้านหน้าไปยังหน้าถัดไป	พลิกหน้า	Flip Dialog
3	pop คุณสามารถสร้างหน้าต่างป๊อปอัป	ป๊อปเพจ	ป๊อปโต้ตอบ
4	flow แสดงหน้าถัดไปโดยเว้นหน้าปัจจุบันไว้	โฟลว์เพจ	โฟลว์ไดอะล็อก
5	slide คุณสามารถเลื่อนหน้าจากขวาไปซ้าย	หน้าสไลด์	สไลด์ไดอะล็อก
6	slidefade เลื่อนหน้าจากขวาไปซ้ายและจางหายไปในหน้าถัดไป	หน้า Slidefade	กล่องโต้ตอบ Slidefade
7	slideup เลื่อนหน้าจากล่างขึ้นบน	หน้า Slideup	กล่องโต้ตอบ Slideup
8	slidedown เลื่อนหน้าจากบนลงล่าง	หน้าเลื่อนลง	กล่องโต้ตอบแบบเลื่อนลง
9	turn คุณสามารถเปิดไปหน้าถัดไป	เปิดหน้า	เปิดกล่องโต้ตอบ
10	none คุณไม่สามารถใช้เอฟเฟกต์การเปลี่ยนแปลงใด ๆ โดยใช้แอตทริบิวต์นี้	ไม่มีหน้า	ไม่มีกล่องโต้ตอบ

การตั้งค่าการเปลี่ยนและการกำหนดค่าส่วนกลาง

ตามค่าเริ่มต้นเพจจะมี fadeการเปลี่ยนแปลงในกรอบ คุณสามารถใช้การเปลี่ยนแบบกำหนดเองได้โดยเพิ่มไฟล์data-transitionแอตทริบิวต์ของลิงค์ คุณสามารถใช้เอฟเฟกต์การเปลี่ยนเริ่มต้นที่แตกต่างกันสำหรับเพจโดยใช้defaultPageTransitionตัวเลือกทั่วโลก สำหรับกล่องโต้ตอบคุณสามารถใช้ประโยชน์จากไฟล์defaultDialogTransition ตัวเลือก

การเปลี่ยนทางเลือก

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

Max Scroll สำหรับการเปลี่ยน

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

ความกว้างสูงสุดสำหรับการเปลี่ยน

คุณสามารถปิดใช้งานการเปลี่ยนได้เมื่อความกว้างของหน้าต่างสูงกว่าความกว้างของพิกเซล คุณสามารถกำหนดค่าความกว้างสูงสุดสำหรับการเปลี่ยนโดยใช้$.mobile.maxTransitionWidthglobal option ซึ่งตั้งค่าเป็น false ตามค่าเริ่มต้น ใช้ค่าต่างๆเช่นความกว้างของพิกเซลหรือค่าเท็จและการเปลี่ยนจะถูกตั้งค่าเป็นไม่มีถ้าไม่ใช่ค่าเท็จเมื่อหน้าต่างสูงกว่าค่าที่ระบุ

การเปลี่ยนหน้าเดียวกัน

คุณสามารถเพิ่มการเปลี่ยนไปยังเพจปัจจุบันโดยใช้ไฟล์ allowSamePageTransition ตัวเลือกของวิดเจ็ตเพจคอนเทนเนอร์ change() วิธี.

การสร้างการเปลี่ยนแบบกำหนดเอง

คุณสามารถสร้างการเปลี่ยนแบบกำหนดเองในเพจโดยใช้ $.mobile.transitionHandlers ตัวเลือกที่ขยายการเลือกช่วงการเปลี่ยนภาพบนเว็บไซต์หรือแอปพลิเคชัน