Bootstrap Scroll-Monitor (Scrollspy) Widget
Scroll-Monitor (Scrollspy) Plug-in, die automatisch aktualisiert das Navigations Widget aktualisiert automatisch die entsprechenden Ziel Navigation auf der Position der Bildlaufleiste basiert. Die grundlegende Implementierung ist , wie Sie blättern, Bildlaufleiste Position basierend.active Klasse hinzugefügt , um die Navigationsleiste.
Wenn Sie auf die einzelnen Plug-in - Funktionen beziehen möchten, müssen Siescrollspy.js zu verweisen.Oder, wie Bootstrap - Plugin Übersicht Kapitel erwähnt, können Sie aufbootstrap.jsoder komprimierte Version vonbootstrap.min.js beziehen.
Verwendung
Sie können eine Rolle zu der Oberseite des Navigationsmonitor Verhalten hinzufügen:
- Durch Datenattribut: wollen Sie auf ein Element ( in der Regel ein Körper) zu hören Daten-spy = "scroll" hinzuzufügen.Dann fügen Sie die ID oder Klasse des übergeordneten Elements mitBootstrap .nav Komponente Attributdaten-Ziel.Denn es richtig funktioniert, müssen Sie sicherstellen, dass es eine Übereinstimmung in den Körper der Seite, die Sie die ID-Monitorelement besteht verknüpfen möchten ist.
<Body Daten-spy = "scroll" Daten-target = ". Navbar-Beispiel"> ... <Div class = "navbar-Beispiel"> <Ul class = "nav nav-Tabs"> ... </ Ul> </ Div> ... </ Body>
- Mit JavaScript: Sie können die JavaScript - Aufruf blättern zu hören, zu hören Elemente auszuwählen, und dann rufen .scrollspy ()Funktion:
. $ ( 'Body') scrollspy ({Ziel: '.navbar-Beispiel'})
Beispiele
Das folgende Beispiel zeigt die Verwendung von Scrollen durch Daten überwachen Attribut (Scrollspy) Plug-in:
Beispiele
<Nav id = "navbar-Beispiel" class = "navbar navbar-default navbar -static" role = "Navigation">
<Div class = "Behälter-Flüssigkeit">
<Div class = "navbar-header">
<Taste class = "navbar-Toggle" type = "button" Daten-Toggle = "Kollaps"
Daten-target = ".bs-js -navbar-scrollspy">
<span class = "sr-only"> Umschalten des Navigations </ span>
<span class = "icon-Bar"> </ span>
<span class = "icon-Bar"> </ span>
<span class = "icon-Bar"> </ span>
</ Button>
<A class = "navbar-Marke" href = "#"> Tutorial - Name </ a>
</ Div>
<Div class = "Zusammenbruch navbar-Zusammenbruch bs -js-navbar-scrollspy">
<Ul class = "nav navbar-nav" >
<Li> <a href = "#ios"> iOS < / a> </ li>
<Li> <a href = "#svn"> SVN < / a> </ li>
<Li class = "Dropdown">
<A href = "#" id = "navbarDrop1" class = "Drop - Down-Toggle"
Daten-Toggle = "Dropdown"> Java <b class = "Caret"> </ b>
</ A>
<Ul class = "Drop - Down-Menü" role = "Menü"
aria-labelledby = "navbarDrop1">
<Li> <a href = "#jmeter" tabindex = "-1"> jmeter < / a> </ li>
<Li> <a href = "#ejb" tabindex = "-1"> ejb < / a> </ li>
<Li class = "Teiler"> </ li>
<Li> <a href = "#spring" tabindex = "-1"> Frühling < / a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
<Div Daten-Spion = "scroll" Daten-target = "# navbar- Beispiel" Daten-Offset = "0"
style = "height: 200px; Überlauf : auto; position: relative;">
<H4 id = "ios"> iOS < / h4>
<P> iOS ist ein entwickeltes und von Apples Handy - Betriebssystem veröffentlicht. zum ersten Mal iPhone, iPod Touch und Apple TV im Jahr 2007 ursprünglich veröffentlicht worden . iOS ist abgeleitet von OS X, teilen sie die Darwin - Stiftung. OS X - Betriebssystem auf einem Mac verwendet wird, iOS ist Apples mobile Version. </ P>
<H4 id = "svn"> SVN < / h4>
<P> Apache Subversion, häufig abgekürzt SVN, ist eine Open - Source - Versionskontrollsystem - Software. CollabNet Subversion von der Firma im Jahr 2000 gegründet. Aber jetzt hat es als ein Projekt der Apache Software Foundation entwickelt wurde , ist es eine reiche Entwickler und User - Communities hat. </ P>
<H4 id = "jmeter"> jMeter < / h4>
<P> jMeter ist ein Open - Source - Test - Software. Es ist 100% pure Java - Anwendung, für Last- und Performance - Tests. </ P>
<H4 id = "ejb"> EJB < / h4>
<P> Enterprise Java Beans (EJB ) ist ein Entwicklungs - Framework eine hoch skalierbare und robuste Unternehmensanwendungen auf einem kompatiblen Anwendungsserver (wie JBOSS, Web Logic, etc.) von J2EE eingesetzt zu erstellen. </ P>
<H4 id = "spring"> Frühling < / h4>
<P> Spring Framework ist ein Open - Source - Java - Plattform für die schnelle Entwicklung von leistungsfähigen Java - Anwendung bietet eine komplette Infrastruktur zu unterstützen. </ P>
<P> Spring - Framework ursprünglich von Rod Johnson geschrieben im Juni 2003 wurde zum ersten Mal unter der Apache - 2.0 - Lizenz veröffentlicht. </ P>
</ Div>
Versuchen »
Die Ergebnisse sind wie folgt:
Optionen
Um passieren Datenattribute oder JavaScript. Die folgende Tabelle enthält die folgenden Optionen:
| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
|---|---|---|---|
| offset | number 默认值：10 | data-offset | 当计算滚动位置时，距离顶部的偏移像素。 |
Weg
.scrollspy ( "Refresh"): Wenn scrollspy von JavaScript - Methode aufrufen, müssen Sie Methode aufrufen .refreshdas DOM zu aktualisieren. Dies ist nützlich, zu ändern (das heißt, Sie hinzufügen oder entfernen, bestimmte Elemente) auftreten, jederzeit des DOM-Elements. Hier ist die Syntax dieser Methode.
$ ( '[Data-spy = "scroll"]'). Jede (function () {
var $ spy = $ (this) .scrollspy ( "Refresh")
})
Beispiele
Das folgende Beispiel zeigt.scrollspy ( "Refresh") Methode:
Beispiele
<Nav id = "myScrollspy" class = "navbar navbar-default navbar -static" role = "Navigation">
<Div class = "Behälter-Flüssigkeit">
<Div class = "navbar-header">
<Taste class = "navbar-Toggle" type = "button" Daten-Toggle = "Kollaps"
Daten-target = ".bs-js -navbar-scrollspy">
<span class = "sr-only"> Umschalten des Navigations </ span>
<span class = "icon-Bar"> </ span>
<span class = "icon-Bar"> </ span>
<span class = "icon-Bar"> </ span>
</ Button>
<A class = "navbar-Marke" href = "#"> Tutorial - Name </ a>
</ Div>
<Div class = "Zusammenbruch navbar-Zusammenbruch bs -js-navbar-scrollspy">
<Ul class = "nav navbar-nav" >
<Li class = "aktiv"> <a href = "#ios"> iOS < / a> </ li>
<Li> <a href = "#svn"> SVN < / a> </ li>
<Li class = "Dropdown">
<A href = "#" id = "navbarDrop1" class = "Drop - Down-Toggle"
Daten-Toggle = "Dropdown"> Java <b class = "Caret"> </ b>
</ A>
<Ul class = "Drop - Down-Menü" role = "Menü"
aria-labelledby = "navbarDrop1">
<Li> <a href = "#jmeter" tabindex = "-1"> jmeter < / a> </ li>
<Li> <a href = "#ejb" tabindex = "-1"> ejb < / a> </ li>
<Li class = "Teiler"> </ li>
<Li> <a href = "#spring" tabindex = "-1"> Frühling < / a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
<Div Daten-Spion = "scroll" Daten-target = "#myScrollspy" Daten-Offset = "0"
style = "height: 200px; Überlauf : auto; position: relative;">
<Div class = "section">
<H4 id = "ios"> iOS < small> <a href = "#" Onclick = "removeSection (this); ">
& Zeiten; entfernen Sie den Teil </ a> </ small>
</ H4>
<P> iOS ist ein entwickeltes und von Apples Handy - Betriebssystem veröffentlicht. zum ersten Mal iPhone, iPod Touch und Apple TV im Jahr 2007 ursprünglich veröffentlicht worden . iOS ist abgeleitet von OS X, teilen sie die Darwin - Stiftung. OS X - Betriebssystem auf einem Mac verwendet wird, iOS ist Apples mobile Version. </ P>
</ Div>
<Div class = "section">
<H4 id = "svn"> SVN < small> </ small> </ h4>
<P> Apache Subversion, häufig abgekürzt SVN, ist eine Open - Source - Versionskontrollsystem - Software. CollabNet Subversion von der Firma im Jahr 2000 gegründet. Aber jetzt hat es als ein Projekt der Apache Software Foundation entwickelt wurde , ist es eine reiche Entwickler und User - Communities hat. </ P>
</ Div>
<Div class = "section">
<H4 id = "jmeter"> jMeter < small> <a href = "#" Onclick = "removeSection (this); ">
& Zeiten; entfernen Sie den Teil </ a> </ small>
</ H4>
<P> jMeter ist ein Open - Source - Test - Software. Es ist 100% pure Java - Anwendung, für Last- und Performance - Tests. </ P>
</ Div>
<Div class = "section">
<H4 id = "ejb"> EJB < / h4>
<P> Enterprise Java Beans (EJB ) ist ein Entwicklungs - Framework eine hoch skalierbare und robuste Unternehmensanwendungen auf einem kompatiblen Anwendungsserver (wie JBOSS, Web Logic, etc.) von J2EE eingesetzt zu erstellen. </ P>
</ Div>
<Div class = "section">
<H4 id = "spring"> Frühling < / h4>
<P> Spring Framework ist ein Open - Source - Java - Plattform für die schnelle Entwicklung von leistungsfähigen Java - Anwendung bietet eine komplette Infrastruktur zu unterstützen. </ P>
<P> Spring - Framework ursprünglich von Rod Johnson geschrieben im Juni 2003 wurde zum ersten Mal unter der Apache - 2.0 - Lizenz veröffentlicht. </ P>
</ Div>
</ Div>
<Script>. $ (Function ( ) {removeSection = function (e) {$ (e) .parents ( ". Abschnitt") entfernen () ;. $ ( '[Data-spy = "scroll"]') , die jeweils ( function () {var $ spy = $ (this) .scrollspy ( "Refresh")});} $ ( "# myScrollspy") scrollspy () ;.}); </ script>
Versuchen »
Die Ergebnisse sind wie folgt:
Ereignis
Die folgende Tabelle listet den Monitor zu verwenden Ereignis zu blättern. Diese Ereignisse können, wenn die Hook-Funktion verwendet werden.
| 事件 | 描述 | 实例 |
|---|---|---|
| activate.bs.scrollspy | 每当一个新项目被滚动监听激活时，触发该事件。 |
$('#myScrollspy').on('activate.bs.scrollspy', function () {
// 执行一些动作...
})
|
Beispiele
Das folgende Beispiel zeigt die Verwendung vonactivate.bs.scrollspy event:
Beispiele
<Nav id = "myScrollspy" class = "navbar navbar-default navbar -static" role = "Navigation">
<Div class = "Behälter-Flüssigkeit">
<Div class = "navbar-header">
<Taste class = "navbar-Toggle" type = "button" Daten-Toggle = "Kollaps"
Daten-target = ".bs-js -navbar-scrollspy">
<span class = "sr-only"> Umschalten des Navigations </ span>
<span class = "icon-Bar"> </ span>
<span class = "icon-Bar"> </ span>
<span class = "icon-Bar"> </ span>
</ Button>
<A class = "navbar-Marke" href = "#"> Tutorial - Name </ a>
</ Div>
<Div class = "Zusammenbruch navbar-Zusammenbruch bs -js-navbar-scrollspy">
<Ul class = "nav navbar-nav" >
<Li class = "aktiv"> <a href = "#ios"> iOS < / a> </ li>
<Li> <a href = "#svn"> SVN < / a> </ li>
<Li class = "Dropdown">
<A href = "#" id = "navbarDrop1" class = "Drop - Down-Toggle"
Daten-Toggle = "Dropdown"> Java <b class = "Caret"> </ b>
</ A>
<Ul class = "Drop - Down-Menü" role = "Menü"
aria-labelledby = "navbarDrop1">
<Li> <a href = "#jmeter" tabindex = "-1"> jmeter < / a> </ li>
<Li> <a href = "#ejb" tabindex = "-1"> ejb < / a> </ li>
<Li class = "Teiler"> </ li>
<Li> <a href = "#spring" tabindex = "-1"> Frühling < / a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
<Div Daten-Spion = "scroll" Daten-target = "#myScrollspy" Daten-Offset = "0"
style = "height: 200px; Überlauf : auto; position: relative;">
<Div class = "section">
<H4 id = "ios"> iOS < small> <a href = "#" Onclick = "removeSection (this); ">
& Zeiten; entfernen Sie den Teil </ a> </ small>
</ H4>
<P> iOS ist ein entwickeltes und von Apples Handy - Betriebssystem veröffentlicht. zum ersten Mal iPhone, iPod Touch und Apple TV im Jahr 2007 ursprünglich veröffentlicht worden . iOS ist abgeleitet von OS X, teilen sie die Darwin - Stiftung. OS X - Betriebssystem auf einem Mac verwendet wird, iOS ist Apples mobile Version. </ P>
</ Div>
<Div class = "section">
<H4 id = "svn"> SVN < small> </ small> </ h4>
<P> Apache Subversion, häufig abgekürzt SVN, ist eine Open - Source - Versionskontrollsystem - Software. CollabNet Subversion von der Firma im Jahr 2000 gegründet. Aber jetzt hat es als ein Projekt der Apache Software Foundation entwickelt wurde , ist es eine reiche Entwickler und User - Communities hat. </ P>
</ Div>
<Div class = "section">
<H4 id = "jmeter"> jMeter < small> <a href = "#" Onclick = "removeSection (this); ">
& Zeiten; entfernen Sie den Teil </ a> </ small>
</ H4>
<P> jMeter ist ein Open - Source - Test - Software. Es ist 100% pure Java - Anwendung, für Last- und Performance - Tests. </ P>
</ Div>
<Div class = "section">
<H4 id = "ejb"> EJB < / h4>
<P> Enterprise Java Beans (EJB ) ist ein Entwicklungs - Framework eine hoch skalierbare und robuste Unternehmensanwendungen auf einem kompatiblen Anwendungsserver (wie JBOSS, Web Logic, etc.) von J2EE eingesetzt zu erstellen. </ P>
</ Div>
<Div class = "section">
<H4 id = "spring"> Frühling < / h4>
<P> Spring Framework ist ein Open - Source - Java - Plattform für die schnelle Entwicklung von leistungsfähigen Java - Anwendung bietet eine komplette Infrastruktur zu unterstützen. </ P>
<P> Spring - Framework ursprünglich von Rod Johnson geschrieben im Juni 2003 wurde zum ersten Mal unter der Apache - 2.0 - Lizenz veröffentlicht. </ P>
</ Div>
</ Div>
<span id = "activeitem" style = "color: red;" > </ span>
<Script>. $ (Function ( ) {removeSection = function (e) {$ (e) .parents ( ". Abschnitt") entfernen () ;. $ ( '[Data-spy = "scroll"]') , die jeweils ( function () {var $ spy = $ (this) .scrollspy ( "Refresh")});} $ ( "# myScrollspy") scrollspy (); .. $ ( '# myScrollspy') auf ( 'activate.bs. scrollspy ', function () {var currentItem = $ ( "nav li.active> a.") Text (); $ ( "# activeitem") html ( " Sie betrachten derzeit -" + currentItem); .. }) }); </ script>
Versuchen »
Die Ergebnisse sind wie folgt:
Weitere Beispiele
Erstellen Sie eine horizontale Scroll-Hören
Das folgende Beispiel zeigt, wie ein horizontales Scrollen Zuhörer zu schaffen:
Beispiele
<- Der navbar :! Wird verwendet , um zu einem Abschnitt in der rollbaren Bereich springen ->
<Nav class = "navbar navbar- inverse navbar fest top">
...
<Ul class = "nav navbar- nav">
<Li> <a href = "# section1"> Abschnitt 1 </ a> </ li>
...
</ Nav>
<! - Die rollbaren Bereich ->
<Div Daten-spy = "scroll " data-target = ".navbar" Daten-offset = "12">
<! - Abschnitt 1 ->
<Div id = "section1">
<H1> Abschnitt 1 </ h1 >
<P> Versuchen Sie, diese Seite zu scrollen und auf der Navigationsleiste schauen beim Scrollen! </ P>
</ Div>
...
</ Div>
<Nav class = "navbar navbar- inverse navbar fest top">
...
<Ul class = "nav navbar- nav">
<Li> <a href = "# section1"> Abschnitt 1 </ a> </ li>
...
</ Nav>
<! - Die rollbaren Bereich ->
<Div Daten-spy = "scroll " data-target = ".navbar" Daten-offset = "12">
<! - Abschnitt 1 ->
<Div id = "section1">
<H1> Abschnitt 1 </ h1 >
<P> Versuchen Sie, diese Seite zu scrollen und auf der Navigationsleiste schauen beim Scrollen! </ P>
</ Div>
...
</ Div>
Versuchen »
Wie eine vertikale Scroll-Hören zu schaffen
Das folgende Beispiel zeigt, wie eine vertikale Scroll-Hörer zu schaffen:
Beispiele
<Body Daten-spy = "scroll " data-target = "#myScrollspy" Daten-offset = "20">
<Div class = "container">
<Div class = "Zeile">
<Nav class = "col-sm -3" id = "myScrollspy">
<Ul class = "nav NAV- Pillen nav-stacked">
<Li> <a href = "# section1"> Abschnitt 1 </ a> </ li>
...
</ Ul>
</ Nav>
<Div class = "col-sm -9">
<Div id = "section1">
<H1> Abschnitt 1 </ h1 >
<P> Versuchen Sie, diese Seite zu blättern und in der Navigationsliste schauen beim Scrollen! </ P>
</ Div>
...
</ Div>
</ Div>
</ Div>
</ Body>
<Div class = "container">
<Div class = "Zeile">
<Nav class = "col-sm -3" id = "myScrollspy">
<Ul class = "nav NAV- Pillen nav-stacked">
<Li> <a href = "# section1"> Abschnitt 1 </ a> </ li>
...
</ Ul>
</ Nav>
<Div class = "col-sm -9">
<Div id = "section1">
<H1> Abschnitt 1 </ h1 >
<P> Versuchen Sie, diese Seite zu blättern und in der Navigationsliste schauen beim Scrollen! </ P>
</ Div>
...
</ Div>
</ Div>
</ Div>
</ Body>
Versuchen »