สารบัญ:
เทคนิคที่สำคัญในการพัฒนาเว็บ HTML5 และ CSS3 คือการใช้อินเตอร์เฟซแบบแท็บใน AJAX ซึ่งช่วยให้ผู้ใช้สามารถเปลี่ยนเนื้อหาของเซ็กเมนต์ได้โดยการเลือกแท็บชุดใดชุดหนึ่ง
ในอินเทอร์เฟซแบบแท็บสามารถมองเห็นได้เพียงชิ้นเดียวในเวลาเดียวกัน แต่แท็บจะมองเห็นได้ทั้งหมด อินเทอร์เฟซแบบแท็บจะสามารถคาดเดาได้ง่ายกว่าหีบเพลงเพราะแท็บต่างๆ (ไม่เหมือนกับส่วนหัวของหีบเพลง) อยู่ในที่เดียวกัน
แท็บเปลี่ยนสีเพื่อระบุว่าแท็บใดที่มีการเน้นสีและพวกเขายังเปลี่ยนสถานะ (โดยปกติด้วยการเปลี่ยนสี) เพื่อระบุว่ากำลังถูกเลื่อนเมาส์ไปอยู่ เมื่อคุณคลิกแท็บอื่นพื้นที่เนื้อหาหลักของวิดเจ็ตจะถูกแทนที่ด้วยเนื้อหาที่เกี่ยวข้อง
นี่คือสิ่งที่เกิดขึ้นเมื่อผู้ใช้คลิกแท็บ
เช่นเดียวกับหีบเพลงผลของแท็บทำได้ง่ายอย่างเหลือเชื่อ ดูรหัส:
$ (init); ฟังก์ชัน init () {$ ("# tabs") แท็บ ();} html
แท็บการสาธิต
- หนังสือ 1
- หนังสือ 2
- หนังสือ 3
หนังสือ I - การสร้างมูลนิธิ HTML
จัดรูปแบบข้อความ
- ตัวเลือกลำดับชั้นและสไตล์
- เส้นขอบและพื้นหลัง
- ระดับ CSS
- หนังสือ III - ใช้ Positional CSS สำหรับเค้าโครง
- ความสนุกกับการเป็นนิยายการลอยตัว
การสร้างหน้าแปลนแบบลอย
- การจัดรูปแบบรายการและเมนู
- การใช้ตำแหน่งทางเลือก
- กลไกในการสร้างอินเทอร์เฟซสำหรับแท็บจะคล้ายกับ accordions:
- เพิ่มไฟล์ที่ต้องการทั้งหมด
เช่นเดียวกับผล jQuery UI ส่วนใหญ่คุณต้องมี jQuery, jQuery UI และไฟล์ CSS ธีม นอกจากนี้คุณต้องเข้าถึงไดเรกทอรีรูปภาพสำหรับกราฟิกพื้นหลังของธีม
-
สร้าง HTML ตามปกติ
ถ้าคุณสร้างหน้าเว็บที่มีการจัดระเบียบอยู่แล้วคุณก็ใกล้กันแล้ว
-
สร้าง div ที่มีข้อมูลแท็บทั้งหมด
นี่คือองค์ประกอบที่คุณจะทำกับเวทมนตร์ของ jQuery
-
วางเนื้อหาหลักใน divs ที่ระบุ
เนื้อหาแต่ละส่วนที่จะแสดงเป็นเพจควรอยู่ใน div พร้อมกับ ID ที่อธิบาย แต่ละ div เหล่านี้ควรอยู่ในแท็บ div
-
เพิ่มรายการลิงก์ท้องถิ่นลงในเนื้อหา
สร้างเมนูการเชื่อมโยง วางไว้ที่ด้านบนสุดของ div ที่จัดหน้าแท็บ ลิงก์แต่ละลิงก์ควรเป็นลิงก์ท้องถิ่นกับหนึ่งใน divs ตัวอย่างเช่นดัชนีมีลักษณะดังนี้:
-
Book 1
Book 2
- Book 3
- สร้างฟังก์ชัน init () ตามปกติ
- ใช้เทคนิค jQuery แบบปกติ
-
เรียกใช้แท็บ () ใน div หลัก
เหลือเชื่อโค้ด jQuery หนึ่งบรรทัดจะทำงานทั้งหมด
