ปลั๊กอิน Scroll Monitoring (ScrollSpy) นั่นคือการอัปเดตอัตโนมัติของปลั๊กอินนำทางจะอัปเดตเป้าหมายการนำทางที่สอดคล้องกันโดยอัตโนมัติตามตำแหน่งของแถบเลื่อน การใช้งานพื้นฐานคือการเพิ่มคลาสที่ใช้งานลงในแถบการนำทางตามตำแหน่งแถบเลื่อนขณะที่คุณเลื่อน
หากคุณต้องการอ้างอิงฟังก์ชั่นของปลั๊กอินแยกกันคุณต้องอ้างอิง scrollspy.js หรือตามที่กล่าวไว้ในบทภาพรวมปลั๊กอิน Bootstrap คุณสามารถอ้างถึง bootstrap.js หรือรุ่นบีบอัดของ bootstrap.min.js
1. การใช้งาน
คุณสามารถเพิ่มพฤติกรรมการฟังแบบเลื่อนไปยังการนำทางด้านบน:
1. ผ่านแอตทริบิวต์ข้อมูล: เพิ่ม data-spy = "scroll" ในองค์ประกอบที่คุณต้องการฟัง (โดยปกติแล้วร่างกาย) จากนั้นเพิ่มเป้าหมายข้อมูลแอตทริบิวต์ด้วย ID ขององค์ประกอบหลักของส่วนประกอบ bootstrap .NAV หรือคุณสมบัติของคลาส เพื่อให้ทำงานได้อย่างถูกต้องคุณต้องตรวจสอบให้แน่ใจว่ามีองค์ประกอบในร่างกายของหน้าเว็บที่ตรงกับ ID ของลิงค์ที่คุณต้องการฟัง
<body data-spy = "scroll" data-target = ". navbar- ตัวอย่าง"> ... <div> <ul> ... </ul> </div> ... </body>
2. ผ่าน JavaScript: คุณสามารถเรียกการตรวจสอบสกรอลผ่าน JavaScript เลือกองค์ประกอบที่จะฟังแล้วเรียกใช้ฟังก์ชัน. scrollspy ():
$ ('body'). scrollspy ({เป้าหมาย: '.navbar- ตัวอย่าง'})
2. การตรวจสอบเลื่อน
ปลั๊กอินการฟังแบบเลื่อนจะใช้เพื่ออัปเดตรายการการนำทางโดยอัตโนมัติตามตำแหน่งที่แถบเลื่อนตั้งอยู่และแสดงรายการการนำทางแสดง
// ตัวอย่างพื้นฐาน <nav id = "nav"> <a href = "#"> การพัฒนาเว็บ </a> <ul> <li> <a href = "#html5"> html5 </a> </li> <li> <a href = "#bootstrap"> <span> </span> </a> <ul> <li> <a href = "#jQuery"> jQuery </a> </li> <li> <a href = "#yui"> yui </a> </li> <li> data-offset = "0" data-target = "#nav" data-spy = "scroll" style = "ความสูง: 200px; overflow: auto; ตำแหน่ง: ญาติ; padding: 0 10px;"> <h4 id = "html5"> html5 </h4> <p> HTML5 และมาตรฐานอื่น ๆ ถูกทิ้งไว้ข้างหลัง เพื่อส่งเสริมการพัฒนาของการเคลื่อนไหวมาตรฐานเว็บบาง บริษัท ได้เข้าร่วมกองกำลังเพื่อสร้างคณะทำงานเทคโนโลยีแอปพลิเคชันเว็บไฮเปอร์เท็กซ์ (องค์กรเว็บของกลุ่มเทคโนโลยีการทำงานของแอปพลิเคชันไฮเปอร์เท็กซ์-whatwg อุทิศให้กับเว็บและแอพพลิเคชั่นในขณะที่ W3c id = "bootstrap"> bootstrap </h4> <p> bootstrap จาก Twitter ปัจจุบันเป็นเฟรมเวิร์กส่วนหน้ายอดนิยมมาก Bootstrap ให้ข้อมูลจำเพาะ HTML และ CSS ที่สง่างามเขียนในภาษา CSS แบบไดนามิกน้อยลง ซอร์สโค้ด Bootstrap สำหรับการเพิ่มประสิทธิภาพการทำงาน 9.0+) เลือกจาก jQuery สามารถแยกหน้า HTML ของผู้ใช้ออกจากเนื้อหา HTML เป็นตัวแทนของ Bootstrap ได้รับการขนานนามว่ามีการมองเห็นเหมือนเห็ดและมีฝนตกชุก เฟรมเวิร์กและยังให้การศึกษาอย่างละเอียดเกี่ยวกับกรอบงานเหล่านี้ในอนาคต Extjs สามารถใช้ในแอปพลิเคชันที่พัฒนาโดยภาษาการพัฒนาที่หลากหลายเช่น. NET, Java, PHP ฯลฯ Extjs นั้นมีพื้นฐานมาจากเทคโนโลยี Yui และได้รับการพัฒนาโดย Jackslocum นักพัฒนาซอฟต์แวร์ </p> </div>
มีคุณลักษณะสำคัญสองประการดังที่แสดงในรูปด้านล่าง:
PS: ในเมนูและเวลาง่าย ๆ เป้าหมายข้อมูลสามารถมีความเสถียรในการรับรู้การตรวจสอบการเลื่อนการตรวจสอบโดยไม่ต้องตั้งค่า แต่เมื่อคุณไม่ได้เชื่อมโยงหนึ่งในนั้นเมื่อมีการนำทางหลายครั้งมันจะทำให้เกิดข้อผิดพลาดดังนั้นจึงจำเป็นต้องเพิ่ม
หากคุณใช้วิธีการเขียนสคริปต์ JavaScript คุณสามารถลบ data-* และใช้คำจำกัดความของสคริปต์แอตทริบิวต์: ออฟเซ็ต, สายลับและเป้าหมาย วิธีการเฉพาะมีดังนี้:
// กำหนดคุณสมบัติ $ ('#content'). scrollspy ({ออฟเซ็ต: 0, เป้าหมาย: '#nav',});นอกจากนี้ยังมีเหตุการณ์ที่จะเปลี่ยนเป็นรายการใหม่
// เหตุการณ์ถูกผูกไว้กับการนำทาง
$ ('#nav'). on ('activate.bs.scrollspy', function () {
การแจ้งเตือน ('เหตุการณ์นี้เกิดขึ้นหลังจากเปิดใช้งานรายการใหม่!');
-
นอกจากนี้ยังมีวิธีอัปเดตคอนเทนเนอร์ DOM ในการเลื่อนการฟัง
// html ส่วน
<section> <h4 id = "html5"> html5 <a href = "#" onclick = "ลบ (นี้)"> ลบสิ่งนี้ </a> </h4> <p> ... </p> </section>
// เมื่อลบเนื้อหาให้รีเฟรช DOM เพื่อหลีกเลี่ยงการตรวจสอบการนำทางที่ไม่ถูกต้อง
ฟังก์ชั่นลบ (e) {$ (e) .parents ('. วินาที') ลบ (); $ ('#content'). scrollspy ('รีเฟรช');}หมายเหตุ: วิธีนี้จะต้องใช้ข้อมูล-* ประกาศ
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน