bootstrap插件学习-bootstrap.scrollspy.js

function ScrollSpy(){} //构造函数
ScrollSpy.prototype = {} //构造器的原型
$.fn.scrollspy = function ( option ){} //jQuery原型上的自定义方法
$.fn.scrollspy.Constructor = ScrollSpy // jQuery原型上的自定义方法
$.fn.scrollspy.defaults = {} //默认参数
$(function(){}) //初始化执行

<style type="text/css">
        .scrollspy-example { height: 200px; overflow: auto; position: relative;}
    </style>

<div id="navbarExample" class="navbar navbar-static">
    <div class="navbar-inner">
        <div class="container" style=" auto;">
            <a class="brand" href="#">项目名称</a>
            <ul class="nav">
                <li class="active">
                    <a href="#fat">红利</a>
                </li>
                <li>
                    <a href="#mdo">哈芬</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="scrollspy-example" data-offset="0" data-target="#navbarExample" data-spy="scroll">
    <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>

/*
  * 初始化执行
  * */
  $(function () {
    $('[data-spy="scroll"]').each(function () {
      var $spy = $(this)
      $spy.scrollspy($spy.data())
    })
  })

 /*
  * jQuery原型上的自定义方法
  * */
  $.fn.scrollspy = function ( option ) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('scrollspy')
        , options = typeof option == 'object' && option;
      if (!data) $this.data('scrollspy', (data = new ScrollSpy(this, options)))//实例化ScrollSpy
      if (typeof option == 'string') data[option]()//传入方法名，执行该方法
    })
  }

/*
  * 构造器
  * */
  function ScrollSpy( element, options) {
    var process = $.proxy(this.process, this)//给原型上的process方法在该作用域下取了个别称
      , $element = $(element).is('body') ? $(window) : $(element)
      , href
    //console.log($element);//window对象
    this.options = $.extend({}, $.fn.scrollspy.defaults, options)

    //console.log(this.options);
    this.$scrollElement = $element.on('scroll.scroll.data-api', process)//绑定scorll事件，执行process方法,返回window的jQuery对象

    this.selector = (this.options.target
      || ((href = $(element).attr('href')) && href.replace(/.*(?=#[^s]+$)/, '')) //strip for ie7
      || '') + ' .nav li > a' //获取头标题的各个a标签

    this.$body = $('body').on('click.scroll.data-api', this.selector, process)//给头标题的各个a标签绑定事件，以便点击后可以跳到指定的内容，返回body的jQuery对象
    this.refresh()
    this.process()//调用原型上的process方法
  }

/*
      * position() 方法返回匹配元素相对于父元素的位置（偏移）。该方法返回的对象包含两个整型属性：top 和 left，以像素计。
      * 获取各个标签对应内容的高度
       * */
    , refresh: function () {
        this.targets = this.$body
          .find(this.selector)//查找头标题的各个a标签
          .map(function () {
            var href = $(this).attr('href')
            return /^#w/.test(href) && $(href).length ? href : null
          })//得到一个object对象，根据index去获取其中类容，有点类数组
        this.offsets = $.map(this.targets, function (id) {
          return $(id).position().top//获取各个标签对应内容的高度
        })
      }

/*
      * 逻辑控制
      * 初始化时，activeTarget为空，scrollTop为0，for循环的第二个判断条件scrollTop >= offsets[i]中将判断false，当i为0时
      * ，targets[0]为#fat时，满足for循环的前三个条件，进入activate方法，
      *
      * */
    , process: function () {
        var scrollTop = this.$scrollElement.scrollTop() + this.options.offset
          , offsets = this.offsets //div内容的高度集合
          , targets = this.targets //div内容的id集合对象
          , activeTarget = this.activeTarget
          , i
for (i = offsets.length; i--;) {
          activeTarget != targets[i]
            && scrollTop >= offsets[i]
            && (!offsets[i + 1] || scrollTop <= offsets[i + 1])
            && this.activate( targets[i] )
        }
      }

/*
      * 逻辑控制后续执行
      * 初始化时将activeTarget设成#fat,所以默认刷新时'红利'这块显示被点击。当我们点击'哈芬'时，通过命名锚直接跳到命名锚的链接
      * 注意其他有两个过程：1.点击'哈芬'按钮，2.滚动条运动，两者都触发了事件。最后都进入了process方法。
      *
      * */
    , activate: function (target) {
        var active
this.activeTarget = target//设置activeTarget属性

        this.$body
          .find(this.selector).parent('.active')
          .removeClass('active')//找到头标题中父节点拥有active类的a标签，并删除a标签的父节点上的active

        active = this.$body
          .find(this.selector + '[href="' + target + '"]')
          .parent('li')
          .addClass('active')//在头标题中，给拥有href='xx'属性的a标签的父节点加上active属性,返回li标签

        if ( active.parent('.dropdown-menu') )  {
          active.closest('li.dropdown').addClass('active')
        }
      }