Bootstrap monitora przewijania (Scrollspy) widget
Monitor przewijania (Scrollspy) plug-in, który automatycznie aktualizuje widget nawigacji automatycznie aktualizuje odpowiedni cel nawigacji w oparciu o położenie paska przewijania. Podstawowa implementacja jest podczas przewijania, pozycja paska przewijania na podstawieklasy .active dodany do paska nawigacyjnego.
Jeśli chcesz zapoznać się z poszczególnymi funkcjami typu plug-in, trzeba odwołaćscrollspy.js.Albo, jak Bootstrap Przegląd wtyczki rozdziale wspomniano, można zwrócić się dobootstrap.jslub skompresowanej wersjibootstrap.min.js.
zwyczaj
Można dodać przewinąć do góry zachowanie monitora nawigacja:
- Poprzez danych atrybutu: chcesz słuchać elementu (zazwyczaj body), aby dodać danych-spy = "scroll".Następnie dodać identyfikator lub klasy elementu nadrzędnego zBootstrap .nav komponentu danychatrybutuzwalczania.Aby działał poprawnie, należy upewnić się, że nie ma odpowiednika w treści strony, którą chcesz połączyć element monitora ID nie istnieje.
<Body danych szpiegiem = "scroll" data-target = ". Pasek nawigacyjny-example"> ... <Div class = "NavBar-przykład"> <ul class = "nav nav-tabs"> ... </ Ul> </ Div> ... </ Body>
- Przez JavaScript: Można przewijać wywołania JavaScript słuchać, słuchać, aby wybrać elementy, a następnie zadzwonić .scrollspy ()Funkcja:
. $ ( "Ciało") scrollspy ({docelowy: ".navbar-przykładem '})
Przykłady
Poniższy przykład demonstruje użycie przewijanie danych atrybut Monitor (Scrollspy) plug-in:
Przykłady
<Nav id = "navbar-example" class = "navbar navbar-default navbar -static" role = "nawigacji">
<div class = "pojemnik płynu">
<div class = "navbar-header">
<Przycisk class = "navbar-przełącznik" type = "link" Dane-przełączania = "upadek"
Dane-target = ".bs-js -navbar-scrollspy">
<span class = "sr-only"> Włączanie nawigacji </ span>
<span class = "icon-bar"> </ span>
<span class = "icon-bar"> </ span>
<span class = "icon-bar"> </ span>
</ Button>
<a class = "navbar marki" href = "#"> Tutorial Nazwa </ a>
</ Div>
<div class = "załamanie navbar zapadaniu 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 = "listy rozwijanej">
<a href = "#" id = "navbarDrop1" class = "rozwijana-przełącznik"
Dane-przełączania = "listy rozwijanej"> Java <b class = "daszka"> </ b>
</ A>
<ul class = "menu rozwijane-" role = "menu"
aria-labelledby = "navbarDrop1">
<Li> <a href = "#jmeter" tabindex = "-1"> jmeter < / a> </ li>
<Li> <a href = "#ejb" tabindex = "-1"> EJB < / a> </ li>
<Li class = "rozdzielacz"> </ li>
<Li> <a href = "#spring" tabindex = "-1"> wiosna < / a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
<div Dane-spy = "scroll" Dane-target = "# navbar- przykładem" Dane-offset = "0"
style = "height: 200px; overflow : auto; position: relative;">
<H4 id = ""> iOS iOS < / h4>
<P> iOS jest opracowane i opublikowane przez mobilnego systemu operacyjnego Apple. Pierwotnie wydany po raz pierwszy iPhone, iPod touch i Apple TV w 2007 roku. iOS pochodzi z OS X, mają podstawę Darwin. System operacyjny OS X jest używany na komputerze Mac, iOS w wersji mobilnej Apple. </ P>
<H4 id = "svn"> SVN < / h4>
<P> Subversion, często skracane SVN, to system kontroli wersji oprogramowania open source. CollabNet Subversion utworzony przez spółkę w 2000 roku. Ale teraz jest rozwijany jako projekt Apache Software Foundation, ma bogate programistów i użytkowników społeczności. </ P>
<H4 id = "jmeter"> jmeter < / h4>
<P> JMeter jest open source program testowy. Jest w 100% czysta aplikacja Java do testowania obciążenia i wydajności. </ P>
<H4 id = "EJB"> EJB < / h4>
<P> Enterprise Java Beans (EJB ) stanowi ramy rozwoju do tworzenia wysoce skalowalne i niezawodne aplikacje korporacyjne, rozmieszczonych na jednym z kompatybilnych serwerów aplikacji (takich jak JBoss Web Logic, etc.) z J2EE. </ P>
<H4 id = "wiosna"> wiosna < / h4>
<P> Spring Framework jest open source platformy Java dla szybkiego rozwoju potężnej aplikacji Java oferuje pełną obsługę infrastruktury. </ P>
<P> Spring Framework w czerwcu 2003 roku napisany przez Rod Johnson został po raz pierwszy wydany na licencji Apache 2.0. </ P>
</ Div>
Spróbuj »
Wyniki przedstawiają się następująco:
Opcje
Aby przejść atrybutów danych lub JavaScript. Poniższa tabela zawiera następujące opcje:
| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
|---|---|---|---|
| offset | number 默认值：10 | data-offset | 当计算滚动位置时，距离顶部的偏移像素。 |
sposób
.scrollspy ( "odświeżania"): Przy wywołaniu scrollspy metodą JavaScript, trzeba zadzwonić .refreshsposób zaktualizować DOM. Jest to przydatne do zmiany (czyli dodać lub usunąć niektóre elementy) wystąpić w dowolnym momencie elementu DOM. Oto składnia tej metody.
$ ( '[Dane-spy = "scroll"] "). Każdy (function () {
var $ szpiegiem = $ (this) .scrollspy ( "odświeżania")
})
Przykłady
Poniższy przykład demonstruje.scrollspy ( "odśwież") Metoda:
Przykłady
<Nav id = "myScrollspy" class = "navbar navbar-default navbar -static" role = "nawigacji">
<div class = "pojemnik płynu">
<div class = "navbar-header">
<Przycisk class = "navbar-przełącznik" type = "link" Dane-przełączania = "upadek"
Dane-target = ".bs-js -navbar-scrollspy">
<span class = "sr-only"> Włączanie nawigacji </ span>
<span class = "icon-bar"> </ span>
<span class = "icon-bar"> </ span>
<span class = "icon-bar"> </ span>
</ Button>
<a class = "navbar marki" href = "#"> Tutorial Nazwa </ a>
</ Div>
<div class = "załamanie navbar zapadaniu BS -js-navbar-scrollspy">
<ul class = "nav navbar-nav" >
<Li class = "aktywny"> <a href = "#ios"> iOS < / a> </ li>
<Li> <a href = "#svn"> SVN < / a> </ li>
<Li class = "listy rozwijanej">
<a href = "#" id = "navbarDrop1" class = "rozwijana-przełącznik"
Dane-przełączania = "listy rozwijanej"> Java <b class = "daszka"> </ b>
</ A>
<ul class = "menu rozwijane-" role = "menu"
aria-labelledby = "navbarDrop1">
<Li> <a href = "#jmeter" tabindex = "-1"> jmeter < / a> </ li>
<Li> <a href = "#ejb" tabindex = "-1"> EJB < / a> </ li>
<Li class = "rozdzielacz"> </ li>
<Li> <a href = "#spring" tabindex = "-1"> wiosna < / a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
<div Dane-spy = "scroll" Dane-target = "#myScrollspy" Dane-offset = "0"
style = "height: 200px; overflow : auto; position: relative;">
<div class = "sekcja">
<H4 id = ""> iOS iOS < small> <a href = "#" onclick = "removeSection (this); ">
& Razy; usunąć część </ a> </ small>
</ H4>
<P> iOS jest opracowane i opublikowane przez mobilnego systemu operacyjnego Apple. Pierwotnie wydany po raz pierwszy iPhone, iPod touch i Apple TV w 2007 roku. iOS pochodzi z OS X, mają podstawę Darwin. System operacyjny OS X jest używany na komputerze Mac, iOS w wersji mobilnej Apple. </ P>
</ Div>
<div class = "sekcja">
<H4 id = "svn"> SVN < small> </ small> </ h4>
<P> Subversion, często skracane SVN, to system kontroli wersji oprogramowania open source. CollabNet Subversion utworzony przez spółkę w 2000 roku. Ale teraz jest rozwijany jako projekt Apache Software Foundation, ma bogate programistów i użytkowników społeczności. </ P>
</ Div>
<div class = "sekcja">
<H4 id = "jmeter"> jmeter < small> <a href = "#" onclick = "removeSection (this); ">
& Razy; usunąć część </ a> </ small>
</ H4>
<P> JMeter jest open source program testowy. Jest w 100% czysta aplikacja Java do testowania obciążenia i wydajności. </ P>
</ Div>
<div class = "sekcja">
<H4 id = "EJB"> EJB < / h4>
<P> Enterprise Java Beans (EJB ) stanowi ramy rozwoju do tworzenia wysoce skalowalne i niezawodne aplikacje korporacyjne, rozmieszczonych na jednym z kompatybilnych serwerów aplikacji (takich jak JBoss Web Logic, etc.) z J2EE. </ P>
</ Div>
<div class = "sekcja">
<H4 id = "wiosna"> wiosna < / h4>
<P> Spring Framework jest open source platformy Java dla szybkiego rozwoju potężnej aplikacji Java oferuje pełną obsługę infrastruktury. </ P>
<P> Spring Framework w czerwcu 2003 roku napisany przez Rod Johnson został po raz pierwszy wydany na licencji Apache 2.0. </ P>
</ Div>
</ Div>
. <Script> $ (function ( ) {removeSection = function (e) {$ (e) .parents ( ". Sekcja") usunięcia () ;. $ ( '[Dane-spy = "scroll"]') każda ( function () {var $ szpiegiem = $ (this) .scrollspy ( 'refresh')});} $ ( "# myScrollspy") scrollspy () ;.}); </ script>
Spróbuj »
Wyniki przedstawiają się następująco:
wydarzenie
Poniższa tabela zawiera monitor używać do przewijania wydarzenie. Zdarzenia te mogą być wykorzystywane, gdy funkcja haka.
| 事件 | 描述 | 实例 |
|---|---|---|
| activate.bs.scrollspy | 每当一个新项目被滚动监听激活时，触发该事件。 |
$('#myScrollspy').on('activate.bs.scrollspy', function () {
// 执行一些动作...
})
|
Przykłady
Poniższy przykład demonstruje użycieactivate.bs.scrollspy imprezy:
Przykłady
<Nav id = "myScrollspy" class = "navbar navbar-default navbar -static" role = "nawigacji">
<div class = "pojemnik płynu">
<div class = "navbar-header">
<Przycisk class = "navbar-przełącznik" type = "link" Dane-przełączania = "upadek"
Dane-target = ".bs-js -navbar-scrollspy">
<span class = "sr-only"> Włączanie nawigacji </ span>
<span class = "icon-bar"> </ span>
<span class = "icon-bar"> </ span>
<span class = "icon-bar"> </ span>
</ Button>
<a class = "navbar marki" href = "#"> Tutorial Nazwa </ a>
</ Div>
<div class = "załamanie navbar zapadaniu BS -js-navbar-scrollspy">
<ul class = "nav navbar-nav" >
<Li class = "aktywny"> <a href = "#ios"> iOS < / a> </ li>
<Li> <a href = "#svn"> SVN < / a> </ li>
<Li class = "listy rozwijanej">
<a href = "#" id = "navbarDrop1" class = "rozwijana-przełącznik"
Dane-przełączania = "listy rozwijanej"> Java <b class = "daszka"> </ b>
</ A>
<ul class = "menu rozwijane-" role = "menu"
aria-labelledby = "navbarDrop1">
<Li> <a href = "#jmeter" tabindex = "-1"> jmeter < / a> </ li>
<Li> <a href = "#ejb" tabindex = "-1"> EJB < / a> </ li>
<Li class = "rozdzielacz"> </ li>
<Li> <a href = "#spring" tabindex = "-1"> wiosna < / a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
<div Dane-spy = "scroll" Dane-target = "#myScrollspy" Dane-offset = "0"
style = "height: 200px; overflow : auto; position: relative;">
<div class = "sekcja">
<H4 id = ""> iOS iOS < small> <a href = "#" onclick = "removeSection (this); ">
& Razy; usunąć część </ a> </ small>
</ H4>
<P> iOS jest opracowane i opublikowane przez mobilnego systemu operacyjnego Apple. Pierwotnie wydany po raz pierwszy iPhone, iPod touch i Apple TV w 2007 roku. iOS pochodzi z OS X, mają podstawę Darwin. System operacyjny OS X jest używany na komputerze Mac, iOS w wersji mobilnej Apple. </ P>
</ Div>
<div class = "sekcja">
<H4 id = "svn"> SVN < small> </ small> </ h4>
<P> Subversion, często skracane SVN, to system kontroli wersji oprogramowania open source. CollabNet Subversion utworzony przez spółkę w 2000 roku. Ale teraz jest rozwijany jako projekt Apache Software Foundation, ma bogate programistów i użytkowników społeczności. </ P>
</ Div>
<div class = "sekcja">
<H4 id = "jmeter"> jmeter < small> <a href = "#" onclick = "removeSection (this); ">
& Razy; usunąć część </ a> </ small>
</ H4>
<P> JMeter jest open source program testowy. Jest w 100% czysta aplikacja Java do testowania obciążenia i wydajności. </ P>
</ Div>
<div class = "sekcja">
<H4 id = "EJB"> EJB < / h4>
<P> Enterprise Java Beans (EJB ) stanowi ramy rozwoju do tworzenia wysoce skalowalne i niezawodne aplikacje korporacyjne, rozmieszczonych na jednym z kompatybilnych serwerów aplikacji (takich jak JBoss Web Logic, etc.) z J2EE. </ P>
</ Div>
<div class = "sekcja">
<H4 id = "wiosna"> wiosna < / h4>
<P> Spring Framework jest open source platformy Java dla szybkiego rozwoju potężnej aplikacji Java oferuje pełną obsługę infrastruktury. </ P>
<P> Spring Framework w czerwcu 2003 roku napisany przez Rod Johnson został po raz pierwszy wydany na licencji Apache 2.0. </ P>
</ Div>
</ Div>
<span id = "activeitem" style = "color: red;" > </ span>
. <Script> $ (function ( ) {removeSection = function (e) {$ (e) .parents ( ". Sekcja") usunięcia () ;. $ ( '[Dane-spy = "scroll"]') każda ( function () {var $ szpiegiem = $ (this) .scrollspy ( 'refresh')});} $ ( "# myScrollspy") scrollspy (); .. $ ( '# myScrollspy ") oN (' activate.bs. scrollspy ', function () {var currentItem = $ ( "nav li.active> a"). text (); $ ( "# activeitem") html ( " aktualnie przeglądasz -" + currentItem); .. }) }); </ script>
Spróbuj »
Wyniki przedstawiają się następująco:
Więcej przykładów
Tworzenie poziomego przewijania słuchania
Poniższy przykład pokazuje, jak utworzyć poziomego przewijania słuchacza:
Przykłady
<- Pasek nawigacyjny :! Służy do przejść do sekcji w obszarze przewijalnej ->
<Nav class = "navbar navbar- odwrotna navbar-stałej top">
...
<Class Ul = "nav navbar- nav">
<Li> <a href = "# section1"> Sekcja 1 </ a> </ li>
...
</ Nav>
<! - Obszar Przesuwne ->
<Div data-spy = "scroll " data-target = ".navbar" dane-offset = "12">
<! - Sekcja 1 ->
<Div id = "sekcja1">
<H1> Sekcja 1 </ h1 >
<P> Spróbuj przewinąć stronę i spojrzeć na pasku nawigacyjnym podczas przewijania! </ P>
</ Div>
...
</ Div>
<Nav class = "navbar navbar- odwrotna navbar-stałej top">
...
<Class Ul = "nav navbar- nav">
<Li> <a href = "# section1"> Sekcja 1 </ a> </ li>
...
</ Nav>
<! - Obszar Przesuwne ->
<Div data-spy = "scroll " data-target = ".navbar" dane-offset = "12">
<! - Sekcja 1 ->
<Div id = "sekcja1">
<H1> Sekcja 1 </ h1 >
<P> Spróbuj przewinąć stronę i spojrzeć na pasku nawigacyjnym podczas przewijania! </ P>
</ Div>
...
</ Div>
Spróbuj »
Jak utworzyć pionową przewijania słuchania
Poniższy przykład pokazuje, jak utworzyć przewijania pionowego słuchacza:
Przykłady
<Body danych szpiegowskie = "scroll " data-target = "#myScrollspy" Dane-offset = "20">
<Div class = "container">
<Div class = "wiersz">
<Nav class = "kol-sm -3" id = "myScrollspy">
<Ul class = "nav nav- pigułki nav-ułożone">
<Li> <a href = "# section1"> Sekcja 1 </ a> </ li>
...
</ Ul>
</ Nav>
<Div class = "kol-sm -9">
<Div id = "sekcja1">
<H1> Sekcja 1 </ h1 >
<P> Spróbuj przewinąć stronę i spójrz na liście nawigacji podczas przewijania! </ P>
</ Div>
...
</ Div>
</ Div>
</ Div>
</ Body>
<Div class = "container">
<Div class = "wiersz">
<Nav class = "kol-sm -3" id = "myScrollspy">
<Ul class = "nav nav- pigułki nav-ułożone">
<Li> <a href = "# section1"> Sekcja 1 </ a> </ li>
...
</ Ul>
</ Nav>
<Div class = "kol-sm -9">
<Div id = "sekcja1">
<H1> Sekcja 1 </ h1 >
<P> Spróbuj przewinąć stronę i spójrz na liście nawigacji podczas przewijania! </ P>
</ Div>
...
</ Div>
</ Div>
</ Div>
</ Body>
Spróbuj »