การผสมผสานที่ลงตัวของแท็บ bootstrap และปลั๊กอินก่ออิฐ

Bootstrap เป็นหนึ่งในกรอบการทำงานส่วนหน้ายอดนิยมมากที่สุด การใช้ bootstrap ในโครงการของคุณคุณสามารถใช้หน้าเว็บที่ตอบสนองได้อย่างรวดเร็ว

หากคุณพยายามใช้การก่ออิฐและส่วนประกอบแท็บของหนึ่งในส่วนประกอบ JavaScript ที่จัดทำโดย Bootstrap คุณจะพบพฤติกรรมที่น่ารำคาญมากมาย

ฉันได้พบบทความนี้และบทความนี้มุ่งเน้นไปที่ปัญหานี้คืออะไรและคุณต้องการแก้ไขอย่างไร

แท็บของ Bootstrap

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

หากคุณมีเนื้อหาเว็บที่ดีกว่าในบล็อกแยกต่างหากแทนที่จะแออัดในที่เดียวองค์ประกอบของแท็บประเภทนี้อาจมีประโยชน์

ทำไม Maronry?

ในบางกรณีเนื้อหาภายในแต่ละแผงเหมาะสำหรับการแสดงภายในรูปแบบกริดที่ตอบสนองได้ ตัวอย่างเช่นรายการสินค้าบริการและรายการโฟลเดอร์เป็นประเภทเนื้อหาทั้งหมดที่สามารถแสดงในรูปแบบกริด

อย่างไรก็ตามหากกริดของกริดไม่สูงเท่ากันบางสิ่งที่คุณสามารถเห็นด้านล่างจะเกิดขึ้น

ทั้งสองบรรทัดถูกยืดออกโดยระยะห่างขนาดใหญ่ทำให้เค้าโครงดูน่าเกลียด

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

การตั้งค่าหน้าสาธิต

การสร้างหน้าตัวอย่างเพื่อแสดงวิธีการรวมแท็บและการก่ออิฐของ Bootstrap ไม่ง่ายอย่างที่คาดไว้

กรณีการสาธิตในบทความนี้ขึ้นอยู่กับเทมเพลตเริ่มต้นที่มีอยู่ในเว็บไซต์ bootstrap

แต่ละโครงการกริดในแผงแท็บถูกสร้างขึ้นโดยใช้ระบบกริดของ Bootstrap และส่วนประกอบขนาดย่อ นี่คือตัวอย่างรหัสเพื่ออธิบายโครงสร้าง:

 <div> <div> <img src = "http://lorempixel.com/200/200/abstract"> <div> <h3> ฉลากภาพย่อ </h3> <p> ... </p> <p> <a href = "#" ปุ่ม = "ปุ่ม"> ปุ่ม </a> <a href = "#"#"#" role = "ปุ่ม"> ปุ่ม </a> </p> </div> </div> <!-ทำซ้ำอีกสองครั้ง ...->

รหัสด้านบนสร้างกริดที่มีสามคอลัมน์บนหน้าจอขนาดใหญ่และสองคอลัมน์บนหน้าจอขนาดเล็ก หากคุณต้องการตรวจสอบระบบกริดของ Bootstrap ความเข้าใจของ Syed Fazle Rahman เกี่ยวกับระบบกริดของ Bootstrap เป็นบทความที่ดี

ส่วนประกอบแท็บในหน้าตัวอย่างมีโครงสร้าง HTML ต่อไปนี้:

 <div role = "TabPanel"> <!-แท็บ NAV-> <ul role = "tablist"> <li role = "การนำเสนอ"> <a href = "#panel-1" aria-controls = "panel-1" role = "tab" data-toggle = "Tab"> panel 1 </a> </li> role = "tab" data-toggle = "แท็บ"> แผง 2 </a> </li> <li role = "การนำเสนอ"> <a href = "#panel-3" Aria-controls = "panel-3" role = "tab" data-toggle = "tab"> แผง 3 </a> </li> role = "tab" data-toggle = "แท็บ"> แผง 4 </a> </li></ul> <!-แผงแท็บ-> <div> <div role = "tabpanel" id = "panel-1"> <div> <div> <! -> </div> <div> <!-รูปขนาดย่อไปที่นี่-> </div> ... </div> <!-สิ้นสุดการก่ออิฐ-คอนเนอร์-> </div> <!-แผงปลายทาง -1-> <div role = "tabpanel" id = "panel-2"> <! Tabpanel ->

