Das Scroll Monitoring (ScrollSpy) Plug-In, dh die automatische Aktualisierung des Navigationsplug-Ins, aktualisiert automatisch das entsprechende Navigationsziel gemäß der Position der Scrollleiste. Seine grundlegende Implementierung besteht darin, die Navigationsleiste auf der Basis der Bildlaufleiste auf dem Scrollen in die Navigationsleiste hinzuzufügen.
Wenn Sie auf die Funktionalität des Plugins separat verweisen möchten, müssen Sie scrollspy.js verweisen. Oder, wie im Kapitel "Bootstrap Plugin" erwähnt, können Sie unter Bootstrap.js oder komprimierten Versionen von Bootstrap.min.js verweisen.
1. Nutzung
Sie können der oberen Navigation das Hörverhalten des Scrolls hinzufügen:
1. Durch das Datenattribut: Datenspy = "Scrollen" zu dem Element hinzufügen, auf das Sie sich anhören möchten (normalerweise Körper). Fügen Sie dann das Attributdaten-Ziel mit der ID des übergeordneten Elements der Bootstrap .nav-Komponente oder der Eigenschaft der Klasse hinzu. Damit es ordnungsgemäß funktioniert, müssen Sie sicherstellen, dass es Elemente im Körper der Seite gibt, die der ID des Links übereinstimmen, die Sie hören möchten.
<body data-spy = "scroll" data-target = ". navbar-exampel"> ... <div> <ul> ... </ul> </div> ... </body>
2. Über JavaScript: Sie können die Bildlaufüberwachung über JavaScript aufrufen, das zu hörene Element auswählen und dann die Funktion .ScrollSpy () aufrufen:
$ ('body'). scrollspy ({Ziel: '.navbar-example'})
2. Scrollenüberwachung
Mit dem Scroll-Listening-Plug-In werden die Navigationselemente automatisch auf der Basis der Position der Bildlaufleiste automatisch aktualisiert, und die angegebenen Navigationselemente angezeigt.
//Basic Example<nav id="nav"> <a href="#">Web Development</a> <ul> <li> <a href="#html5">HTML5</a> </li> <li> <a href="#bootstrap">Bootstrap</a> </li> <li> <a href="#" data-toggle="dropdown">JavaScript <span> </span> </a> <ul> <li> <a href = "#jQuery"> jQuery </a> </li> <li> <a href = "#yui"> yui </a> </li> <li> <a href = "#extjs">; Data-offset = "0" data-target = "#nav" data-spy = "scroll" style = "height: 200px; Überlauf: auto; Position: relativ; padding: 0 10px; HTML5 und andere Standards wurden zurückgelassen. Um die Entwicklung der Web-Standardisierungsbewegung zu fördern, haben sich einige Unternehmen zusammengetan, um eine Arbeitsgruppe für Webhypertext-Anwendungs-Technologie (Web-Organisation der Arbeitsgruppe für Hypertext-Anwendungstechnologie zu erstellen. Waswg ist Web-Formularen und Anwendungen gewidmet, während W3C (World Wide Web Consortium) konzentriert ist. id = "Bootstrap"> Bootstrap </h4> <p> Bootstrap aus Twitter ist derzeit ein sehr beliebtes Front-End-Rahmen. Bootstrap bietet elegante HTML- und CSS-Spezifikationen, die in der dynamischen CSS-Sprache weniger geschrieben wurden. Für die Leistungsoptimierung Nachfolgende Versionen unterstützen den IE6/7/8-Browser nicht mehr. HTML-Seite vom HTML-Inhalt getrennt. Wie bei einem Regen ist es auf dem Desktop -Browser und der mobilen Seite, die die Entwicklungsmaterialien zu ermöglichen <h4 id = "extjs"> extjs </h4> <p> extjs können zur Entwicklung von RIA verwendet werden, dh AJAX-Anwendungen. EXTJS basierte ursprünglich auf der YUI-Technologie und organisiert von Entwickler Jackslocum visuelle Komponenten, indem sie sich auf Javaswing und andere Mechanismen beziehen
Es gibt zwei wichtige Attribute, wie in der folgenden Abbildung gezeigt:
PS: In einem Menü und einer einfachen Zeit kann das Data-Ziel auch stabil sein, um die Überwachung des Scrolling-Überwachung ohne Einstellung zu realisieren. Wenn Sie jedoch bei mehreren Navigationen keinen von ihnen verknüpfen, verursacht dies einen Fehler, sodass es normalerweise hinzugefügt werden muss.
Wenn Sie die JavaScript-Skriptmethode verwenden, können Sie Daten entfernen und Skriptattributdefinitionen verwenden: Offset, Spy und Target. Die spezifischen Methoden sind wie folgt:
// Definieren Sie die Eigenschaft $ ('#content'). ScrollSpy ({Offset: 0, Ziel: '#nav',});Es gibt auch eine Veranstaltung, um zu einem neuen Eintrag zu wechseln.
// Ereignisse sind an die Navigation gebunden
$ ('#nav'). on ('active.bs.scrollspy', function () {
Alert ('Dieses Ereignis wird ausgelöst, nachdem ein neuer Eintrag aktiviert ist!');
});
Es gibt auch eine Möglichkeit, den Container -DOM beim Scrollen -Hören zu aktualisieren.
// HTML -Teil
<ABSECTION> <H4 ID = "HTML5"> HTML5 <a href = "#" Onclick = "RemoveSec (this)"> Löschen
// beim Löschen von Inhalten die DOM aktualisieren, um eine Fehlausrichtung der Navigationsüberwachung zu vermeiden
Funktion removesec (e) {$ (e) .PARENTEN ('. Sec'). REMET (); $ ('#content'). scrollSpy ('aktualisieren');}HINWEIS: Diese Methode muss Daten verwenden.* Deklarativ.
Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.