บทความนี้ส่วนใหญ่เรียนรู้ปลั๊กอิน JavaScript - การเลื่อนการฟัง
1. กรณี
ปลั๊กอินการฟังแบบเลื่อนสามารถอัปเดตเครื่องหมายการนำทางที่สอดคล้องกันโดยอัตโนมัติตามตำแหน่งของแถบเลื่อน คุณสามารถลองเลื่อนหน้านี้และดูการเปลี่ยนแปลงในการนำทางทางด้านซ้าย
ก่อนที่จะใส่รหัสที่ใช้งานคุณสามารถตรวจสอบผลกระทบได้โดยการทดสอบรหัส
<! doctype html> <html> <head> <head> <title> bootstrap </title> <meta name = "viewport" content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1.0"> <! <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/responding.js/ type = "text/css"> .scrollspy-example {ความสูง: 200px; ล้น: อัตโนมัติ; ตำแหน่ง: ญาติ; ชายแดน: 1px ของแข็งสีแดง; } </style> </head> <body> <div> <nav id = "navbar- ตัวอย่าง" role = "การนำทาง"> <div> <button type = "ปุ่ม" data-toggle = "การล่มสลาย" data-target = ". bs-js-navbar-scrollspy" </button> <a href = "#"> ชื่อโครงการ </a> </vel> <div> <ul> <li> <a href = "#fat">@fat </a> </li> <li> <a href = "#mdo">@mdo </a> </li> <li> <b> </b> </a> <ul role = "เมนู" aria-labelledby = "navbardrop1"> <li> <a href = "#one" tabindex = "-1"> หนึ่ง </a> </li> <li> <a href = "#สอง" tabindex = "-1" tabindex = "-1"> สาม </a> </li></ul> </li> </li> </li> </li> </v> </av> <div data-offset = "0" data-spy = "Scroll" data-target = "#navbar-example"> <h4 id = "fat" Pitchfork yr enim lo-fi ก่อนที่พวกเขาจะขายหมด Qui Tumblr Farm-to-table Bicycle Rights Anim Keffiyeh Carles Cardigan บูธภาพถ่ายของ Velit Seitan McSweeney 3 Wolf Moon Irure เสื้อกันหนาวคอสบี Lomo Jean กางเกงขาสั้น Williamsburg Hoodie ขั้นต่ำ Qui คุณอาจไม่เคยได้ยินพวกเขาและกองทุน Cardigan Trust Culpa Biodiesel Wes Anderson Aesthetic Nihil รอยสัก Accusamus, cred biodiesel biodiesel keffiyeh ullamco ullamco ผลที่ตามมา </p> <h4 id = "mdo">@mdo </h4> <p> Veniam Marfa Mustacheboard Freegan Bear Aliqua Cupidat McSweeney's Vero Cupidat Four Loko Nisi, EA Helvetica Nulla Carles Tattooed Cosby Sweater Food Food Truck, Quis Non Freegan Vinyl ของ McSweeney Lo-Fi Wes Anderson +1 Sartorial carles non non spishing quis quis gentrify Brooklyn Adipisicing Craft Beer Vice Keytar Deserunt. </p> <H4 id = "One"> One </h4> <p> Occaecat Commodo Aliqua Delectus FAP Craft Beer Deserunt Skateboard EA Lomo Bicycle Rights Appisicing Banh MI, Velit EA Sunt ระดับถัดไป Locavore กาแฟต้นกำเนิดเดียวใน Magna Venia ไวนิลชีวิตสูง, Echo Park ผลที่ตามมา quis liquip banh mi pitchfork Vero VHS est adipisicing consectetur nisi diy กระเป๋าผู้ส่งสารต่ำสุด Cred Ex in, Delectus อย่างยั่งยืนประกอบด้วย Fanny Pack iPhone. </p> <h4 id = "สอง"> สอง </h4> <p> ในสวน Echo Incididunt, Deserunt McSweeney Master ของ McSweeney ทำความสะอาด Thundercats Sapiente Venia ยกเว้นผู้ที่มีความต้องการ VHS, ProIdent Shoreditch +1 Biodiesel Laborum Craft Beer ร้านกาแฟต้นฉบับเดี่ยว Irure สี่ Loko, Cupidat Terry Richardson Master Cleanse Assumenda คุณอาจไม่เคยได้ยินพวกเขาเกี่ยวกับพวกเขาปาร์ตี้ศิลปะ Fanny Pack, Tattooed Nulla Cardigan โฆษณาชั่วคราว Proident Wolf Nesciunt แต่งตัวผู้ชาย Keffiyeh Eu Banh Mi ยั่งยืน Elit Wolf Voluptate, Lo-Fi EA Portland ก่อนที่พวกเขาจะขาย Loko สี่ตัว locavore enim nostrud mlkshk brooklyn nesciunt. </p> <h4 id = "สาม"> สาม </h4> <p> ad leggings keytar, บรันช์ id Art Party Dolor แรงงาน Pitchfork yr enim lo-fi ก่อนที่พวกเขาจะขายหมด Qui Tumblr Farm-to-table Bicycle Rights Anim Keffiyeh Carles Cardigan บูธภาพถ่ายของ Velit Seitan McSweeney 3 Wolf Moon Irure เสื้อกันหนาวคอสบี Lomo Jean กางเกงขาสั้น Williamsburg Hoodie ขั้นต่ำ Qui คุณอาจไม่เคยได้ยินพวกเขาและกองทุน Cardigan Trust Culpa Biodiesel Wes Anderson Aesthetic Nihil Tattooed Accusamus, Cred Biodiesel Biodiesel Keffiyeh Artisan Ullamco ผลที่ตามมา </p> <p> บล็อก Twee Keytar, Culpa Messenger Bag Marfa ไม่ว่ารถบรรทุกอาหาร DELECTUS SAPIENTE SYNTH ID ASSUMENDA Locavore Sed Helvetica ถ้อยคำที่เบื่อหู, Thundercats ที่คุณอาจไม่เคยได้ยินว่าพวกเขาเป็นผลมาจาก Hoodie ปราศจากกลูเตน Lo-Fi FAP Aliquip สถานที่แรงงานก่อนที่พวกเขาจะขายหมดเทอร์รี่ริชาร์ดสันบรันช์ Nesciunt Quis Cosby เสื้อกันหนาว Pariatur Keffiyeh ut Helvetica Artisan Cardigan Craft Beer Seitan Readymade Velit VHS Chambray Laboris ชั่วคราว Veniam Anim Mollit Minimal Commodo Ullamco Thundercats </p> </div> </div> <script src = "js/jQuery-2.0.3.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> </body> </html>การใช้งาน 1-- ผ่านคุณลักษณะข้อมูล
โดยการเพิ่มลงใน div สำหรับองค์ประกอบหน้าคุณต้องฟัง (โดยปกติ) แต่เพิ่มลงใน div คุณสามารถดูรหัสด้วยตัวเอง จากนั้นเพิ่มแอตทริบิวต์ Data-Spy = "Scroll" ลงใน DIV เพื่อเพิ่มฟังก์ชั่นการฟังการเลื่อนลงในแถบการนำทางด้านบนได้อย่างง่ายดาย จากนั้นเพิ่มแอตทริบิวต์ข้อมูลข้อมูลข้อมูลลงไปในนั้นค่าของแอตทริบิวต์นี้คือ ID หรือคลาสขององค์ประกอบหลักขององค์ประกอบ. NAV ใน bootstrap ใด ๆ
คัดลอกรหัสดังนี้: <div data-offset = "0" data-spy = "scroll" data-target = "#navbar- ตัวอย่าง">
-
</div>
ที่อยู่ลิงก์นำทางจะต้องมีเป้าหมายที่สอดคล้องกัน
ที่อยู่ลิงค์ในแถบการนำทางจะต้องมีองค์ประกอบหน้าเว็บที่สอดคล้องกันด้วยค่า ID เดียวกัน
การใช้งาน 2-- ผ่าน JavaScript
เริ่มเลื่อนการฟังผ่าน JavaScript:
<script type = "text/javascript"> $ (function () {$ ('. scrollspy-example'). scrollspy ({เป้าหมาย: '#navbar-example'});}) </script>ลบคุณสมบัติข้อมูลเป้าหมายโดยวางคลาสสไตล์เป็น Div Scrollspy-Example Div นอกจากนี้ยังช่วยให้คุณเปลี่ยนล้อเมาส์
2. วิธี
.Scrollspy ('รีเฟรช')
เมื่อใช้ปลั๊กอินการฟังแบบเลื่อนวิธีนี้จะต้องมีการเรียกใช้เมื่อใดก็ตามที่องค์ประกอบหน้าจะถูกเพิ่มหรือลบออกจาก DOM ในหน้าดังนี้:
คัดลอกรหัสรหัสดังนี้: $ ('[data-spy = "scroll"]'). แต่ละ (ฟังก์ชั่น () {var $ spy = $ (นี่) .scrollspy ('รีเฟรช')})
3. ตัวเลือก
ตัวเลือกสามารถส่งผ่านคุณสมบัติข้อมูลหรือ JavaScript สำหรับแอตทริบิวต์ข้อมูลคุณต้องใส่ชื่อตัวเลือกหลังจาก data- ตัวอย่างเช่น data-offset = ""
4. เหตุการณ์
<script type = "text/javascript"> $ ('#navbar-example'). on ('activate.bs.scrollspy', function () {Alert (1);}) </script>ในที่สุดหมายเหตุ: แน่นอนคุณต้องเพิ่มแถบเลื่อนลงในเนื้อหาของการตรวจสอบการเลื่อนนั่นคือคุณต้องเพิ่มสไตล์ล่วงหน้า
<style type = "text/css"> .scrollspy-example {ความสูง: 200px; ล้น: อัตโนมัติ; ตำแหน่ง: ญาติ; ชายแดน: 1px ของแข็งสีแดง; } </style>ให้เนื้อหา DIV สูง
ข้างต้นคือบันทึกการเรียนรู้สำหรับการเลื่อน bootstrap และการตรวจสอบเนื้อหาที่เกี่ยวข้อง หากคุณยังต้องการเรียนรู้ bootstrap ต่อไปคุณสามารถคลิกที่นี่เพื่อเรียนรู้ต่อไป ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของคุณ ฉันหวังว่าคุณจะยังคงให้ความสนใจกับเนื้อหาที่น่าตื่นเต้นมากขึ้นจาก Wulin.com