Bootstrap(三十八)
来源:互联网 发布:淘宝不实名能买东西吗 编辑:程序博客网 时间:2024/05/16 10:38
Bootstrap 滚动监听(Scrollspy)插件
滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class。
如果您想要单独引用该插件的功能,那么您需要引用 scrollspy.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用bootstrap.js 或压缩版的 bootstrap.min.js。
用法
您可以向顶部导航添加滚动监听行为:
- 通过 data 属性:向您想要监听的元素(通常是 body)添加 data-spy="scroll"。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。为了它能正常工作,您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。
<body data-spy="scroll" data-target=".navbar-example">...<div class="navbar-example"> <ul class="nav nav-tabs"> ... </ul></div>...</body>
- 通过 JavaScript:您可以通过 JavaScript 调用滚动监听,选取要监听的元素,然后调用 .scrollspy() 函数:
$('body').scrollspy({ target: '.navbar-example' })
实例
下面的实例演示了通过 data 属性使用滚动监听(Scrollspy)插件:
实例
<navid="navbar-example"class="navbar navbar-default navbar-static"role="navigation"><divclass="container-fluid"><divclass="navbar-header"><buttonclass="navbar-toggle"type="button"data-toggle="collapse"data-target=".bs-js-navbar-scrollspy"><spanclass="sr-only">切换导航</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="#">教程名称</a></div><divclass="collapse navbar-collapse bs-js-navbar-scrollspy"><ulclass="nav navbar-nav"><li><ahref="#ios">iOS</a></li><li><ahref="#svn">SVN</a></li><liclass="dropdown"><ahref="#"id="navbarDrop1"class="dropdown-toggle"data-toggle="dropdown">Java<bclass="caret"></b></a><ulclass="dropdown-menu"role="menu"aria-labelledby="navbarDrop1"><li><ahref="#jmeter"tabindex="-1">jmeter</a></li><li><ahref="#ejb"tabindex="-1">ejb</a></li><liclass="divider"></li><li><ahref="#spring"tabindex="-1">spring</a></li></ul></li></ul></div></div></nav><divdata-spy="scroll"data-target="#navbar-example"data-offset="0"style="height:200px;overflow:auto; position: relative;"><h4id="ios">iOS</h4><p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X,它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上,iOS 是苹果的移动版本。</p><h4id="svn">SVN</h4><p>Apache Subversion,通常缩写为 SVN,是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目,因此拥有丰富的开发人员和用户社区。</p><h4id="jmeter">jMeter</h4><p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序,用于负载和性能测试。 </p><h4id="ejb">EJB</h4><p>Enterprise Java Beans(EJB)是一个创建高度可扩展性和强大企业级应用程序的开发架构,部署在兼容应用程序服务器(比如 JBOSS、Web Logic 等)的 J2EE 上。</p><h4id="spring">Spring</h4><p>Spring 框架是一个开源的 Java 平台,为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。 </p><p>Spring 框架最初是由 Rod Johnson 编写的,在 2003 年 6 月首次发布于 Apache 2.0 许可证下。 </p></div>
尝试一下 »
结果如下所示:
选项
通过 data 属性或 JavaScript 来传递。下表列出了这些选项:
默认值:10data-offset当计算滚动位置时,距离顶部的偏移像素。
方法
.scrollspy('refresh'):当通过 JavaScript 调用 scrollspy 方法时,您需要调用 .refresh 方法来更新 DOM。这在 DOM 的任意元素发生变更(即,您添加或移除了某些元素)时非常有用。下面是使用该方法的语法。$('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh')})
实例
下面的实例演示了 .scrollspy('refresh') 方法的用法:
实例
<navid="myScrollspy"class="navbar navbar-default navbar-static"role="navigation"><divclass="container-fluid"><divclass="navbar-header"><buttonclass="navbar-toggle"type="button"data-toggle="collapse"data-target=".bs-js-navbar-scrollspy"><spanclass="sr-only">切换导航</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="#">教程名称</a></div><divclass="collapse navbar-collapse bs-js-navbar-scrollspy"><ulclass="nav navbar-nav"><liclass="active"><ahref="#ios">iOS</a></li><li><ahref="#svn">SVN</a></li><liclass="dropdown"><ahref="#"id="navbarDrop1"class="dropdown-toggle"data-toggle="dropdown">Java<bclass="caret"></b></a><ulclass="dropdown-menu"role="menu"aria-labelledby="navbarDrop1"><li><ahref="#jmeter"tabindex="-1">jmeter</a></li><li><ahref="#ejb"tabindex="-1">ejb</a></li><liclass="divider"></li><li><ahref="#spring"tabindex="-1">spring</a></li></ul></li></ul></div></div></nav><divdata-spy="scroll"data-target="#myScrollspy"data-offset="0"style="height:200px;overflow:auto; position: relative;"><divclass="section"><h4id="ios">iOS<small><ahref="#"onclick="removeSection(this);">× 删除该部分</a></small></h4><p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X,它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上,iOS 是苹果的移动版本。</p></div><divclass="section"><h4id="svn">SVN<small></small></h4><p>Apache Subversion,通常缩写为 SVN,是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目,因此拥有丰富的开发人员和用户社区。</p></div><divclass="section"><h4id="jmeter">jMeter<small><ahref="#"onclick="removeSection(this);">× 删除该部分</a></small></h4><p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序,用于负载和性能测试。</p></div><divclass="section"><h4id="ejb">EJB</h4><p>Enterprise Java Beans(EJB)是一个创建高度可扩展性和强大企业级应用程序的开发架构,部署在兼容应用程序服务器(比如 JBOSS、Web Logic 等)的 J2EE 上。</p></div><divclass="section"><h4id="spring">Spring</h4><p>Spring 框架是一个开源的 Java 平台,为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。</p><p>Spring 框架最初是由 Rod Johnson 编写的,在 2003 年 6 月首次发布于 Apache 2.0 许可证下。</p></div></div><script> $(function(){ removeSection = function(e) { $(e).parents(".section").remove(); $('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') }); } $("#myScrollspy").scrollspy(); });</script>
尝试一下 »
结果如下所示:
事件
下表列出了滚动监听中要用到事件。这些事件可在函数中当钩子使用。
$('#myScrollspy').on('activate.bs.scrollspy', function () { // 执行一些动作...})
实例
下面的实例演示了 activate.bs.scrollspy 事件的用法:
实例
<navid="myScrollspy"class="navbar navbar-default navbar-static"role="navigation"><divclass="container-fluid"><divclass="navbar-header"><buttonclass="navbar-toggle"type="button"data-toggle="collapse"data-target=".bs-js-navbar-scrollspy"><spanclass="sr-only">切换导航</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="#">教程名称</a></div><divclass="collapse navbar-collapse bs-js-navbar-scrollspy"><ulclass="nav navbar-nav"><liclass="active"><ahref="#ios">iOS</a></li><li><ahref="#svn">SVN</a></li><liclass="dropdown"><ahref="#"id="navbarDrop1"class="dropdown-toggle"data-toggle="dropdown"> Java <bclass="caret"></b></a><ulclass="dropdown-menu"role="menu"aria-labelledby="navbarDrop1"><li><ahref="#jmeter"tabindex="-1">jmeter</a></li><li><ahref="#ejb"tabindex="-1">ejb</a></li><liclass="divider"></li><li><ahref="#spring"tabindex="-1">spring</a></li></ul></li></ul></div></div></nav><divdata-spy="scroll"data-target="#myScrollspy"data-offset="0"style="height:200px;overflow:auto; position: relative;"><divclass="section"><h4id="ios">iOS<small><ahref="#"onclick="removeSection(this);">× 删除该部分</a></small></h4><p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X,它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上,iOS 是苹果的移动版本。</p></div><divclass="section"><h4id="svn">SVN<small></small></h4><p>Apache Subversion,通常缩写为 SVN,是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目,因此拥有丰富的开发人员和用户社区。</p></div><divclass="section"><h4id="jmeter">jMeter<small><ahref="#"onclick="removeSection(this);">× 删除该部分</a></small></h4><p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序,用于负载和性能测试。</p></div><divclass="section"><h4id="ejb">EJB</h4><p>Enterprise Java Beans(EJB)是一个创建高度可扩展性和强大企业级应用程序的开发架构,部署在兼容应用程序服务器(比如 JBOSS、Web Logic 等)的 J2EE 上。</p></div><divclass="section"><h4id="spring">Spring</h4><p>Spring 框架是一个开源的 Java 平台,为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。</p><p>Spring 框架最初是由 Rod Johnson 编写的,在 2003 年 6 月首次发布于 Apache 2.0 许可证下。</p></div></div><spanid="activeitem"style="color:red;"></span><script> $(function(){ removeSection = function(e) { $(e).parents(".section").remove(); $('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') }); } $("#myScrollspy").scrollspy(); $('#myScrollspy').on('activate.bs.scrollspy', function () { var currentItem = $(".nav li.active > a").text(); $("#activeitem").html("目前您正在查看 - " + currentItem); }) });</script>
尝试一下 »
结果如下所示:
更多实例
创建水平滚动监听
以下实例演示了如何创建水平滚动监听:
实例
<!-- The navbar: used to jump to a section in the scrollable area -->
<nav class="navbar navbar-inverse navbar-fixed-top">
...
<ul class="nav navbar-nav">
<li><a href="#section1">Section 1</a></li>
...
</nav>
<!-- The scrollable area -->
<div data-spy="scroll" data-target=".navbar" data-offset="12">
<!-- Section 1 -->
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...
</div>
<nav class="navbar navbar-inverse navbar-fixed-top">
...
<ul class="nav navbar-nav">
<li><a href="#section1">Section 1</a></li>
...
</nav>
<!-- The scrollable area -->
<div data-spy="scroll" data-target=".navbar" data-offset="12">
<!-- Section 1 -->
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...
</div>
尝试一下 »
如何创建垂直滚动监听
以下实例演示了如何创建垂直滚动监听:
实例
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container">
<div class="row">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked">
<li><a href="#section1">Section 1</a></li>
...
</ul>
</nav>
<div class="col-sm-9">
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation list while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body>
<div class="container">
<div class="row">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked">
<li><a href="#section1">Section 1</a></li>
...
</ul>
</nav>
<div class="col-sm-9">
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation list while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body>
尝试一下 »
阅读全文
0 0
- Bootstrap(三十八)
- 三十八 lseek()
- Foundation5(三十八)
- JavaScript 计时(三十八)
- 三十八、多线程实例
- Linux常用命令(三十八) - vmstat
- 日拱一卒(三十八)
- 第三章三十八题
- (三十八)浮点类型
- 重拾python 三十八
- 英语口语收集(三十八)
- (三十八)会话Session
- Oracle12C--游标变量(三十八)
- Bootstrap
- BootStrap
- Bootstrap
- bootstrap
- Bootstrap
- iOS小技巧
- KMP算法
- pip、lxml、requests安装
- JAVA代码优化
- Reinforcement Learning.pdf 2017 英文原版 免费下载
- Bootstrap(三十八)
- PYTHON :SyntaxError: Non-UTF-8 code 解决办法
- Git使用学习2:Git 工作区、暂存区和版本库
- Bootstrap(三十九)
- windows,linux 实战渗透 主机常见端口漏洞
- Using MVVM Light with your Xamarin Apps.pdf 2017 英文原版 免费下载
- 20171106_chr_downInterceptor 自定义拦截器实现下载前登陆拦截
- RHadoop搭建
- 十进制数转换为2进制、十进制数转换为8进制、十进制数转换为16进制