บทความนี้ส่วนใหญ่เรียนรู้เกี่ยวกับ JavaScript Plug -in - Folding
1. เอฟเฟกต์การเปลี่ยนแปลง
เกี่ยวกับเอฟเฟกต์การเปลี่ยนแปลง
สำหรับเอฟเฟกต์การเปลี่ยนแปลงอย่างง่ายเพียงแนะนำ transition.js และไฟล์ JS อื่น ๆ ด้วยกัน หากคุณใช้ไฟล์ bootstrap.js ที่รวบรวม (หรือบีบอัด) คุณไม่จำเป็นต้องแนะนำแยกต่างหาก
มีอะไรอยู่ข้างใน
Transition.js เป็นตัวช่วยขั้นพื้นฐานสำหรับเหตุการณ์การเปลี่ยนผ่านและยังเป็นการจำลองผลกระทบของการเปลี่ยนแปลง CSS มันถูกใช้โดยปลั๊กอินอื่น ๆ เพื่อตรวจสอบว่าเบราว์เซอร์ปัจจุบันรองรับเอฟเฟกต์การเปลี่ยนแปลง CSS หรือไม่
2. พับ
ให้สไตล์พื้นฐานและการสนับสนุนที่ยืดหยุ่นสำหรับส่วนประกอบที่รองรับฟังก์ชั่นการพับเช่น acrondions และการนำทาง
การพึ่งพาปลั๊กอิน
ปลั๊กอินยุบขึ้นอยู่กับปลั๊กอินการเปลี่ยนแปลง
กรณี
การใช้ปลั๊กอินแบบพับได้ส่วนประกอบ Acron แบบง่ายถูกสร้างขึ้นโดยการขยายส่วนประกอบของแผง
มาดูเอฟเฟกต์ก่อน
จากนั้นมาดูการใช้งานรหัส
<div style = "margin-top: 140px;"> <div id = "หีบเพลง"> <div> <div> <h4> <a data-toggle = "การล่มสลาย" data-toggle = "collapse" data-parent = "#corction" href = "#collapseone"> reprehenderit, enim eiusmod High Life Accusamus Terry Richardson Ad Squid 3 Wolf Moon เป็นทางการ, Non Cupidat Skateboard Dolor Brunch รถบรรทุกอาหาร quinoa nesciunt laborum eiusmod บรันช์ 3 Wolf Moon Tempor, Sunt Aliqua วางนกไว้บนปลาหมึกกาแฟต้นฉบับ Nulla Assumenda Shoreditch และ Nihil Anim Keffiyeh Helvetica งานฝีมือเบียร์ Wes Anderson ให้เครดิต Nesciunt Sapiente EA Proident โฆษณามังสวิรัติยกเว้น Butcher Vice Lomo Leggings Occaecat Craft Beer Farm-to-Table, Synth Synth Nesciunt ความงามของยีนส์ดิบคุณอาจไม่เคยได้ยินพวกเขาเกี่ยวกับ Accusamus แรงงาน VHS ยั่งยืน </div> </div> </div> <div> <h4> <a data-toggle = "การล่มสลาย" data-toggle = "การล่มสลาย" data-parent = "#accordion" href = "#collapsetwo"> รายการที่ยุบตัวลง ปลาหมึก. 3 Wolf Moon เป็นทางการ, Non Cupidatat Skateboard Dolor Brunch รถบรรทุกอาหาร quinoa nesciunt laborum eiusmod บรันช์ 3 Wolf Moon Tempor, Sunt Aliqua วางนกไว้บนปลาหมึกกาแฟต้นฉบับ Nulla Assumenda Shoreditch และ Nihil Anim Keffiyeh Helvetica งานฝีมือเบียร์ Wes Anderson ให้เครดิต Nesciunt Sapiente EA Proident โฆษณามังสวิรัติยกเว้น Butcher Vice Lomo Leggings Occaecat Craft Beer Farm-to-Table, Synth Synth Nesciunt ความงามของยีนส์ดิบคุณอาจไม่เคยได้ยินพวกเขาเกี่ยวกับ Accusamus แรงงาน VHS ยั่งยืน </div> </div> </div> <div> <h4> <a data-toggle = "การล่มสลาย" data-toggle = "การล่มสลาย" data-parent = "#accordion" href = "#clolapsethree"> รายการที่สามารถเรียกใช้งานได้#3 </a> </h4> Accusamus Terry Richardson Ad Squid 3 Wolf Moon อย่างเป็นทางการ aute, non cupidatat skateboard บรันช์ Dolor รถบรรทุกอาหาร quinoa nesciunt laborum eiusmod บรันช์ 3 Wolf Moon Tempor, Sunt Aliqua วางนกไว้บนปลาหมึกกาแฟต้นฉบับ Nulla Assumenda Shoreditch และ Nihil Anim Keffiyeh Helvetica งานฝีมือเบียร์ Wes Anderson ให้เครดิต Nesciunt Sapiente EA Proident โฆษณามังสวิรัติยกเว้น Butcher Vice Lomo Leggings Occucaecat Craft Beer Farm-to-Table, Synth Synth Nesciunt ความงามของยีนส์ดิบคุณอาจไม่เคยได้ยินพวกเขาเกี่ยวกับ Accusamus แรงงาน VHS ยั่งยืน </div> </div> </div> </div> </div> </div>
ขั้นตอนที่ 1: ขั้นแรกชั้นนอกสุดของกลุ่มแผงรวมหลายกลุ่มด้านล่าง
ขั้นตอนที่ 2: ดูกลุ่มง่ายๆ
<div> <h4> <a data-toggle = "ยุบ" data-toggle = "ยุบ" data-parent = "#accordion" href = "#clolapseone"> รายการกลุ่มที่สามารถยุบได้#1 </a> </h4> </div> <div id = "collapseone"
โครงสร้างของพาเนลสามารถมองเห็นได้อย่างชัดเจนผ่านรหัส
หัวแผงและ pandl-body จากนั้นแผงหัวสามารถมีชื่อและลิงก์ เชื่อมต่อกับแผงควบคุมผ่านลิงก์
ขั้นตอนที่ 3: คุณสามารถพบว่ามี ID = "หีบเพลง" ในกลุ่มพาเนลและจากนั้นจะมี data-parent = "#accordion" ในลิงค์ภายใต้แต่ละชื่อด้านล่าง
หากถูกลบออกเอฟเฟกต์คือหลังจากคลิกที่ลิงค์อื่น ๆ แผงควบคุมดั้งเดิมจะไม่หดตัวอีกครั้ง
คุณสามารถแสดงเอฟเฟกต์ของการพับด้วยวิธีอื่น
<div style = "margin-top: 140px;"> <button type = "ปุ่ม" data-toggle = "การล่มสลาย" data-target = "#demo"> การล่มสลายอย่างง่าย </button> <div id = "Demo"> Anim Pariatur cliche reprehenderit 3 Wolf Moon อย่างเป็นทางการ Aute, Non Cupidat Skateboard Dolor Brunch รถบรรทุกอาหาร quinoa nesciunt laborum eiusmod บรันช์ 3 Wolf Moon Tempor, Sunt Aliqua วางนกไว้บนปลาหมึกกาแฟต้นฉบับ Nulla Assumenda Shoreditch และ Nihil Anim Keffiyeh Helvetica งานฝีมือเบียร์ Wes Anderson ให้เครดิต Nesciunt Sapiente EA Proident โฆษณามังสวิรัติยกเว้น Butcher Vice Lomo Leggings Occaecat Craft Beer Farm-to-Table, Raw Denim Aesthetic Synth Nesciunt คุณอาจไม่เคยได้ยินว่าพวกเขา Accusamus แรงงานยั่งยืน VHS อย่างยั่งยืน </div>
การใช้งาน
ปลั๊กอินพับควบคุมสไตล์ผ่านคลาสง่าย ๆ หลายคลาส
.Collapse ซ่อนเนื้อหา
.Collapse ในเนื้อหาการแสดง
.Collapseses มันจะถูกเพิ่มเข้ามาเมื่อการเปลี่ยนแปลงเริ่มต้นและลบออกเมื่อเสร็จสิ้นอาจหมายความว่าเอฟเฟกต์การเปลี่ยนแปลงจะพร้อมใช้งานหลังจากเพิ่มการพับแล้วถ้ามันถูกลบออกมันจะสิ้นสุดลง
ผ่านคุณลักษณะข้อมูล
เพียงแค่เพิ่ม data-toggle = "ล่มสลาย" และเป้าหมายข้อมูลลงในองค์ประกอบหน้าจะให้ความสามารถในการควบคุมองค์ประกอบหน้าเว็บที่ยุบได้ คุณสมบัติเป้าหมายข้อมูลยอมรับตัวเลือก CSS เป็นวัตถุควบคุม ตรวจสอบให้แน่ใจว่าได้เพิ่มคลาสการยุบลงในองค์ประกอบหน้ายุบ หากคุณต้องการสถานะเริ่มต้นขององค์ประกอบหน้ายุบตัวให้เพิ่มขึ้นให้เพิ่มในชั้นเรียน
ในการเพิ่มคอนโทรลเลอร์ลงในชุดขององค์ประกอบหน้าแบบพับได้ให้เพิ่ม data-parent = "#selector" โปรดดูตัวอย่างข้างต้น
ผ่าน JavaScript
<button type = "ปุ่ม" onclick = "Open ()"> เปิด </button> <button type = "ปุ่ม" onclick = "hide ()"> fold </button> <div id = "Demo"> Anim Pariatur cliche reprehenderit 3 Wolf Moon อย่างเป็นทางการ Aute, Non Cupidat Skateboard Dolor Brunch รถบรรทุกอาหาร quinoa nesciunt laborum eiusmod บรันช์ 3 Wolf Moon Tempor, Sunt Aliqua วางนกไว้บนปลาหมึกกาแฟต้นฉบับ Nulla Assumenda Shoreditch และ Nihil Anim Keffiyeh Helvetica งานฝีมือเบียร์ Wes Anderson ให้เครดิต Nesciunt Sapiente EA Proident โฆษณามังสวิรัติยกเว้น Butcher Vice Lomo Leggings Occucaecat Craft Beer Farm-to-Table, Raw Denim Aesthetic Synth Nesciunt คุณอาจไม่เคยได้ยินว่าพวกเขา Accusamus แรงงานยั่งยืน VHS อย่างยั่งยืน </div> <div id = "หีบเพลง" สไตล์ = "ขอบด้านบน: 240px;">>
<script type = "text/javascript"> $ (function () {$ ("#demo"). การล่มสลาย ({toggle: false})}) function () {$ ("#demo"). การล่มสลาย ("แสดง"); } ฟังก์ชั่นซ่อน () {$ ("#demo"). การล่มสลาย ("ซ่อน"); } </script>ดูเอฟเฟกต์ข้างต้น
วิธี
ให้องค์ประกอบหน้าเป็นฟังก์ชั่นที่ยุบได้ ยอมรับวัตถุเสริมเป็นอาร์กิวเมนต์
$ ("#demo"). การล่มสลาย ({toggle: false})
ด้วยวิธีนี้องค์ประกอบจะถูกขยายเมื่อเริ่มต้น
1. การล่มสลาย ('สลับ') แสดงหรือซ่อนองค์ประกอบหน้าเว็บที่ยุบได้
2.Collapse ('show') แสดงองค์ประกอบหน้ายุบได้
3.Collapse ('ซ่อน') ซ่อนองค์ประกอบหน้าเว็บที่ยุบได้
เหตุการณ์
ปลั๊กอินที่ยุบใน bootstrap จะเปิดเผยชุดของเหตุการณ์ที่สามารถฟังได้
สิ่งนี้ผูกมัดเหตุการณ์ที่ซ่อนอยู่กับองค์ประกอบ
หากคุณยังต้องการเรียนรู้อย่างลึก
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน