สร้างวิดเจ็ตแบบแท็บตอบสนองด้วย GridTab

มันง่ายกว่าเสมอในการสร้างเว็บไซต์โดยใช้ เครื่องมือโอเพนซอร์ซ แทนที่จะประดิษฐ์ล้อใหม่ เครื่องมือเหล่านี้มีตั้งแต่ไลบรารีไปจนถึงปลั๊กอินขนาดเล็ก แต่คุณสามารถหาวิธีแก้ปัญหาสำหรับสิ่งใดก็ได้.

ปรากฎการณ์ ปลั๊กอิน jQuery GridTab เป็นตัวอย่างที่ดีอย่างหนึ่ง จะช่วยให้คุณ ตั้งค่ากริดที่กำหนดเอง, กำหนดจุดพัก, และ สร้างวิดเจ็ตแบบแท็บที่ตอบสนองได้ ที่เหมาะกับเว็บไซต์ใด ๆ.

คุณสามารถเพิ่มคลาส CSS ของคุณเองหรือทำงานกับคลาสที่มีอยู่เพื่อสร้างคุณสมบัติแท็บที่เหมาะกับการออกแบบของคุณ ปลั๊กอินนี้ยังรองรับ องค์ประกอบการนำทางสำหรับการควบคุมครั้งต่อไป / ก่อนหน้า และ สลับระหว่างแท็บ.

การติดตั้งนั้นง่ายและต้องการเพียงการ jQuery library เป็นการพึ่งพา. เมื่อติดตั้งแล้วคุณสามารถคว้า GridTab จาก npm หรือดาวน์โหลดโดยตรงจาก GitHub.

โปรดทราบว่าปลั๊กอินวิดเจ็ตแบบแท็บนี้มี สไตล์เริ่มต้น, ดังนั้นมันจึงมี สไตล์ชีท CSS แยกต่างหาก ด้านบนของไฟล์ปลั๊กอิน JS แต่คุณสามารถผสาน CSS นี้เป็นของคุณเองเพื่อลดคำขอ HTTP.

ในการเริ่มต้นปลั๊กอินคุณเพียงแค่ผ่าน ขนาดกริดรวม พร้อมด้วย พารามิเตอร์ทางเลือกใด ๆ (ทั้งหมดอยู่ใน GitHub).

นี่เป็นเรื่องง่าย สคริปต์การเริ่มต้น:

 $ (เอกสาร). ready (function () $ ('# gridtab-1'). gridtab (grid: 3);); 

การตั้งค่ารวมถึง ตัวเลือกที่กำหนดเอง, สไตล์การตอบสนอง, การตั้งค่าเส้นขอบ / ช่องว่างภายใน / สี, และแน่นอน ฟังก์ชั่นการโทรกลับ.

คุณอาจอยากรู้ว่ามันทำงานอย่างไรและดูเหมือนว่าในเบราว์เซอร์ของคุณ ตรวจสอบ “สาธิตการใช้งาน” เพื่อดู ตัวอย่างเล็ก ๆ น้อย ๆ, รวมไปถึง รหัสที่มาดิบ คุณสามารถคัดลอก.

คนส่วนใหญ่คิดว่าแท็บเป็นคุณสมบัติสำหรับวิดเจ็ตโปรไฟล์ขนาดเล็ก อย่างไรก็ตาม, เว็บไซต์ผลงาน ยังสามารถใช้ประโยชน์จาก กริดที่มีคุณสมบัติแท็บ และปลั๊กอิน GridTab เป็นแหล่งข้อมูลที่ดีที่สุดสำหรับการเพิ่มเอฟเฟกต์นี้.

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