Plug-in pemantauan gulir (scrollspy), yaitu, pembaruan otomatis plug-in navigasi, akan secara otomatis memperbarui target navigasi yang sesuai sesuai dengan posisi bilah gulir. Implementasinya yang mendasar adalah untuk menambahkan kelas aktif ke bilah navigasi berdasarkan posisi scrollbar saat Anda menggulir.
Jika Anda ingin merujuk fungsionalitas plugin secara terpisah, maka Anda perlu referensi scrollspy.js. Atau, sebagaimana disebutkan dalam bab ikhtisar plugin Bootstrap, Anda dapat merujuk ke bootstrap.js atau versi terkompresi bootstrap.min.js.
1. Penggunaan
Anda dapat menambahkan perilaku mendengarkan gulir ke navigasi teratas:
1. Melalui atribut data: Tambahkan data-spy = "gulir" ke elemen yang ingin Anda dengarkan (biasanya tubuh). Kemudian tambahkan target data atribut dengan ID elemen induk dari komponen bootstrap .nav atau properti kelas. Agar dapat bekerja dengan baik, Anda harus memastikan bahwa ada elemen di tubuh halaman yang cocok dengan ID tautan yang ingin Anda dengarkan.
<body data-spy = "scroll" data-target = ". navbar-example"> ... <div> <ul> ... </ul> </div> ... </body>
2. Melalui JavaScript: Anda dapat memanggil pemantauan gulir melalui JavaScript, pilih elemen yang akan didengarkan, dan kemudian panggil fungsi .scrollspy ():
$ ('body'). scrollspy ({target: '.navbar-example'})
2. Pemantauan gulir
Plug-in mendengarkan gulir digunakan untuk secara otomatis memperbarui item navigasi berdasarkan posisi di mana bilah gulir berada, dan menampilkan item navigasi yang disorot.
// Contoh Dasar <nav id = "nav"> <a href = "#"> Pengembangan web </a> <ul> <li> <a href = "#html5"> html5 </a> </li> <li> <a href = "#bootstrap"> bootstrap </a> </li> <av = "#"#"#" DATACRAP = "THOVLOP =" THOVLOP = "THOVLOP =" "DATEV =" DATEV = " <span></span></a> <ul> <li> <a href="#jquery">jQuery</a> </li> <li> <a href="#yui">Yui</a> </li> <li> <a href="#extjs">Extjs</a> </li> </li> </li> </li> </ul></nav><div Data-offset = "0" data-target = "#nav" data-spy = "scroll" style = "tinggi: 200px; overflow: auto; posisi: relatif; padding: 0 10px;"> <h4 id = "html5" html5 </h4> <p> Aplikasi html di bawah lemaria standar universal. HTML5 dan standar lainnya tertinggal. Untuk mempromosikan pengembangan gerakan standardisasi web, beberapa perusahaan bergabung untuk membangun kelompok kerja teknologi aplikasi hypertext web (organisasi web dari kelompok kerja teknologi hypertext yang dikerjakan. ID = "Bootstrap"> Bootstrap </h4> <p> Bootstrap, dari Twitter, saat ini merupakan kerangka kerja front-end yang sangat populer. Bootstrap menyediakan spesifikasi HTML dan CSS yang elegan, yang ditulis dalam bahasa CSS yang dinamis lebih sedikit. Kode Sumber untuk Kinerja Versi selanjutnya tidak akan lagi mendukung browser IE6/7/8. halaman html terpisah dari konten html. Visi seperti jamur setelah hujan, dan itu luar biasa. Masa Depan. Java, PHP, dll. Extjs awalnya didasarkan pada teknologi YUI dan dikembangkan oleh pengembang Jackslocum
Ada dua atribut penting, seperti yang ditunjukkan pada gambar di bawah ini:
PS: Dalam menu dan waktu yang mudah, target data juga bisa stabil untuk mewujudkan sorotan pemantauan gulir tanpa pengaturan. Tetapi ketika Anda tidak mengaitkan salah satunya ketika beberapa navigasi, itu akan menyebabkan kesalahan, jadi biasanya perlu ditambahkan.
Jika Anda menggunakan metode skrip JavaScript, Anda dapat menghapus data-* dan menggunakan definisi atribut skrip: Offset, Spy, dan Target. Metode spesifiknya adalah sebagai berikut:
// Tentukan properti $ ('#konten'). ScrollSpy ({offset: 0, target: '#nav',});Ada juga acara untuk beralih ke entri baru.
// Acara pasti akan navigasi
$ ('#nav'). on ('activate.bs.scrollspy', function () {
Peringatan ('Acara ini dipicu setelah entri baru diaktifkan!');
});
Ada juga cara untuk memperbarui DOM kontainer dalam mendengarkan dengan menggulir.
// bagian html
<section> <h4 id = "html5"> html5 <a href = "#" ontClick = "RemoveSec (this)"> Hapus ini </a> </h4> <p> ... </p> </sticing>
// Saat menghapus konten, segarkan DOM untuk menghindari ketidakselarasan pemantauan navigasi
fungsi hapus (e) {$ (e) .parents ('. sec'). Remove (); $ ('#konten'). ScrollSpy ('Refresh');}Catatan: Metode ini harus menggunakan data-* deklaratif.
Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.