monitor de rolagem Bootstrap (Scrollspy) Widget
monitor de rolagem (Scrollspy) plug-in, que atualiza automaticamente o widget de navegação atualiza automaticamente o alvo de navegação correspondente com base na posição da barra de rolagem. A implementação básica é medida que se desloca, a posição da barra de rolagem com baseclasse .active adicionado à barra de navegação.
Se você quiser para se referir às características individuais de plug-in, você precisa fazer referênciascrollspy.js.Ou, como Bootstrap plug-in Overview capítulo mencionado, você pode se referir abootstrap.jsou versão comprimida debootstrap.min.js.
uso
Você pode adicionar um deslocamento para a parte superior do comportamento do monitor de navegação:
- Através atributo de dados: você quer ouvir um elemento (geralmente um organismo) para adicionar dados-espião = "scroll".Em seguida, adicionar o ID ou classe do elemento pai com oatributo-alvo de dados componente Bootstrap.nav. Para que ele funcione corretamente, você deve se certificar de que existe uma correspondência no corpo da página que você deseja vincular existe o elemento de monitor de ID.
<Dados Body-espião = "scroll" data-target = ". Navbar-example"> ... <Div class = "navbar-example"> <ul class = "nav nav-tabs"> ... </ Ul> </ Div> ... </ Body>
- Por JavaScript: Você pode percorrer a chamada JavaScript para ouvir, para ouvir selecionar elementos, em seguida, chamar .scrollspy ()função:
. $ ( 'Body') scrollspy ({target: '.navbar-exemplo'})
Exemplos
O exemplo a seguir demonstra o uso de percorrer dados de atributos monitor (Scrollspy) plug-in:
Exemplos
<Nav id = "navbar-exemplo" class = "navbar navbar navbar-default -static" role = "navegação">
<Div class = "recipiente de líquido">
<Div class = "navbar-header">
<Button class = "navbar-toggle" type = "button" Dados-toggle = "colapso"
data-target = ".bs-js -navbar-scrollspy">
<span class = "sr-only"> Comutação de Navegação </ span>
<span class = "icon-bar"> </ span>
<span class = "icon-bar"> </ span>
<span class = "icon-bar"> </ span>
</ Button>
<A class = "navbar-brand" href = "#"> Tutorial Nome </ a>
</ Div>
<Div class = "colapso navbar-colapso 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 = "dropdown-toggle"
Dados-toggle = "dropdown"> Java <b class = "acento circunflexo"> </ b>
</ A>
<Ul class = "dropdown-menu" 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 = "divisor"> </ li>
<Li> <a href = "#spring" tabindex = "-1"> primavera < / a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
<Div Dados-espião = "scroll" data-target = "# navbar- exemplo" offset de dados = "0"
style = "height: 200px; estouro : auto; position: relative;">
<H4 id = "iOS"> iOS < / h4>
<P> iOS é um desenvolvido e publicado pela sistema operacional móvel da Apple. Originalmente lançado pela primeira vez, iPhone, iPod Touch e Apple TV em 2007. iOS é derivado do OS X, eles compartilham a fundação Darwin. sistema operativo OS X é usado em um Mac, iOS é a versão móvel da Apple. </ P>
<H4 id = "svn"> SVN < / h4>
<P> Subversion, muitas vezes abreviado SVN, é uma versão de código do software do sistema de controle aberto. CollabNet Subversion criado pela empresa em 2000. Mas agora ele se desenvolveu como um projeto da Apache Software Foundation, que tem uma rica desenvolvedor e comunidades de usuários. </ P>
<H4 id = "jmeter"> jMeter < / h4>
<P> jMeter é um software de teste de código aberto. É 100% pura aplicação Java, para testes de carga e desempenho. </ P>
<H4 id = "ejb"> EJB < / h4>
<P> Enterprise Java Beans (EJB ) é uma estrutura de desenvolvimento para criar um aplicações empresariais altamente escaláveis e robustas, implantado em um servidores de aplicativos compatíveis (como JBOSS, Logic Web, etc.) de J2EE. </ P>
<H4 id = "primavera"> Spring < / h4>
<P> Spring Framework é uma plataforma Java de código aberto para desenvolvimento rápido de aplicações Java poderosa oferece um suporte completo de infra-estrutura. </ P>
<P> framework Spring originalmente escrito por Rod Johnson em junho de 2003 foi lançado sob a licença Apache 2.0. </ P>
</ Div>
tente »
Os resultados são os seguintes:
opções
Para passar através de atributos de dados ou JavaScript. A tabela a seguir lista estas opções:
| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
|---|---|---|---|
| offset | number 默认值：10 | data-offset | 当计算滚动位置时，距离顶部的偏移像素。 |
caminho
.scrollspy ( "refresh"): Ao chamar scrollspy pelo método JavaScript, você precisa chamar .refreshmétodo para atualizar o DOM. Isso é útil para mudar (ou seja, você adicionar ou remover certos elementos) ocorrer a qualquer momento do elemento DOM. Aqui está a sintaxe desse método.
$ ( '[Data-espião = "scroll"]'). Cada (function () {
var $ espião = $ (this) .scrollspy ( "refresh")
})
Exemplos
O exemplo a seguir demonstra.scrollspy ( 'atualizar') Método:
Exemplos
<Nav id = "myScrollspy" class = "navbar navbar navbar-default -static" role = "navegação">
<Div class = "recipiente de líquido">
<Div class = "navbar-header">
<Button class = "navbar-toggle" type = "button" Dados-toggle = "colapso"
data-target = ".bs-js -navbar-scrollspy">
<span class = "sr-only"> Comutação de Navegação </ span>
<span class = "icon-bar"> </ span>
<span class = "icon-bar"> </ span>
<span class = "icon-bar"> </ span>
</ Button>
<A class = "navbar-brand" href = "#"> Tutorial Nome </ a>
</ Div>
<Div class = "colapso navbar-colapso bs -js-navbar-scrollspy">
<Ul class = "nav navbar-nav" >
<Li class = "ativo"> <a href = "#ios"> iOS < / a> </ li>
<Li> <a href = "#svn"> SVN < / a> </ li>
<Li class = "dropdown">
<A href = "#" id = "navbarDrop1" class = "dropdown-toggle"
Dados-toggle = "dropdown"> Java <b class = "acento circunflexo"> </ b>
</ A>
<Ul class = "dropdown-menu" 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 = "divisor"> </ li>
<Li> <a href = "#spring" tabindex = "-1"> primavera < / a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
<Div Dados-espião = "scroll" data-target = "#myScrollspy" offset de dados = "0"
style = "height: 200px; estouro : auto; position: relative;">
<Div class = "seção">
<H4 id = "ios"> iOS < small> <a href = "#" onclick = "removeSection (this); ">
& Vezes; remover a parte </ a> </ small>
</ H4>
<P> iOS é um desenvolvido e publicado pela sistema operacional móvel da Apple. Originalmente lançado pela primeira vez, iPhone, iPod Touch e Apple TV em 2007. iOS é derivado do OS X, eles compartilham a fundação Darwin. sistema operativo OS X é usado em um Mac, iOS é a versão móvel da Apple. </ P>
</ Div>
<Div class = "seção">
<H4 id = "svn"> SVN < small> </ small> </ h4>
<P> Subversion, muitas vezes abreviado SVN, é uma versão de código do software do sistema de controle aberto. CollabNet Subversion criado pela empresa em 2000. Mas agora ele se desenvolveu como um projeto da Apache Software Foundation, que tem uma rica desenvolvedor e comunidades de usuários. </ P>
</ Div>
<Div class = "seção">
<H4 id = "jmeter"> jMeter < small> <a href = "#" onclick = "removeSection (this); ">
& Vezes; remover a parte </ a> </ small>
</ H4>
<P> jMeter é um software de teste de código aberto. É 100% pura aplicação Java, para testes de carga e desempenho. </ P>
</ Div>
<Div class = "seção">
<H4 id = "ejb"> EJB < / h4>
<P> Enterprise Java Beans (EJB ) é uma estrutura de desenvolvimento para criar um aplicações empresariais altamente escaláveis e robustas, implantado em um servidores de aplicativos compatíveis (como JBOSS, Logic Web, etc.) de J2EE. </ P>
</ Div>
<Div class = "seção">
<H4 id = "primavera"> Spring < / h4>
<P> Spring Framework é uma plataforma Java de código aberto para desenvolvimento rápido de aplicações Java poderosa oferece um suporte completo de infra-estrutura. </ P>
<P> framework Spring originalmente escrito por Rod Johnson em junho de 2003 foi lançado sob a licença Apache 2.0. </ P>
</ Div>
</ Div>
. <Script> $ (function ( ) {removeSection = function (e) {$ (e) .parents ( ". Secção") remove () ;. $ ( '[Data-espião = "scroll"]') cada ( function () {var $ espião = $ (this) .scrollspy ( 'refresh')});} $ ( "# myScrollspy") scrollspy () ;.}); </ script>
tente »
Os resultados são os seguintes:
evento
A tabela a seguir lista o monitor a utilizar para se deslocar evento. Estes eventos podem ser usados quando a função de gancho.
| 事件 | 描述 | 实例 |
|---|---|---|
| activate.bs.scrollspy | 每当一个新项目被滚动监听激活时，触发该事件。 |
$('#myScrollspy').on('activate.bs.scrollspy', function () {
// 执行一些动作...
})
|
Exemplos
O exemplo seguinte demonstra o uso de eventoactivate.bs.scrollspy:
Exemplos
<Nav id = "myScrollspy" class = "navbar navbar navbar-default -static" role = "navegação">
<Div class = "recipiente de líquido">
<Div class = "navbar-header">
<Button class = "navbar-toggle" type = "button" Dados-toggle = "colapso"
data-target = ".bs-js -navbar-scrollspy">
<span class = "sr-only"> Comutação de Navegação </ span>
<span class = "icon-bar"> </ span>
<span class = "icon-bar"> </ span>
<span class = "icon-bar"> </ span>
</ Button>
<A class = "navbar-brand" href = "#"> Tutorial Nome </ a>
</ Div>
<Div class = "colapso navbar-colapso bs -js-navbar-scrollspy">
<Ul class = "nav navbar-nav" >
<Li class = "ativo"> <a href = "#ios"> iOS < / a> </ li>
<Li> <a href = "#svn"> SVN < / a> </ li>
<Li class = "dropdown">
<A href = "#" id = "navbarDrop1" class = "dropdown-toggle"
Dados-toggle = "dropdown"> Java <b class = "acento circunflexo"> </ b>
</ A>
<Ul class = "dropdown-menu" 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 = "divisor"> </ li>
<Li> <a href = "#spring" tabindex = "-1"> primavera < / a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
<Div Dados-espião = "scroll" data-target = "#myScrollspy" offset de dados = "0"
style = "height: 200px; estouro : auto; position: relative;">
<Div class = "seção">
<H4 id = "ios"> iOS < small> <a href = "#" onclick = "removeSection (this); ">
& Vezes; remover a parte </ a> </ small>
</ H4>
<P> iOS é um desenvolvido e publicado pela sistema operacional móvel da Apple. Originalmente lançado pela primeira vez, iPhone, iPod Touch e Apple TV em 2007. iOS é derivado do OS X, eles compartilham a fundação Darwin. sistema operativo OS X é usado em um Mac, iOS é a versão móvel da Apple. </ P>
</ Div>
<Div class = "seção">
<H4 id = "svn"> SVN < small> </ small> </ h4>
<P> Subversion, muitas vezes abreviado SVN, é uma versão de código do software do sistema de controle aberto. CollabNet Subversion criado pela empresa em 2000. Mas agora ele se desenvolveu como um projeto da Apache Software Foundation, que tem uma rica desenvolvedor e comunidades de usuários. </ P>
</ Div>
<Div class = "seção">
<H4 id = "jmeter"> jMeter < small> <a href = "#" onclick = "removeSection (this); ">
& Vezes; remover a parte </ a> </ small>
</ H4>
<P> jMeter é um software de teste de código aberto. É 100% pura aplicação Java, para testes de carga e desempenho. </ P>
</ Div>
<Div class = "seção">
<H4 id = "ejb"> EJB < / h4>
<P> Enterprise Java Beans (EJB ) é uma estrutura de desenvolvimento para criar um aplicações empresariais altamente escaláveis e robustas, implantado em um servidores de aplicativos compatíveis (como JBOSS, Logic Web, etc.) de J2EE. </ P>
</ Div>
<Div class = "seção">
<H4 id = "primavera"> Spring < / h4>
<P> Spring Framework é uma plataforma Java de código aberto para desenvolvimento rápido de aplicações Java poderosa oferece um suporte completo de infra-estrutura. </ P>
<P> framework Spring originalmente escrito por Rod Johnson em junho de 2003 foi lançado sob a licença Apache 2.0. </ P>
</ Div>
</ Div>
<span id = "activeitem" style = "color: red;" > </ span>
. <Script> $ (function ( ) {removeSection = function (e) {$ (e) .parents ( ". Secção") remove () ;. $ ( '[Data-espião = "scroll"]') cada ( function () {var $ espião = $ (this) .scrollspy ( 'refresh')});} $ ( "# myScrollspy") scrollspy (); .. $ ( "# myScrollspy ') em (' activate.bs. scrollspy ', function () {var currentItem = $ ( "nav li.active> a.") texto (); $ ( "# activeitem") html ( " Você está vendo -" + currentItem); .. }) }); </ script>
tente »
Os resultados são os seguintes:
mais exemplos
Criar uma escuta de rolagem horizontal
O exemplo a seguir demonstra como criar um ouvinte de rolagem horizontal:
Exemplos
<- A barra de navegação :! Usado para saltar para uma seção na área de rolagem ->
<Nav class = "navbar navbar- inversa navbar-top fixo">
...
<Class Ul = "nav navbar- nav">
<Li> <a href = "# section1"> Seção 1 </ a> </ li>
...
</ Nav>
<! - A área de rolagem ->
<Div dados-espião = "scroll " data-target = ".navbar" offset data = "12">
<! - Seção 1 ->
<Div id = "section1">
<H1> Seção 1 </ h1 >
<P> Tente rolar esta página e olhar para a barra de navegação durante a rolagem! </ P>
</ Div>
...
</ Div>
<Nav class = "navbar navbar- inversa navbar-top fixo">
...
<Class Ul = "nav navbar- nav">
<Li> <a href = "# section1"> Seção 1 </ a> </ li>
...
</ Nav>
<! - A área de rolagem ->
<Div dados-espião = "scroll " data-target = ".navbar" offset data = "12">
<! - Seção 1 ->
<Div id = "section1">
<H1> Seção 1 </ h1 >
<P> Tente rolar esta página e olhar para a barra de navegação durante a rolagem! </ P>
</ Div>
...
</ Div>
tente »
Como criar uma escuta de rolagem vertical
O exemplo a seguir demonstra como criar um ouvinte de rolagem vertical:
Exemplos
<Dados Body-espião = "scroll "-alvo de dados = "#myScrollspy" data-offset = "20">
<Div class = "container">
<Div class = "linha">
<Nav class = "col-sm -3" id = "myScrollspy">
<Ul class = "nav nav- pílulas nav-stacked">
<Li> <a href = "# section1"> Seção 1 </ a> </ li>
...
</ Ul>
</ Nav>
<Div class = "col-sm -9">
<Div id = "section1">
<H1> Seção 1 </ h1 >
<P> Tente rolar esta página e olhar para a lista de navegação durante a rolagem! </ P>
</ Div>
...
</ Div>
</ Div>
</ Div>
</ Body>
<Div class = "container">
<Div class = "linha">
<Nav class = "col-sm -3" id = "myScrollspy">
<Ul class = "nav nav- pílulas nav-stacked">
<Li> <a href = "# section1"> Seção 1 </ a> </ li>
...
</ Ul>
</ Nav>
<Div class = "col-sm -9">
<Div id = "section1">
<H1> Seção 1 </ h1 >
<P> Tente rolar esta página e olhar para a lista de navegação durante a rolagem! </ P>
</ Div>
...
</ Div>
</ Div>
</ Div>
</ Body>
tente »