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

jQuery Mobile มีประสิทธิภาพ CSS ที่อนุญาตให้คุณเลือกวิธีที่จะเปิดหน้า

jQuery Mobile ฝากเปลี่ยนแปลง

jQuery Mobile มีชุดที่พิจารณาว่ามีประสิทธิภาพในการเปลี่ยนแปลงจากหน้าหนึ่งไปยังหน้าต่อไป

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

การสนับสนุนของเบราเซอร์

  • Internet Explorer 10 สนับสนุนการเปลี่ยนแปลง 3D (รุ่นเก่าไม่สนับสนุน)
  • Opera ยังไม่สนับสนุนการเปลี่ยนแปลง 3D

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

<a href="#anylink" data-transition="slide">ฝั่งไปที่หน้าสอง</a>

ตารางด้านล่างแสดงรายการการเปลี่ยนแปลงที่สามารถใช้ร่วมกับคุณสมบัติ data-transition:

การเปลี่ยนแปลง คำอธิบาย ทดสอบ
fade โดยมาตรฐาน ฝั่งเข้าหรือออกที่หน้าต่อไป ทดสอบ
flip ฉีดหลังมาขึ้นที่หน้าต่อไป ทดสอบ
flow โยนหน้าปัจจุบันเข้าไปที่หน้าต่อไป ทดสอบ
pop เหมือนหน้าต่างประกาศที่ไปที่หน้าต่อไป ทดสอบ
slide ลากจากขวาไปทางซ้ายที่หน้าต่อไป ทดสอบ
slidefade ลากจากขวาไปทางซ้ายและฝั่งเข้าหรือออกที่หน้าต่อไป ทดสอบ
slideup ลากจากล่างขึ้นไปที่หน้าต่อไป ทดสอบ
slidedown ลากจากบนลงไปที่หน้าต่อไป ทดสอบ
turn ไปที่หน้าต่อไป ทดสอบ
none ไม่มีประสิทธิภาพการเปลี่ยนแปลง ทดสอบ

คำแนะนำ:ใน jQuery Mobile ฝั่งที่มีประสิทธิภาพที่จะฝั่งเข้าหรือออกทางลิงก์ทั้งหมด (ถ้าเบราเซอร์สนับสนุน)

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

ตัวอย่าง

<a href="#pagetwo" data-transition="slide" data-direction="reverse">เลื่อน</a>

ลองด้วยตัวเอง