Bootstrap3.0学习第二十轮(JavaScript插件——滚动监听)
来源:互联网 发布:淘宝手机红包在哪设置 编辑:程序博客网 时间:2024/06/05 19:31
Bootstrap3.0学习第二十轮(JavaScript插件——滚动监听)
前言
阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html
本文主要来学习一下JavaScript插件--下拉菜单。
滚动监听
案例
滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记。你可以试试滚动这个页面,看看左侧导航的变化。
先把实现的代码上了,你可以通过测试代码先来看看效果。
然后运行后,在内容下,也就是有滚动条哪里滚动鼠标齿轮,即可看到效果。
用法1--通过data属性
通过为需要监听的页面元素(一般是<body>
)不过在上面添加在了Div上面,你可以自己看看代码就明白了。然后给div添加属性data-spy="scroll"
就可很轻松的为顶部导航条添加滚动监听功能。然后为其添加data-target
属性,此属性的值为任何Bootstrap中.nav
组件的父元素的ID或class。
<div data-offset="0" class="scrollspy-example" data-spy="scroll" data-target="#navbar-example">........</div>
导航链接地址必须有对应的目标
导航条内的链接地址必须有对应的页面元素具有同样的ID值。例如,
<a href="#home">home</a>
必须对应DOM中例如<div id="home"></div>
。
用法2--通过JavaScript
通过JavaScript启动滚动监听:
<script type="text/javascript"> $(function () { $('.scrollspy-example').scrollspy({ target:'#navbar-example' }); }) </script>
通过将样式类为scrollspy-example的div,去掉它的data-target属性。这样同样可以进行鼠标滚轮的切换。
方法
.scrollspy('refresh')
使用滚动监听插件时,每当页面中从DOM中增加或删除页面元素时,都需要调用此方法以,如下:
$('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh')})
不过暂时还没用到。
选项
可以将选项通过data属性或JavaScript传递。对于data属性,需要将选项名称放到data-
之后,例如data-offset=""
。
事件
<script type="text/javascript"> $('#navbar-example').on('activate.bs.scrollspy', function () { alert(1); }) </script>
最后注意:针对滚动监听的内容当然要添加滚动条,也就是要预先添加样式
<style type="text/css"> .scrollspy-example { height: 200px; overflow: auto; position: relative; border:1px solid red; } </style>
给与Div内容一定的高度。
总结
纠结了很久,就是因为针对内容那里没有滚动条。这一点一定记住勒。
本文已更新至Bootstrap3.0入门学习系列导航http://www.cnblogs.com/aehyok/p/3404867.html
- Bootstrap3.0学习第二十轮(JavaScript插件——滚动监听)
- Bootstrap3.0学习第二十轮(JavaScript插件——滚动监听)
- Bootstrap3.0学习第十七轮(JavaScript插件——模态框)
- Bootstrap3.0学习第十七轮(JavaScript插件——模态框)
- BootStrap3.0学习--JavaScript 插件
- BootStrap3.0学习--JavaScript 插件
- Bootstrap3.0学习第二十六轮(JavaScript插件——图片轮播)
- Bootstrap3.0学习第二十六轮(JavaScript插件——图片轮播)
- Bootstrap3.0学习第十八轮(JavaScript插件——下拉菜单)
- Bootstrap3.0学习第十九轮(JavaScript插件——标签页)
- Bootstrap3.0学习第二十四轮(JavaScript插件——按钮)
- Bootstrap3.0学习第二十五轮(JavaScript插件——折叠)
- Bootstrap3.0学习第二十五轮(JavaScript插件——折叠)
- Bootstrap3.0学习第二十四轮(JavaScript插件——按钮)
- Bootstrap3.0学习第十八轮(JavaScript插件——下拉菜单)
- Bootstrap3.0学习第十九轮(JavaScript插件——标签页)
- Bootstrap3.0学习第二十一轮(JavaScript插件——工具提示)
- Bootstrap3.0学习第二十二轮(JavaScript插件——弹出框)
- HDU--3788:ZOJ
- ASIHTTPRequest 详解, http 请求终结者
- 动态往标签节点中添加文本
- Orcale sql语句
- Java final
- Bootstrap3.0学习第二十轮(JavaScript插件——滚动监听)
- android程序更换图标安装后不变解决办法
- hdu 1158(dp)
- JVM并发机制——内存模型、内存可见性和指令重排序
- XDOJ1280 - 睡觉时间
- 黑马程序员—18、19岁的我们,为了梦想,来了黑马 ——黑马,一个让...
- Bootstrap3.0学习第二十一轮(JavaScript插件——工具提示)
- 高聚合 低耦合
- c++class(类)