ล่าสุดการพัฒนาเว็บบทเรียน
 

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


jQuery มือถือรวมถึงผลกระทบ CSS3 ที่ช่วยให้คุณเลือกวิธีที่หน้าควรเปิด


มือถือ jQuery ผลการเปลี่ยนแปลง

jQuery มือถือมีความหลากหลายของผลสำหรับวิธีการเปลี่ยนไปจากหน้าหนึ่งไปยังอีก

หมายเหตุ: เพื่อให้บรรลุผลการเปลี่ยนแปลงที่เบราว์เซอร์จะต้องสนับสนุน CSS3 3D แปลง:

12.0 10.0 16.0 4.0 15.0

ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่แปลง 3D

ผลการเปลี่ยนแปลงที่สามารถนำไปใช้เชื่อมโยงหรือแบบฟอร์มการส่งใด ๆ โดยใช้แอตทริบิวต์ข้อมูลการเปลี่ยนแปลง:

<a href="#anylink" data-transition="slide" >Slide to Page Two</a>

ตารางด้านล่างแสดงการเปลี่ยนที่สามารถนำมาใช้กับแอตทริบิวต์ข้อมูลการเปลี่ยนแปลงสำหรับทั้งหน้าและไดอะล็อก:

การเปลี่ยนแปลง ลักษณะ สำหรับหน้า สำหรับการโต้ตอบ
fade ค่าเริ่มต้น. จางหายไปยังหน้าถัดไป ลองมัน ลองมัน
flip พลิกหน้าถัดไปจากด้านหลังไปด้านหน้า ลองมัน ลองมัน
flow พ่นหน้าปัจจุบันออกไปและมาพร้อมกับหน้าถัดไป ลองมัน ลองมัน
pop ไปยังหน้าถัดไปเช่นหน้าต่างป๊อปอัพ ลองมัน ลองมัน
slide สไลด์ไปยังหน้าถัดไปจากขวาไปซ้าย ลองมัน ลองมัน
slidefade สไลด์จากขวาไปซ้ายและจางหายไปในหน้าถัดไป ลองมัน ลองมัน
slideup สไลด์ไปยังหน้าถัดไปจากล่างขึ้นบน ลองมัน ลองมัน
slidedown สไลด์ไปยังหน้าถัดไปจากบนลงล่าง ลองมัน ลองมัน
turn หันไปหน้าถัดไป ลองมัน ลองมัน
none ไม่มีผลการเปลี่ยนแปลง ลองมัน ลองมัน

ผลการซีดจางเป็นค่าเริ่มต้นในการเชื่อมโยงทั้งหมดในมือถือ jQuery (ถ้าสนับสนุนเบราว์เซอร์ได้)

เคล็ดลับ: ผลกระทบทั้งหมดข้างต้นนอกจากนี้ยังสนับสนุนการกระทำกลับ / ถอยหลังเช่นถ้าคุณต้องการหน้าจะเลื่อนจากซ้ายไปขวาแทนขวาไปซ้ายใช้แอตทริบิวต์ข้อมูลทิศทางที่มีค่า "reverse"

ตัวอย่าง

<a href="#pagetwo" data-transition="slide" data-direction="reverse" >Slide</a>
ลองตัวเอง»