Bootstrap JS插件使用实例(4)-滚动侦测
2013-04-28 18:27 阅读(191)


本篇文章讨论Bootstrap的js滚动侦测插件(bootstrap-scrollspy.js)

先看个简单示例,可直接粘贴运行:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动侦测示例</title>
<link href="http://www.see-source.com/bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="http://www.see-source.com/bootstrap/js/jquery.js" type="text/javascript"></script>
<script src="http://www.see-source.com/bootstrap/js/bootstrap-scrollspy.js" type="text/javascript"></script>
</head>
<body style="width:870px; margin:auto;">
<div id="navbarExample" class="navbar">
    <div class="navbar-inner">
       <a class="brand" href="#">项目名称</a>
       <ul class="nav">
          <li class="active"><a href="#fat">红利</a></li>
          <li><a href="#mdo">哈芬</a></li>
          <li><a href="#one">遛狗</a></li>
          <li><a href="#two">失踪</a></li>
          <li><a href="#three">耳光</a></li>
       </ul>
     </div>
</div>

<div data-spy="scroll" data-target="#navbarExample" data-offset="50" style="height:200px; overflow:auto;">
     <h4 id="fat">红利</h4>
     <p>
            中方向美方承诺提高国有企业红利上缴比例,增加上缴利润的中央国企和省级国企的数量,将国有资本经营预算纳入国家预算体系。还承诺,鼓励包括国有公司在内的上市公司增加红利支付。还承诺在信贷提供、税收优惠和监管政策等方面对各类所有制企业一视同仁。<br><br>

	    美方认为,提高国有企业分红比例带来的收入可用于资助政府的社保和养老开支,从而有可能降低中国人大量储蓄的必要性,让他们提高消费支出,从而达到刺激中国内需的目的。
     </p>
     <h4 id="mdo">哈芬</h4>
     <p>
	      据估,中国高铁槽道市场约十几亿元,德国哈芬占70%。业内人士称,中铁设计院的铁道图纸,直接指定使用哈芬,而非技术标准。哈芬在德国使用成本高昂的不锈钢,在中国则是碳钢。更有业内人士证实,目前中国高铁用的实为国内生产,原产几乎不足四分之一。(财新)
     </p>
     <h4 id="one">遛狗</h4>
     <p>
	      近日,拍摄于四川绵阳街头的一张照片引起热议,一辆在路上行驶的法院警车,车窗里伸出一个宠物狗的脑袋,四处张望。此情景被怀疑是公务人员私用警车带宠物狗兜风。经调查得知,这是我国新近引进的一批特殊品种警犬,为麻痹犯罪分子,故意化妆成宠物狗的样子。
     </p>
     <h4 id="two">失踪</h4>
     <p>
	      4月25日,19岁的韩耀在云南省昆明市晋宁县晋城镇南门村鑫云冷库附近失踪。家属在寻找时,竟然发现这一区域已先后有8名青少年失踪,其中近一年内就有6人。有一名青年雷玉生就在此地的大街上被人拖进了一面包车,被扔进黑砖窑强迫劳动,后逃离黑砖窑重获自由。
     </p>
     <h4 id="three">耳光</h4>
     <p>
	      30多岁女人直接吐东西在刚扫过的地上,环卫大姐上去说了两句,结果挨了三巴掌三脚。见到被打的环卫大姐时,她精神不好,坐在凳子上不说话,左脸的伤痕还很显眼,工友在一旁照料她。2012年5月4日,浙江省,杭州市。
     </p>
     <p>
	      尹大姐说:“小孩子都知道不能在街上乱吐。”那女人说:那不就是你们环卫应该做的事情吗?尹大姐说:难道我们环卫工人就低人一等吗?”话音刚落,“啪”“啪”“啪”三个巴掌落在尹大姐脸上。
     </p>
</div>		 
</body>
</html>

运行效果:

需要注意:

Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 doctype。因此这一文档类型必须出现在项目的每个页面的开始部分。

<!DOCTYPE html> 
<html lang="en"> 
 ... 
</html> 


下面来对上面的代码进行解析下:

bootstrap.css   Bootstrap 样式库,这是必不可少的。

jquery.js   引入jquery,Bootstrap插件是jquery插件,依赖于jquery。

bootstrap-scrollspy.js   滚动侦测插件


如上效果图所示,包含俩部分:导航栏、滚动区。所谓滚动侦测就是侦测当前滚动区滚动条的位置然后自动更新导航栏中的链接状态。如上实例中,Bootstrap也定义了一个导航栏样式:

<div id="navbarExample" class="navbar">
    <div class="navbar-inner">
	   <a class="brand" href="#">项目名称</a>
       <ul class="nav">
          <li class="active"><a href="#fat">红利</a></li>
          <li><a href="#mdo">哈芬</a></li>
          <li><a href="#one">遛狗</a></li>
          <li><a href="#two">失踪</a></li>
          <li><a href="#three">耳光</a></li>
       </ul>
     </div>
