วิธีสร้างอินเทอร์เฟซแบบแท็บใน AJAX สำหรับ HTML5 และ CSS3 การเขียนโปรแกรม - dummies

เทคนิคที่สำคัญในการพัฒนาเว็บ HTML5 และ CSS3 คือการใช้อินเตอร์เฟซแบบแท็บใน AJAX ซึ่งช่วยให้ผู้ใช้สามารถเปลี่ยนเนื้อหาของเซ็กเมนต์ได้โดยการเลือกแท็บชุดใดชุดหนึ่ง

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

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

นี่คือสิ่งที่เกิดขึ้นเมื่อผู้ใช้คลิกแท็บ

เช่นเดียวกับหีบเพลงผลของแท็บทำได้ง่ายอย่างเหลือเชื่อ ดูรหัส:

$ (init); ฟังก์ชัน init () {$ ("# tabs") แท็บ ();} html

แท็บการสาธิต

หนังสือ 1
หนังสือ 2
หนังสือ 3


หนังสือ I - การสร้างมูลนิธิ HTML

การเลือกเครื่องมือ
การจัดการข้อมูลด้วยรายการและตาราง
การเชื่อมต่อด้วยลิงค์
การเพิ่มรูปภาพ
การสร้าง แบบฟอร์ม
Book II - จัดรูปแบบด้วย CSS
การระบายสีโลก


จัดรูปแบบข้อความ

ตัวเลือกลำดับชั้นและสไตล์
เส้นขอบและพื้นหลัง
ระดับ CSS
หนังสือ III - ใช้ Positional CSS สำหรับเค้าโครง
ความสนุกกับการเป็นนิยายการลอยตัว


การสร้างหน้าแปลนแบบลอย

การจัดรูปแบบรายการและเมนู
การใช้ตำแหน่งทางเลือก
กลไกในการสร้างอินเทอร์เฟซสำหรับแท็บจะคล้ายกับ accordions:
เพิ่มไฟล์ที่ต้องการทั้งหมด

เช่นเดียวกับผล jQuery UI ส่วนใหญ่คุณต้องมี jQuery, jQuery UI และไฟล์ CSS ธีม นอกจากนี้คุณต้องเข้าถึงไดเรกทอรีรูปภาพสำหรับกราฟิกพื้นหลังของธีม

1. สร้าง HTML ตามปกติ

   ถ้าคุณสร้างหน้าเว็บที่มีการจัดระเบียบอยู่แล้วคุณก็ใกล้กันแล้ว

2. สร้าง div ที่มีข้อมูลแท็บทั้งหมด

   นี่คือองค์ประกอบที่คุณจะทำกับเวทมนตร์ของ jQuery

3. วางเนื้อหาหลักใน divs ที่ระบุ

   เนื้อหาแต่ละส่วนที่จะแสดงเป็นเพจควรอยู่ใน div พร้อมกับ ID ที่อธิบาย แต่ละ div เหล่านี้ควรอยู่ในแท็บ div

4. เพิ่มรายการลิงก์ท้องถิ่นลงในเนื้อหา

   สร้างเมนูการเชื่อมโยง วางไว้ที่ด้านบนสุดของ div ที่จัดหน้าแท็บ ลิงก์แต่ละลิงก์ควรเป็นลิงก์ท้องถิ่นกับหนึ่งใน divs ตัวอย่างเช่นดัชนีมีลักษณะดังนี้:

5. Book 1

   Book 2

   
   Book 3
   สร้างฟังก์ชัน init () ตามปกติ
   ใช้เทคนิค jQuery แบบปกติ
   
   

6. เรียกใช้แท็บ () ใน div หลัก

   เหลือเชื่อโค้ด jQuery หนึ่งบรรทัดจะทำงานทั้งหมด