大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

Bootstrap滚动监听插件怎么使用

这篇文章主要介绍了Bootstrap滚动监听插件怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Bootstrap滚动监听插件怎么使用文章都会有所收获,下面我们一起来看看吧。

我们提供的服务有:网站建设、成都网站设计、微信公众号开发、网站优化、网站认证、定兴ssl等。为1000+企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的定兴网站制作公司

一、用法
您可以向顶部导航添加滚动监听行为:

1、通过 data 属性:向您想要监听的元素(通常是 body)添加 data-spy="scroll"。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。为了它能正常工作,您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。


 ...
 
  
   ...
  
 
 ...

2、通过 JavaScript:您可以通过 JavaScript 调用滚动监听,选取要监听的元素,然后调用 .scrollspy() 函数:
$('body').scrollspy({ target: '.navbar-example' })
二、滚动监听
滚动监听插件是用来根据滚动条所处在的位置自动更新导航项目, 显示导航项目高亮显示。

//基本实例

  Web 开发
  
    
  •       HTML5     
  •     
  •       Bootstrap     
  •            JavaScript                 
  •           jQuery         
  •         
  •           Yui         
  •         
  •           Extjs         
  •                  HTML5   

        标准通用标记语言下的一个应用 HTML 标准自 1999 年 12 月发布的 HTML4.01后,后继的 HTML5 和其它标准被束之高阁,为了推动 Web 标准化运动的发展,一些公司联合起来,成立了一个叫做 Web Hypertext Application Technology Working Group(Web 超文本应用技术工作组 -WHATWG) 的组织。WHATWG 致力于 Web 表单和应用程序,而 W3C(World Wide Web Consortium,万维网联盟) 专注于 XHTML2.0。在 2006 年,     双方决定进行合作,来创建一个新版本的 HTML。   

      Bootstrap   

        Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、 CSS、 JAVASCRIPT 的, 它简洁灵活, 使得 Web 开发更加快捷。 [1]它由 Twitter的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS/HTML 框架。Bootstrap提供了优雅的 HTML 和 CSS 规范,它即是由动态 CSS 语言 Less 写成。Bootstrap 一经推出后颇受欢迎,一直是 GitHub 上的热门开源项目,包括 NASA 的 MSNBC(微软全国广播公司)的 Breaking News 都使用了该项目。[2]国内一些移动开发者较为熟悉的框架,如 WeX5前端开源框架等,也是基于 Bootstrap 源码进行性能优化而来。[3]   

      jQuery   

        JQuery 是继 prototype 之后又一个优秀的 Javascript 库。 它是轻量级的 js库 ,它兼容 CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+) ,jQuery2.0 及后续版本将不再支持 IE6/7/8 浏览器。jQuery 使用户能更方便地处理 HTML(标准通用标记语言下的一个应用) 、 events、 实现动画效果, 并且方便地为网站提供 AJAX交互。jQuery 还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。 jQuery 能够使用户的 html 页面保持代码和 html 内容分离, 也就是说, 不用再在 html 里面插入一堆 js 来调用命令了, 只需要定义 id 即可。   

      Yui   

        近几年随着 jQuery、Ext 以及 CSS3 的发展,以 Bootstrap 为代表的前端开发框架如雨后春笋般挤入视野, 可谓应接不暇。 不论是桌面浏览器端还是移动端都涌现出很多优秀的框架,极大丰富了开发素材,也方便了大家的开发。这些框架各有特点,本文对这些框架进行初步的介绍与比较, 希望能够为大家选择框架提供一点帮助, 也为后续详细研究这些框架的抛砖引玉。   

      Extjs   

        ExtJS 可以用来开发 RIA 也即富客户端的 AJAX 应用,是一个用 javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端 ajax 框架。因此,可以把 ExtJS 用在.Net、Java、Php 等各种开发语言开发的应用中。ExtJs 最开始基于 YUI 技术,由开发人员 JackSlocum 开发,通过参考 JavaSwing 等机制来组织可视化组件,无论从 UI 界面上 CSS 样式的应用,到数据解析上的异常处理,都可算是一款不可多得的JavaScript 客户端技术的精品。   

    这里有两个重要的属性,如下图:

    Bootstrap滚动监听插件怎么使用

    PS:在一个菜单和一个容易的时候,data-target 不设置也可以稳定实现滚动监听高亮。但多个导航时,你不关联其中一个,会导致错误,所以,一般要加上。

    如果使用 JavaScript 脚本方式, 可以去掉 data-*, 使用脚本属性定义: offset、 spy和 target。具体方法如下:

    //使用脚本方式定义属性
    
    $('#content').scrollspy({
      offset : 0,
      target : '#nav',
    });

    滚动监听还有一个切换到新条目的事件。

    Bootstrap滚动监听插件怎么使用

    //事件绑定在导航上

    $('#nav').on('activate.bs.scrollspy', function() {
        alert('新条目被激活后触发此事件!');
    });
    滚动监听还有一个更新容器 DOM 的方法。

    Bootstrap滚动监听插件怎么使用

    //HTML 部分

    
      HTML5 删除此项
      

        ...   

    //删除内容时,刷新一下 DOM,避免导航监听错位

    function removeSec(e) {
      $(e).parents('.sec').remove();
      $('#content').scrollspy('refresh');
    }

    注意:这个方法必须使用 data-*声明式。

    关于“Bootstrap滚动监听插件怎么使用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“Bootstrap滚动监听插件怎么使用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。


    本文题目:Bootstrap滚动监听插件怎么使用
    文章网址:http://dzwzjz.com/article/jdegsg.html

    其他资讯

    在线咨询
    服务热线
    服务热线:028-86922220
    TOP