นี่คือบันทึกบางส่วนเกี่ยวกับตัวอย่างโค้ดด้านบน:

ความคิดเห็น HTML ชี้ให้เห็นองค์ประกอบสำคัญของแท็บแท็บ: แท็บ NAV ทำเครื่องหมายส่วนการนำทางของแท็บและแผง NAV ทำเครื่องหมายแผงเนื้อหา

ลิงก์ไปยังแท็บเชื่อมต่อกับแผงเนื้อหาที่มีค่าเท่ากันของแอตทริบิวต์ ID ที่เกี่ยวข้องผ่านแอตทริบิวต์ HREF ตัวอย่างเช่นลิงก์ที่มี href = "#panel-1" เปิดแผงเนื้อหาด้วย id = panel-1

แท็กสมอแต่ละอันในส่วนการนำทางมี data-toggle = "แท็บ" แท็กนี้อนุญาตให้องค์ประกอบแท็บทำงานได้โดยไม่ต้องเขียน JavaScript เพิ่มเติม

องค์ประกอบเป้าหมายของ Masonry จำเป็นต้องมีคลาส. masonry-container ซึ่งเหมาะสำหรับองค์ประกอบ div wrapper ที่มีรายการกริดทั้งหมดและยังต้องนำไปใช้กับคลาส. item สำหรับแต่ละรายการกริดเดียว

หากต้องการดูพลังเต็มรูปแบบของห้องสมุดก่ออิฐให้แน่ใจว่ารายการกริดมีความสูงแตกต่างกัน ตัวอย่างเช่นการลบภาพของโครงการหนึ่งย่อหน้าย่อของโครงการอื่น ฯลฯ

สำหรับรหัสที่สมบูรณ์โปรดตรวจสอบรหัสสำหรับตัวอย่างใน codepen

การเพิ่มห้องสมุดก่ออิฐ

คุณสามารถดาวน์โหลด masonry.pkgd.min.js ได้โดยคลิกที่ปุ่ม "ดาวน์โหลด" บนเว็บไซต์ทางการของ Masonry

เพื่อหลีกเลี่ยงปัญหาเลย์เอาต์ผู้เขียนห้องสมุดแนะนำให้ใช้การก่ออิฐกับปลั๊กอินที่โหลดรูปภาพ

การก่ออิฐไม่จำเป็นต้องใช้ jQuery แต่เนื่องจากองค์ประกอบ JavaScript ของ Bootstrap ใช้ jQuery แล้วการเริ่มต้นการก่ออิฐในแบบ jQuery ฉันจะทำให้ชีวิตของตัวเองดีขึ้น

นี่คือตัวอย่างโค้ดที่เราต้องเริ่มต้นการก่ออิฐด้วย jQuery และ imagesloaded

 var $ container = $ ('. masonry-container'); $ container.imagesloaded (function () {$ container.masonry ({columnWidth: '.item', itemSelector: '.item'});});

รหัสด้านบนเก็บ div ที่ห่อรายการกริดทั้งหมดในตัวแปรที่เรียกว่า $ container

ถัดไปการก่ออิฐเริ่มต้นด้วยตัวเลือกที่แนะนำสองตัวเลือกใน $ คอนเทนเนอร์ ตัวเลือก ColumnWidth ระบุความกว้างของคอลัมน์ของกริดแนวนอน ที่นี่ความกว้างของรายการกริดเดียวถูกตั้งค่าโดยใช้ชื่อคลาสของรายการกริดเดียว ตัวเลือก itemSelector ระบุว่าองค์ประกอบลูกที่ใช้เป็นองค์ประกอบโครงการ ที่นี่มันถูกตั้งค่าเป็นรายการกริดเดียว

