Dieser Artikel lernt hauptsächlich das JavaScript -Plug -In - Scrollen -Hören.
1. Fall
Das Scroll-Listening-Plug-In kann die entsprechenden Navigationsmarken automatisch gemäß der Position der Bildlaufleiste aktualisieren. Sie können versuchen, diese Seite zu scrollen und die Änderungen in der Navigation links anzusehen.
Wenn Sie zunächst den implementierten Code einlegen, können Sie den Effekt überprüfen, indem Sie den Code testen.
<! DocType html> <html> <Head> <title> Bootstrap </title> <meta name = "viewPort" content = "width = Gerätebreite, initial-scale = 1,0"> <! <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https type = "text/CSS"> .ScrollSpy-Beispiel {Höhe: 200px; Überlauf: Auto; Position: Relativ; Grenze: 1px solide Rot; } </style> </head> <body> <div> <nav id = "navbar-example" rollen = "navigation"> <div> <button type </button> <a href="#">Project Name</a> </div> <div> <ul> <li><a href="#fat">@fat</a></li> <li><a href="#mdo">@mdo</a></li> <li> <a href="#" id="navbarDrop1" data-toggle="dropdown">Dropdown <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"> Drei </a> </li> </ul> </li> </li> </li> </li> </div> </nav> <divs-daten-offset = "0" data-spy = "scroll" data-target = "#navbar-example"> <h4 id = "fat@fat@fat </h4> <p> <p. Pitchfork Yr Enim Lo-Fi Bevor sie Qui ausverkauft haben. Tumblr Farm-to-Table-Fahrradrechte was auch immer. Anim Keffiyeh Carles Cardigan. Velit Seitan McSweeneys Fotokabine 3 Wolf Moon IRure. Cosby -Pullover Lomo Jean Shorts, Williamsburg Hoodie Minimum Qui Sie haben wahrscheinlich noch nicht von ihnen gehört und den Fonds Culpa Biodiesel Wes Anderson Ästhetik von Cardigan Trust Fund. Nihil Tätowierter AkuSamus, Credy Irony Biodiesel Keffiyeh Artisan Ullamco Konsequenz. Frean Bear Aliqua Cupidat McSweeneys Vero. Cupidat Four Loko Nisi, Ea Helvetica Nulla Carles. Tätowierter Cosby -Pullover -Food -Truck, McSweeneys Quis Non Freadegan Vinyl. Lo-Fi Wes Anderson +1 Sartorial. Carles Nicht -ästhetische Bewegung Quis Gentrify. Brooklyn Adipisicing Craft Beer Vice Keytar Deserunt. FAP Craft Beer Deserunt Skateboard EA. LOMO BICY RECHT RECHT APISICING BANH MI, VELIT EA SUNT Nächster Stufe Locavore Single-Origin-Kaffee in Magna Venia. High Life ID Vinyl, Echo Park Folgendes Quis Aliquip Banh Mi Pitchfork. Vero VHS Est Adipisicing. Nisie Nisi DIY Mindest Messenger -Tasche. Cred EX IN, Sustainable Delectus bestehen das iPhone des Fanny Packs. Außer EREUR VHS ELIT, Produziert Shoreditch +1 Biodiesel Laborum Craft Beer. Single-Ursprung-Kaffee-Wayfarers IRure Four Loko, Cupidat Terry Richardson Master Cleanse. Angenommen, Sie haben wahrscheinlich noch nichts von ihnen gehört, Kunstparty Fanny Pack, tätowierte Nulla Cardigan Temporale Anzeige. Produzierter Wolf Nesciunt Sartorial Keffiyeh Eu Banh Mi nachhaltig. Elit Wolf Voluptate, Lo-Fi EA Portland, bevor sie vier Loko ausverkauft hatten. Locavore Enim Nostrud Mlkshk Brooklyn Nesciunt. Pitchfork Yr Enim Lo-Fi Bevor sie Qui ausverkauft haben. Tumblr Farm-to-Table-Fahrradrechte was auch immer. Anim Keffiyeh Carles Cardigan. Velit Seitan McSweeneys Fotokabine 3 Wolf Moon IRure. Cosby -Pullover Lomo Jean Shorts, Williamsburg Hoodie Minimum Qui Sie haben wahrscheinlich noch nicht von ihnen gehört und den Fonds Culpa Biodiesel Wes Anderson Ästhetik von Cardigan Trust Fund. Nihil Tätowierter AkuSamus, Credy Irony Biodiesel Keffiyeh Artisan Ullamco Konsequenz. Sapiente Synth ID Assumenda. Locavore Sed Helvetica Klischee Ironie, Thundercats, die Sie wahrscheinlich nicht von ihnen gehört haben, wodurch der Hoodie glutenfrei lo-fap aliquip ist. Labour Elit Place Bevor sie ausverkauft waren, Terry Richardson Produzierer Brunch Nesciunt Quis Cosby -Pullover Pariatur Keffiyeh Ut Helvetica Artisan. Cardigan Craft Beer Seitan Readymade Velit. VHS Chambray Laboris Temporäres Veniam. Anim Mollit Minimal Commodo Ullamco Thundercats. </p> </div> </div> <script src = "js/jQuery-2.0.3.minVerwendung 1- durch Datenattribut
Wenn Sie es für die Seitenelemente hinzufügen, die Sie (normalerweise) anhören müssen, aber sie zum DIV hinzufügen müssen, können Sie den Code selbst sehen. Fügen Sie dann die Attributdaten-Spy = "Scrollen" zum Div hinzu, um der oberen Navigationsleiste problemlos die Hörfunktion zu fügen. Fügen Sie dann das Data-Ziel-Attribut hinzu, der Wert dieses Attributs ist die ID oder Klasse des übergeordneten Elements der .nav-Komponente in einer beliebigen Bootstrap.
Kopieren Sie den Code wie folgt: <div data-offset = "0" data-spy = "scroll" data-target = "#navbar-exampel">
...........
</div>
Die Navigationsverbindungsadresse muss ein entsprechendes Ziel haben
Die Linkadresse in der Navigationsleiste muss das entsprechende Seitenelement mit demselben ID -Wert haben.
Verwendung 2- durch JavaScript
Starten Sie das Hören über JavaScript:
<script type = "text/javaScript"> $ (function () {$ ('. ScrollSpy-Exampe'). ScrollSpy ({Ziel: '#navbar-exampel'});}) </script>Entfernen Sie seine Daten-Ziel-Eigenschaft, indem Sie die Stilklasse als Scrollspy-Example Div einstellen. Auf diese Weise können Sie auch das Mausrad schalten.
2. Methode
.ScrollSpy ('Aktualisieren')
Bei Verwendung des Scroll -Listening -Plugins muss diese Methode aufgerufen werden, wenn ein Seitenelement wie folgt aus der DOM hinzugefügt oder gelöscht wird:
Kopieren Sie den Code-Code wie folgt: $ ('[data-spy = "scrollen"]'). Jede (Funktion () {var $ spy = $ (this) .ScrollSpy ('refresh')})
3. Optionen
Optionen können durch Dateneigenschaften oder JavaScript weitergeleitet werden. Für Datenattribute müssen Sie den Optionsnamen nach Daten einfügen, z. B. Data-offset = "".
4. Ereignisse
<script type = "text/javaScript"> $ ('#navbar-example'). on ('active.bs.scrollspy', function () {alert (1);}) </script>HINWEIS: Natürlich müssen Sie dem Inhalt der Scrolling -Überwachung Bildlaufleisten hinzufügen, dh Sie müssen im Voraus Stile hinzufügen.
<style type = "text/CSS"> .Scrollspy-Exampe {Höhe: 200px; Überlauf: Auto; Position: Relativ; Grenze: 1px solide Rot; } </style>Geben Sie den Div -Inhalt eine bestimmte Höhe.
Die oben genannten sind die Lernnotizen für Bootstrap -Scrollen und Überwachung des verwandten Inhalts. Wenn Sie weiterhin Bootstrap lernen möchten, können Sie hier klicken, um weiter zu lernen. Ich hoffe, es wird für Ihr Lernen hilfreich sein. Ich hoffe auch, dass Sie weiterhin auf aufregende Inhalte von Wulin.com achten werden.