下载此文档

bootstrap滚动监听(scrollspy)插件.doc

文档分类：IT计算机 | 页数：约17页举报非法文档有奖

1/17

下载提示

1.该资料是网友上传的，本站提供全文预览，预览什么样，下载就什么样。
2.下载该文档所得收入归上传者、原创者。
3.下载的文档，不会出现我们的网址水印。

同意并开始全文预览

(约 1-6 秒)

1/17 下载此文档

文档列表 文档介绍

Bootstrap滚动监听(Scrollspy)插件滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动,。如果您想要单独引用该插件的功能,。或者,正如Bootstrap插件概览一章中所提到,。用法您可以向顶部导航添加滚动监听行为:通过data属性:向您想要监听的元素(通常是body)添加data-spy="scroll"。-target。为了它能正常工作,您必须确保页面主体中有匹配您所要监听链接的ID的元素存在。<bodydata-spy="scroll"data-target=".navbar-example">...<divclass="navbar-example"><ulclass="navnav-tabs">...</ul></div>...</body>通过JavaScript:您可以通过JavaScript调用滚动监听,选取要监听的元素,()函数:$('body').scrollspy({target:'.navbar-example'})实例下面的实例演示了通过data属性使用滚动监听(Scrollspy)插件:<!DOCTYPEhtml><html><head><title>Bootstrap实例-滚动监听(Scrollspy)插件</title><linkhref="/bootstrap/css/"rel="stylesheet"><scriptsrc="/scripts/"></script><scriptsrc="/bootstrap/js/"></script></head><body><navid="navbar-example"class="navbarnavbar-defaultnavbar-static"role="navigation"><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="collapsenavbar-collapsebs-js-navbar-scrollspy"><ulclass="navnavbar-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></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、iPodTouch和AppleTV。iOS派生自

bootstrap滚动监听(scrollspy)插件来自淘豆网m.daumloan.com转载请标明出处.