Artikel ini terutama mempelajari plug -in JavaScript - mendengarkan gulir.
1. Kasus
Plug-in mendengarkan gulir dapat secara otomatis memperbarui tanda navigasi yang sesuai sesuai dengan posisi bilah gulir. Anda dapat mencoba menggulir halaman ini dan melihat perubahan navigasi di sebelah kiri.
Pertama -tama pasang kode yang diimplementasikan, Anda dapat memeriksa efeknya dengan menguji kode.
<! Doctype html> <html> <head> <title> bootstrap </itement> <meta name = "viewport" content = "width = perangkat-lebar, skala awal = 1.0"> <!-bootstrap-> <tautan href = "css" scraytrap "ifeet" ifeet "ifeet" ifeet "ifeet" ifeet "ifeet" ifeet "ifeet" ifeet " src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https:/soss.maxcdn.com/libs/respespespent.js/1.3.0/ospespess. type = "text/css"> .scrollspy-example {height: 200px; meluap: otomatis; Posisi: kerabat; Perbatasan: 1px solid red; } </tyle> </head> <body> <div> <nav id = "navbar-example" role = "navigation"> <von> <tombol type = "Tombol"-koggle = "collapse" data-target = ". BS-JS-NAVBAR-SCROLLSPY"> <span> sakel </button> <a href = "#"> Nama proyek </a> </div> <div> <ul> <li> <a href = "#fat">@fat </a> </li> <li> <a href = "#mdo">@mdo </a> </li> <li> <a href = "#"#"navlown =" navluk = "DATEK =" DATADDOP = "DATED/" DATAD "#" <b></b></a> <ul role="menu" aria-labelledby="navbarDrop1"> <li><a href="#one" tabindex="-1">one</a></li> <li><a href="#two" tabindex="-1">two</a></li> <li></li> <li><a href="#three" TabIndex = "-1"> tiga </a> </li> </ul> </li> </li> </li> </li> </div> </bav> <div data-offset = "0" data-spy = "gulir" target = "#navbar-legar"> <h4 id = "fat">@fat </h4. Pitchfork yr enim lo-fi sebelum mereka menjual qui. Tumblr Farm-to-Table Rights Apapun. Anim Keffiyeh Carles Cardigan. Velit Seitan McSweeney's Photo Booth 3 Wolf Moon Irure. Cosby Sweater Lomo Jean Shorts, Williamsburg hoodie minimum qui Anda mungkin belum pernah mendengar tentang mereka dan dana trust Cardigan Culpa biodiesel Wes Anderson estetika. Nihil tato accusamus, kredo ironi biodiesel keffiyeh artisan ullamco konsekuensi. </p> <h4 id = "mdo">@mdo </h4> <p> Veniam marfa kumis skateboard, adipisicing fugiat velit pitchfork bear. Freegan Bear Aliqua Cupidat McSweeney's Vero. Cupidat empat Loko Nisi, EA Helvetica Nulla Carles. Tato Cosby Sweater Food Truck, McSweeney's Quis Non Freegan Vinyl. Lo-Fi Wes Anderson +1 Sartorial. Latihan Non Estetika Carles Quis Gentrify. BROOKLYN ADIPISICING BEER CRAFT VICE KEYTAR Deserunt. </p> <H4 ID = "One"> One </h4> <p> Occaecat Commodo Aliqua delectus. Fap Craft Beer Deserunt Skateboard ea. Hak Sepeda Lomo Memperbaiki Banh Mi, Velit Ea Sunt Level Berikutnya Locavore Kopi Origin Tunggal di Magna Venia. High Life ID Vinyl, Echo Park Consequat quis Aliquip Banh Mi Pitchfork. Vero Vhs est Adipisicing. Consectetur nisi DIY tas messenger minimum. Cred Ex in, Delectus Berkelanjutan terdiri dari pack fanny iPhone. </p> <h4 id = "dua"> dua </h4> <p> Di Incididunt Echo Park, Proident Master Cleansat Thundercats Venia yang didiami oleh Deserunt McSweeney. Excecteur VHS Elit, Proident Shoreditch +1 Biodiesel Laborum Craft Beer. Wayfarers Coffee Origin Single IRURE Four Loko, Cupidat Terry Richardson Master Cleanse. Assumenda Anda mungkin belum pernah mendengar tentang mereka Paket Fanny Pesta Seni, Tato Nulla Cardigan Temporal AD. Proident Wolf Nesciunt Sartorial Keffiyeh Eu Banh Mi Sustainable. Elit Wolf Voluptat, lo-fi ea Portland sebelum mereka menjual empat Loko. Locavore enim nostrud mlkshk brooklyn nesciunt. </p> <h4 id = "tiga"> tiga </h4> <p> Legging iklan keytar, Brunch ID Art Party Dolor Labor. Pitchfork yr enim lo-fi sebelum mereka menjual qui. Tumblr Farm-to-Table Rights Apapun. Anim Keffiyeh Carles Cardigan. Velit Seitan McSweeney's Photo Booth 3 Wolf Moon Irure. Cosby Sweater Lomo Jean Shorts, Williamsburg hoodie minimum qui Anda mungkin belum pernah mendengar tentang mereka dan dana trust Cardigan Culpa biodiesel Wes Anderson estetika. Nihil tato accusamus, kredo ironi biodiesel keffiyeh artisan ullamco konsekuensi. </p> <p> Keytar twee blog, Culpa Messenger Bag Marfa apa pun truk makanan Delectus. Sapiente Synth ID Assumenda. Locavore sed helvetica ironi klise, Thundercats Anda mungkin belum pernah mendengar mereka konsekuensi hoodie lo-fi fap aliquip yang bebas gluten. Tempat Elit Buruh Sebelum mereka terjual habis, Terry Richardson Proident Brunch Nesciunt Quis Cosby Sweater Pariatur Keffiyeh Ut Helvetica Artisan. Cardigan Craft Beer Seitan Readymade Velit. VHS Chambray Laboris Veniam sementara. 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> </hotstrap>Penggunaan 1-- Melalui Atribut Data
Dengan menambahkannya ke div untuk elemen halaman yang perlu Anda dengarkan (biasanya) tetapi menambahkannya ke div, Anda dapat melihat kode sendiri. Kemudian tambahkan atribut data-spy = "gulir" ke div untuk dengan mudah menambahkan fungsi mendengarkan gulir ke bilah navigasi atas. Kemudian tambahkan atribut target data ke dalamnya, nilai atribut ini adalah ID atau kelas elemen induk dari komponen .nav di bootstrap apa pun.
Salin kode sebagai berikut: <Div Data-offset = "0" data-spy = "gulir" data-target = "#navbar-example">
...........
</div>
Alamat tautan navigasi harus memiliki target yang sesuai
Alamat tautan di bilah navigasi harus memiliki elemen halaman yang sesuai dengan nilai ID yang sama.
Penggunaan 2-- Melalui JavaScript
Mulailah menggulir mendengarkan melalui JavaScript:
<script type = "text/javaScript"> $ (function () {$ ('. scrollspy-example'). scrollspy ({target: '#navbar-example'});}) </skrip>Hapus properti target data dengan menempatkan kelas gaya sebagai scrollspy-example div. Ini juga memungkinkan Anda untuk mengganti roda mouse.
2. Metode
.scrollspy ('refresh')
Saat menggunakan plugin mendengarkan gulir, metode ini perlu dipanggil setiap kali elemen halaman ditambahkan atau dihapus dari DOM di halaman, sebagai berikut:
Salin kode kode sebagai berikut: $ ('[data-spy = "scroll"]'). Masing-masing (function () {var $ spy = $ (this) .scrollspy ('refresh')}))
3. Opsi
Opsi dapat dilewati melalui properti data atau JavaScript. Untuk atribut data, Anda perlu meletakkan nama opsi setelah data-, misalnya data-offset = "".
4. Acara
<script type = "text/javascript"> $ ('#navbar-example'). on ('activate.bs.scrollspy', function () {waspada (1);}) </script>Akhirnya, Catatan: Tentu saja, Anda perlu menambahkan bilah gulir ke konten pemantauan pengguliran, yaitu, Anda perlu menambahkan gaya terlebih dahulu.
<style type = "text/css"> .scrollspy-example {height: 200px; meluap: otomatis; Posisi: kerabat; Perbatasan: 1px solid red; } </style>Berikan konten div tinggi tertentu.
Di atas adalah catatan pembelajaran untuk menggulir bootstrap dan memantau konten terkait. Jika Anda masih ingin melanjutkan belajar bootstrap, Anda dapat mengklik di sini untuk melanjutkan belajar. Saya harap ini akan membantu pembelajaran Anda. Saya juga berharap Anda akan terus memperhatikan konten yang lebih menarik dari wulin.com.