>

美洲杯在线投注_2019美洲杯外围投注[投注官网]

热门关键词: 美洲杯在线投注,2019美洲杯外围投注[投注官网]

Bootstrap每天必学之滚动监听,bootstrap滚动监听

- 编辑:美洲杯在线投注 -

Bootstrap每天必学之滚动监听,bootstrap滚动监听

$('yourTag').scrollspy({ target: 'nav-parent-div-id' }) -- yourTag 就是要承载滚动内容的元素的ID,nav-parent-div-id 就是.nav元素的父元素的id(也就是data-target的值)

您可能感兴趣的文章:

  • Bootstrap每天必学之基础排版
  • Bootstrap每天必学之表单
  • Bootstrap每天必学之栅格系统(布局)
  • Bootstrap每天必学之按钮
  • Bootstrap每天必学之导航
  • Bootstrap每天必学之导航条
  • Bootstrap每天必学之缩略图与警示窗
  • Bootstrap每天必学之进度条
  • Bootstrap每天必学之媒体对象
  • Bootstrap每天必学之面板

http://www.bkjia.com/Javascript/1111402.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1111402.htmlTechArticleBootstrap每天必学之滚动监听,bootstrap滚动监听 本文为大家介绍Bootstrap滚动监听,供大家学习,具体内容如下 1. Scrollspy currently requires the u...

以上就是本文的全部内容,希望对大家的学习有所帮助。

Bootstrap每天必学之滚动监听,bootstrap滚动监听

本文为大家介绍Bootstrap滚动监听,供大家学习,具体内容如下

  1. Scrollspy currently requires the use of a Bootstrap nav component for proper highlighting of active links.

---- 使用滚动监听的话,导航栏必须采用 class="nav"的nav组件才可以:

下面是源代码中的一段,标红的部分可以证明这一点:

使用ScrollSpy的时候,需要采用<ul class="nav">标签,并且在<li>下必须有<a>标签。

注:另外我们需要把<ul class="nav">标签放到另一个容器内(如div),并给父容器添加一个id属性(这一点在第4节有介绍)

function ScrollSpy(element, options) {
  this.$body     = $(document.body)
  this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)
  this.options    = $.extend({}, ScrollSpy.DEFAULTS, options)
  this.selector    = (this.options.target || '')   ' .nav li > a'
  this.offsets    = []
  this.targets    = []
  this.activeTarget  = null
  this.scrollHeight  = 0

  this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))
  this.refresh()
  this.process()
 }
  1. Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div>.

简单的说,就是<li>下的<a>标签必须有一个href="#id"属性,并且在滚动的内容里面,必须有对应的<a id="id"></a>这样的标签;当内容滚动到<a id="id">标签时,对应的<li>的<a href="#id">就会自动被选中。

--其实这一点做过Web开发的朋友都知道,在之前的HTML版本中,锚标记 通常采用<a name="tag">这样的方式,但HTML5中的锚标记已经抛弃了name属性,而是采用id属性

 ScrollSpy.prototype.activate = function (target) {
  this.activeTarget = target

  this.clear()

  var selector = this.selector  
   '[data-target="'   target   '"],'  
   this.selector   '[href="'   target   '"]'

  var active = $(selector)
   .parents('li')
   .addClass('active')

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

  active.trigger('activate.bs.scrollspy')
 }
  1. No matter the implementation method, scrollspy requires the use of position: relative; on the element you're spying on. In most cases this is the <body>. When scrollspying on elements other than the <body>, be sure to have a height set and overflow-y: scroll; applied.

--- 如果监听Body的滚动,那么你必须给body添加position:relative样式


如果监听的不是Body,而是其他得元素[貌似这种方式常见],那么你需要添加三个样式:position:relative;height:500px;overflow-y:scroll;

ScrollSpy.prototype.refresh = function () {
  var that     = this
  var offsetMethod = 'offset'
  var offsetBase  = 0

  this.offsets   = []
  this.targets   = []
  this.scrollHeight = this.getScrollHeight()

  if (!$.isWindow(this.$scrollElement[0])) {
   offsetMethod = 'position'
   offsetBase  = this.$scrollElement.scrollTop()
  }
  1. To easily add scrollspy behavior to your topbar navigation, add data-spy="scroll" to the element you want to spy on (most typically this would be the <body>). Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .navcomponent.

--- 你需要给滚动内容的标签添加 data-spy="scroll"属性和data-target属性

data-spy 属性指明了被监听的元素,data-target属性指明滚动时需要控制的nav高亮显示

再看一次下面的初始化源代码,标红的位置,this.options.target的值,就等于滚动内容元素的data-target的值,看到这里,你或许已经想到,在定义.nav组件的时候,我们需要把.nav放在另一个容器内(比如div),且该容器需要有一个id属性(与这里data-target需要设置的值相同)。

function ScrollSpy(element, options) {
  this.$body     = $(document.body)
  this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)
  this.options    = $.extend({}, ScrollSpy.DEFAULTS, options)
  this.selector    = (this.options.target || '')   ' .nav li > a'
  this.offsets    = []
  this.targets    = []
  this.activeTarget  = null
  this.scrollHeight  = 0

  this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))
  this.refresh()
  this.process()
 }
  1. After adding position: relative; in your CSS, call the scrollspy via JavaScript:

