บทความนี้ส่วนใหญ่แนะนำการใช้เอฟเฟกต์การสลับหน้าต่างๆและกล่องโต้ตอบโมดอลสำหรับคุณ มันแนะนำเทคนิคการใช้องค์ประกอบหน้าต่างๆของ HTML5 ในรายละเอียดเพิ่มเติม มันใช้งานได้จริงมาก เพื่อนที่ต้องการมันสามารถอ้างถึงมันได้
บทความนี้สรุปเอฟเฟกต์การสลับหน้าต่างๆและการใช้กล่องโต้ตอบแบบโมดัลของ HTML5 โดยละเอียด แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:
หน้าภาพเคลื่อนไหว :คุณสมบัติการเปลี่ยนข้อมูลสามารถกำหนดเอฟเฟกต์ภาพเคลื่อนไหวของการสลับหน้า
ตัวอย่างเช่น: <a href = index.html data-transition = pop> ฉันจะป๊อป </a>
ตารางพารามิเตอร์การเปลี่ยนข้อมูล:
คำอธิบายพารามิเตอร์
เลื่อนจากขวาไปซ้ายไปซ้าย
Slideup เลื่อนขึ้นจากด้านล่าง
เลื่อนสไลด์ทาวน์จากบนลงล่างใน
ป๊อปค่อยๆขยายจากศูนย์กลาง
จางค่อยๆปรากฏขึ้นเรื่อย ๆ
พลิก
หมายเหตุ: หากคุณต้องการแสดงปุ่มย้อนกลับในหน้าเป้าหมายคุณสามารถเพิ่มแอตทริบิวต์ข้อมูล = ย้อนกลับไปยังลิงค์ แอตทริบิวต์นี้เหมือนกับ Data-Back = TRUE ดั้งเดิม ฉันไม่รู้ว่าแอตทริบิวต์ใดจะถูกเก็บไว้ในเวอร์ชันอย่างเป็นทางการ
กล่องโต้ตอบโมดอลกล่องโต้ตอบแบบโมดอลเป็นเลเยอร์การลอยแบบหลอกพร้อมแถบชื่อเรื่องโค้งมนและปุ่มปิดสำหรับกิจกรรมพิเศษ หน้าโครงสร้างใด ๆ สามารถใช้เพื่อใช้แอปพลิเคชันโต้ตอบแบบโมดอลโดยใช้ลิงก์ Data-Rel = Dialog
ตัวอย่างเช่น: <a href = foo.html data-rel = กล่องโต้ตอบ> เปิดกล่องโต้ตอบ </a>
เอฟเฟกต์การสลับหน้านี้ยังสามารถใช้เอฟเฟกต์พารามิเตอร์การเปลี่ยนข้อมูลของหน้ามาตรฐาน ขอแนะนำให้ใช้พารามิเตอร์ป๊อปสไลด์และพลิกเพื่อให้ได้ผลลัพธ์ที่ดีขึ้น
กล่องโต้ตอบโมดอลนี้จะสร้างปุ่มปิดโดยค่าเริ่มต้นซึ่งใช้เพื่อกลับไปที่หน้าหลัก บนอุปกรณ์ที่มีความสามารถในการเขียนสคริปต์ที่อ่อนแอคุณยังสามารถเพิ่มลิงค์ด้วย data-rel = กลับไปใช้ปุ่มปิด
สำหรับอุปกรณ์ที่รองรับสคริปต์คุณสามารถใช้ href =# หรือ data-rel = กลับเพื่อให้ได้การปิด นอกจากนี้คุณยังสามารถใช้วิธีการปิดในตัวเพื่อปิดกล่องโต้ตอบโมดอลเช่น: $ ('. ui-dialog') กล่องโต้ตอบ ('close')
เนื่องจากกล่องโต้ตอบโมดอลเป็นหน้าชั่วคราวที่แสดงแบบไดนามิกหน้านี้จะไม่ถูกบันทึกไว้ในตารางแฮชซึ่งหมายความว่าเราไม่สามารถถอยกลับไปยังหน้านี้ได้ ตัวอย่างเช่นหากคุณคลิกลิงก์ในหน้า A เพื่อเปิดกล่องโต้ตอบ B การดำเนินการจะเสร็จสมบูรณ์และกล่องโต้ตอบปิดแล้วข้ามไปที่หน้า C ในเวลานี้คุณคลิกปุ่มย้อนกลับของเบราว์เซอร์และคุณจะกลับไปที่หน้า A ไม่ใช่หน้า B
แถบเครื่องมือแถบเครื่องมือส่วนใหญ่จะใช้ในส่วนหัวส่วนท้ายและพื้นที่อื่น ๆ และใช้เพื่อสนับสนุนและใช้งานแอปพลิเคชันของฟังก์ชั่นทางธุรกิจในหน้า JQuery Mobile เป็นโซลูชันที่ค่อนข้างสมบูรณ์
แถบเครื่องมือแบ่งออกเป็นสามแอปพลิเคชัน: แถบส่วนหัว, ส่วนท้ายบาร์และการนำทาง (NAV Bar)
ในหมู่พวกเขาชื่อและส่วนท้ายจะถูกนำไปใช้ในบางวิธีในหน้า แถบเครื่องมือเริ่มต้นอยู่ในตำแหน่งแบบอินไลน์ วิธีการวางตำแหน่งนี้สามารถบรรลุความเข้ากันได้สูงสุดรวมถึงการเพิ่มประสิทธิภาพที่ดีสำหรับอุปกรณ์ที่มีสคริปต์ที่ไม่ดีและความเข้ากันได้ของ CSS
อีกวิธีหนึ่งคือการแก้ไขซึ่งสามารถคงที่ วิธีการวางตำแหน่งนี้ช่วยให้แถบเครื่องมือถูกเก็บไว้ที่ด้านบนหรือด้านล่างของหน้าจอเสมอ และคุณสามารถยอมรับเหตุการณ์คลิกเพื่อแสดง/ซ่อนแถบเครื่องมือซึ่งบรรลุเป้าหมายในการเพิ่มพื้นที่หน้าจอให้สูงสุด
วิธีการใช้งาน: เพิ่มตำแหน่งข้อมูล = คงที่แอตทริบิวต์ไปยังพื้นที่ชื่อและส่วนท้าย
คอนเทนเนอร์ชื่อคอนเทนเนอร์ชื่อเรื่องเป็นตัวควบคุมการแสดงผลสำหรับพื้นที่ส่วนหัวของหน้าซึ่งส่วนใหญ่ใช้เพื่อแสดงชื่อและพื้นที่การดำเนินการหลัก
รหัสโครงสร้าง:
คัดลอกรหัส