ตอนนี้ถึงเวลาทดสอบรหัสแล้ว

อ๊ะ! มีอะไรผิดปกติกับแผงที่ซ่อนอยู่?

บนหน้าเว็บที่ไม่ได้ใช้แท็บ bootstrap รหัสด้านบนเป็นเหมือนเวทมนตร์ อย่างไรก็ตามในกรณีนี้คุณจะพบพฤติกรรมที่น่าสนใจในไม่ช้า

ก่อนอื่นมันดูดีเพราะกริดภายในแผงแท็บที่แสดงโดยค่าเริ่มต้นจะปรากฏขึ้นอย่างถูกต้อง:

อย่างไรก็ตามหากคุณคลิกที่ลิงค์นำทางแท็บเพื่อแสดงเนื้อหาของแผงที่ซ่อนอยู่สิ่งต่อไปนี้จะเกิดขึ้น:

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

นั่นไม่ใช่ทั้งหมด การปรับขนาดหน้าต่างเบราว์เซอร์จะช่วยให้รายการกริดเหล่านี้สามารถวางตำแหน่งตัวเองได้อย่างถูกต้อง

มาแก้ไขข้อผิดพลาดของเค้าโครงนี้

เนื่องจากข้อผิดพลาดเลย์เอาต์ที่ไม่คาดคิดนี้ชัดเจนมากขึ้นหลังจากคลิกที่ลิงค์การนำทางของแท็บเรามาดูเหตุการณ์ที่เกิดขึ้นโดยแท็บ bootstrap

รายการเหตุการณ์สั้นมาก ดังนี้

show.bs.tab ทริกเกอร์หน้าแท็บเพื่อแสดง แต่ก่อนหน้าแท็บใหม่จะปรากฏขึ้น

แสดง. bs.tab ทริกเกอร์หน้าแท็บเพื่อแสดงหลังจากหน้าแท็บปรากฏขึ้น

hide.bs.tab ทริกเกอร์เมื่อหน้าแท็บใหม่จะปรากฏขึ้น (ดังนั้นหน้าแท็บที่แสดงก่อนหน้านี้จะถูกซ่อนไว้)

hidden.bs.tab ถูกไล่ออกหลังจากหน้าแท็บใหม่ปรากฏขึ้น (ดังนั้นหน้าแท็บที่แสดงก่อนหน้านี้จะถูกซ่อนไว้)

เนื่องจากเค้าโครงกริดจะยุ่งเหยิงหลังจากหน้าแท็บปรากฏขึ้นเราจึงไปที่เหตุการณ์ show.bs.tab เราวางรหัสที่นี่ด้านล่างรหัสเดิมของเรา:

 $ ('a [data-toggle = tab]'). แต่ละ (ฟังก์ชั่น () {var $ this = $ (this); $ this.on ('shown.bs.tab', function () {$ container.imagesloaded (function () {$ container.masonry ({columnwidth: '.item'

เกิดอะไรขึ้นในรหัสด้านบน:

ฟังก์ชั่น jQuery .Each () วนลูปผ่านลิงค์การนำทางแต่ละแท็บและฟังเหตุการณ์ที่แสดง เมื่อเหตุการณ์นี้ถูกเรียกใช้แผงที่เกี่ยวข้องจะปรากฏขึ้นและการก่ออิฐใหม่จะเริ่มต้นภาพทั้งหมดหลังจากโหลด

มาทดสอบรหัสกันเถอะ

หากคุณติดตามบทความต่อไปนี้ให้เริ่มหน้าตัวอย่างของคุณโดยตรงในเบราว์เซอร์ของคุณหรือลองตัวอย่าง CodePen ด้านล่างเพื่อดูผลลัพธ์

คุณอาจต้องการดูหน้าตัวอย่างเต็มเพื่อทดสอบเอฟเฟกต์การตอบสนองที่ตอบสนอง

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

แค่นั้นงานเสร็จแล้ว!

สรุปแล้ว

ในโพสต์นี้ฉันได้แสดงวิธีการรวมแท็บของ Bootstrap และไลบรารี JavaScript ก่ออิฐ

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