$('yourTag').scrollspy({ target: 'nav-parent-div-id' }) -- yourTag 就是要承载滚动内容的元素的ID,nav-parent-div-id 就是.nav元素的父元素的id(也就是data-target的值)

乱七八糟写了一堆,下面总结一个简单的几个步骤:

  1. 添加标签<div id="scrollSpyID">

  2. 在标签内添加.nav组件,并给li->a添加href="#tag"属性

  3. 添加<div id="content" data-spy="scroll" data-target="#scrollSpyID">;

  4. 添加样式#content{height:500px;overflow-y:scroll;opsition:relative;}

  5. 添加脚本$('#content').scrollspy({target:'scrollSpyID'});

最后来个小栗子:

<style type="text/css">
    #body {
      position: relative;
      height: 500px;
      overflow-y: scroll;
    }
  </style>

<div id="sc">
    <ul class="nav nav-pills">
      <li class="active">
        <a href="#A">第一段</a>
      </li>
      <li>
        <a href="#B">第二段</a>
      </li>
      <li>
        <a href="#C">第三段</a>
      </li>
    </ul>

  </div>

<div id="body" class="container-fluid" data-spy="scroll" data-target="#sc">

  <a id="A">第一段</a><br />

    <!-- 这里要有很多内容,至少要保证可以滚动 -->

  <a id="A">第二段</a><br />

    <!-- 这里要有很多内容,至少要保证可以滚动 -->

  <a id="A">第三段</a><br />

    <!-- 这里要有很多内容,至少要保证可以滚动 -->

</div>

$(function () {
  $('#body').scrollspy({ target: '#sc' });
});

以上就是本文的全部内容,希望对大家的学习有所帮助。

  2. 在标签内添加.nav组件,并给li->a添加href="#tag"属性


--- 如果监听Body的滚动,那么你必须给body添加position:relative样式

下面是源代码中的一段,标红的部分可以证明这一点:

  1. To easily add scrollspy behavior to your topbar navigation, add data-spy="scroll" to the element you want to spy on (most typically this would be the <body>). Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .navcomponent.

 ScrollSpy.prototype.activate = function (target) {
 this.activeTarget = target

 this.clear()

 var selector = this.selector  
  '[data-target="'   target   '"],'  
  this.selector   '[href="'   target   '"]'

 var active = $(selector)
  .parents('li')
  .addClass('active')

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

 active.trigger('activate.bs.scrollspy')
 }

  5. 添加脚本$('#content').scrollspy({target:'scrollSpyID'});

最后来个小栗子:

<style type="text/css">
  #body {
   position: relative;
   height: 500px;
   overflow-y: scroll;
  }
 </style>


<div id="sc">
  <ul class="nav nav-pills">
   <li class="active">
    <a href="#A">第一段</a>
   </li>
   <li>
    <a href="#B">第二段</a>
   </li>
   <li>
    <a href="#C">第三段</a>
   </li>
  </ul>

 </div>



<div id="body" class="container-fluid" data-spy="scroll" data-target="#sc">

  <a id="A">第一段</a><br />

    <!-- 这里要有很多内容,至少要保证可以滚动 -->

  <a id="A">第二段</a><br />

    <!-- 这里要有很多内容,至少要保证可以滚动 -->

  <a id="A">第三段</a><br />

    <!-- 这里要有很多内容,至少要保证可以滚动 -->

</div>



$(function () {
 $('#body').scrollspy({ target: '#sc' });
});
  1. No matter the implementation method, scrollspy requires the use of position: relative; on the element you're spying on. In most cases this is the <body>. When scrollspying on elements other than the <body>, be sure to have a height set and overflow-y: scroll; applied.

简单的说,就是<li>下的<a>标签必须有一个href="#id"属性,并且在滚动的内容里面,必须有对应的<a id="id"></a>这样的标签;当内容滚动到<a id="id">标签时,对应的<li>的<a href="#id">就会自动被选中。

本文为大家介绍Bootstrap滚动监听,供大家学习,具体内容如下

--其实这一点做过Web开发的朋友都知道,在之前的HTML版本中,锚标记 通常采用<a name="tag">这样的方式,但HTML5中的锚标记已经抛弃了name属性,而是采用id属性

  1. 添加标签<div id="scrollSpyID">

  4. 添加样式#content{height:500px;overflow-y:scroll;opsition:relative;}

本文由计算机教程发布,转载请注明来源:Bootstrap每天必学之滚动监听,bootstrap滚动监听