bootstrap 的滚动监听
2016-07-29 00:00
459 查看
应用场景:
在一些单页面的情况下,滚动监听应用比较多。下面是一个效果图:
2、用data--toggle 属性来调用 向您想要监听的元素(通常是 body)添加 data-spy="scroll"。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。为了它能正常工作,您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。
是不是好拗口,嘿嘿,官方的东东就是想绕晕你,不如来个实例来看看。
3、使用JavaScript来调用: 选取要监听的元素,然后调用 .scrollspy() 函数:
4、一般情况下,使用data-toggle属性来调用,比较简单和直接。 下面是一个实例:
注意:data-spy="scroll"的属性和data-target属性的应用。
一定要注意class的对应关系。
这就是滚动监听,现在很流行,不过用bootstrap很简单的就实现了。
在一些单页面的情况下,滚动监听应用比较多。下面是一个效果图:
2、用data--toggle 属性来调用 向您想要监听的元素(通常是 body)添加 data-spy="scroll"。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。为了它能正常工作,您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。
是不是好拗口,嘿嘿,官方的东东就是想绕晕你,不如来个实例来看看。
3、使用JavaScript来调用: 选取要监听的元素,然后调用 .scrollspy() 函数:
$('body').scrollspy({ target: '.navbar-example' })
4、一般情况下,使用data-toggle属性来调用,比较简单和直接。 下面是一个实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap ScrollSpy Example</title> <meta name="description" content="Bootstrap ScrollSpy example. You may also learn usage of navbar and dropdown."> <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> <style type="text/css"> .scrollspy-example { height: 200px; overflow: auto; position: relative; } </style> </head> <body> <div class="span9 columns"> <h2>The links of the following navbar is going to be highlighted</h2> <p>Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!</p> <div id="navbarExample" class="navbar navbar-static"> <div class="navbar-inner"> <div class="container" style="width: auto;"> <a class="brand" href="#">w3cschool</a> <ul class="nav"> <li class="active"><a href="#php">PHP</a></li> <li class=""><a href="#js">JS</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Databases<b class="caret"></b></a> <ul class="dropdown-menu"> <li class=""><a href="#mysql">MySQL</a></li> <li class=""><a href="#pgsql">PostgreSQL</a></li> <li class=""><a href="#mgdb">MongoDB</a></li> </ul> </li> </ul> </div> </div> </div> <div data-spy="scroll" data-target="#navbarExample" data-offset="50" class="scrollspy-example"> <h4 id="php">PHP</h4> <p>PHP, an acronym for Hypertext Preprocessor, is a widely-used open source general-purpose scripting language. It is an HTML embedded scripting language and is especially suited for web development. The basic syntax of PHP is similar to C, Java, and Perl, and is easy to learn. PHP is used for creating interactive and dynamic web pages quickly, but you can do much more with PHP. </p> <h4 id="js">JS</h4> <p> JavaScript is a cross-platform, object-oriented scripting language developed by Netscape. JavaScript was created by Netscape programmer Brendan Eich. It was first released under the name of LiveScript as part of Netscape Navigator 2.0 in September 1995. It was renamed JavaScript on December 4, 1995. As JavaScript works on the client side, It is mostly used for client-side web development. </p> <h4 id="mysql">MySQL</h4> <p> MySQL tutorial of w3cschool is a comprhensive tutorial to learn MySQL. We have hundreds of examples covered, often with PHP code. This helps you to learn how to create PHP-MySQL based web applications. </p> <h4 id="pgsql">PostgreSQL</h4> <p> In 1986 the Defense Advanced Research Projects Agency (DARPA), the Army Research Office (ARO), the National Science Foundation (NSF), and ESL, Inc sponsored Berkeley POSTGRES Project which was led by Michael Stonebrakessr. In 1987 the first demo version of the project is released. In June 1989, Version 1 was released to some external users. Version 2 and 3 were released in 1990 and 1991. Version 3 had support for multiple storage managers, an query executor was improved, rule system was rewritten. After that, POSTGRES has been started to be implemented in various research and development projects. For example, in late 1992, POSTGRES became the primary data manager for the Sequoia 2000 scientific computing project4. User community around the project also has been started increasing; by 1993, it was doubled. </p> <h4 id="mgdb">MongoDB</h4> <p> The term NoSQL was coined by Carlo Strozzi in the year 1998. He used this term to name his Open Source, Light Weight, DataBase which did not have an SQL interface.In the early 2009, when last.fm wanted to organize an event on open-source distributed databases, Eric Evans, a Rackspace employee, reused the term to refer databases which are non-relational, distributed, and does not conform to atomicity, consistency, isolation, durability - four obvious features of traditional relational database systems.</p> <p>After reading the largest third party online MySQL tutorial by w3cschool, you will be able to install, manage and develop PHP-MySQL web applications by your own. We have a comprehensive, SQL TUTORIAL, which will help you to understand how to prepare queries to fetch data against various conditions. </p> </div> <hr> <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script> <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script> <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js"></script> </body> </html>
注意:data-spy="scroll"的属性和data-target属性的应用。
一定要注意class的对应关系。
这就是滚动监听,现在很流行,不过用bootstrap很简单的就实现了。
相关文章推荐
- bootstrap初试进度条
- Bootstrap 3.3.4 发布,Web 前端 UI 框架
- angular 指令简述
- 利用ASP.NET MVC+Bootstrap搭建个人博客之修复UEditor编辑时Bug(四)
- 浅析Bootstrap验证控件的使用
- 基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
- Bootstrap教程JS插件弹出框学习笔记分享
- Bootstrap插件全集
- Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
- Bootstrap框架动态生成Web页面文章内目录的方法
- JS组件Bootstrap Table使用实例分享
- bootstrap学习笔记之初识bootstrap
- Bootstrap下拉菜单效果实例代码分享
- Bootstrap表单组件教程详解
- BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
- Bootstrap每天必学之前端开发框架
- Bootstrap 粘页脚效果
- 第八篇Bootstrap下拉菜单实例代码
- Bootstrap选项卡与Masonry插件的完美结合
- 第一次接触神奇的Bootstrap表单