</div>
.navbar 导航栏整体样式,.nav导航样式,.active 当前活动链接。

滚动区可根据实际需求用户自定义。


下面看下如何使导航栏与滚动区联系起来达到滚动侦测的效果。和其他Bootstrap提供的插件一样,也是有俩种方法:

1.通过data属性

data-spy="scroll"data-target=""添加到滚动区元素上(大部分情况是添加到body上)data-target=""是指向导航栏的,可以用class属性、也可用id,如上面实例中就可写为:data-target=".navbar"或"#navbarExample"。如下:

<div data-spy="scroll" data-target="#navbarExample">...</div>

<div data-spy="scroll" data-target=".navbar">...</div>

2.通过javascript

$().scrollspy()
其中$()是jquery选择器,意思是选择哪个作为滚动区。如上面示例可进行修改,为滚动区添加id="navbarExample":

<div  id="navbarExample" style="height:200px; overflow:auto;">
     <h4 id="fat">红利</h4>
     <p>
            中方向美方承诺提高国有企业红利上缴比例,增加上缴利润的中央国企和省级国企的数量,将国有资本经营预算纳入国家预算体系。还承诺,鼓励包括国有公司在内的上市公司增加红利支付。还承诺在信贷提供、税收优惠和监管政策等方面对各类所有制企业一视同仁。<br><br>

	    美方认为,提高国有企业分红比例带来的收入可用于资助政府的社保和养老开支,从而有可能降低中国人大量储蓄的必要性,让他们提高消费支出,从而达到刺激中国内需的目的。
     </p>
     <h4 id="mdo">哈芬</h4>
     <p>
	      据估,中国高铁槽道市场约十几亿元,德国哈芬占70%。业内人士称,中铁设计院的铁道图纸,直接指定使用哈芬,而非技术标准。哈芬在德国使用成本高昂的不锈钢,在中国则是碳钢。更有业内人士证实,目前中国高铁用的实为国内生产,原产几乎不足四分之一。(财新)
     </p>
     <h4 id="one">遛狗</h4>
     <p>
	      近日,拍摄于四川绵阳街头的一张照片引起热议,一辆在路上行驶的法院警车,车窗里伸出一个宠物狗的脑袋,四处张望。此情景被怀疑是公务人员私用警车带宠物狗兜风。经调查得知,这是我国新近引进的一批特殊品种警犬,为麻痹犯罪分子,故意化妆成宠物狗的样子。
     </p>
     <h4 id="two">失踪</h4>
     <p>
	      4月25日,19岁的韩耀在云南省昆明市晋宁县晋城镇南门村鑫云冷库附近失踪。家属在寻找时,竟然发现这一区域已先后有8名青少年失踪,其中近一年内就有6人。有一名青年雷玉生就在此地的大街上被人拖进了一面包车,被扔进黑砖窑强迫劳动,后逃离黑砖窑重获自由。
     </p>
     <h4 id="three">耳光</h4>
     <p>
	      30多岁女人直接吐东西在刚扫过的地上,环卫大姐上去说了两句,结果挨了三巴掌三脚。见到被打的环卫大姐时,她精神不好,坐在凳子上不说话,左脸的伤痕还很显眼,工友在一旁照料她。2012年5月4日,浙江省,杭州市。
     </p>
     <p>
	      尹大姐说:“小孩子都知道不能在街上乱吐。”那女人说:那不就是你们环卫应该做的事情吗?尹大姐说:难道我们环卫工人就低人一等吗?”话音刚落,“啪”“啪”“啪”三个巴掌落在尹大姐脸上。
     </p>
</div>
那么就可通过js:  $('#navbarExample').scrollspy()即可。


注意! 导航条中链接中指定的id必须与滚动区中设置的id属性值相同。例如,<a href="#fat">home</a>必须和滚动区中<h4 id="fat"></h4>的id值相同


方法 

.scrollspy('refresh') 刷新方法

当滚动监听所作用的滚动区中DOM有增删页面元素的操作时,需要调用下面的refresh方法刷新下:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
});


选项

名称 类型 默认 描述
offset 数字 10 计算滚动位置相对顶端的偏移量,当达到这个偏移量时触发导航栏链接状态改变






事件

当导航栏中的链接状态改变时,或叫切换时,将调用“activate”事件。


Event Description
activate 当导航栏中的链接状态改变时,或叫切换时触发

添加事件:

$('.navbar').on('activate', function () {
  ....
})
其中的$()是jquery选择器,选择导航栏,即将事件添加到导航栏上而不是滚动区上,这点注意。








返回顶部