Bootstrap ScrollSpy 用法

天梯梦

浏览: 13655302 次
性别:
来自: 洛杉矶

最近访客更多访客>>

xierui54

简_单

bcrun

hur5457

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript /Jquery / Bootstrap / Web

用法

Twitter Bootstrap 的 ScrollSpy 插件有两种用法：

通过 data 属性

根据情况，给需要监视的页面元素添加 data-spy="scroll" – 一般是 body 元素，并且通过 data-target 属性指定目标：
```
<body data-spy="scroll" data-target=".navbar">...</body>
```
通过 Javascript 语句
```
$('#navbar').scrollspy()
```

举一个例子，如下：

监控的导航部分 HTML 代码：

<div class="bs-docs-sidebar">
    <ul class="nav">
        <li><a href="#one">hello Bootstrp 3</a></li>
        <li><a href="#two">hello jQuery</a></li>
        <li><a href="#three">hello ScrollSpy</a></li>
    </ul>
</div>

导航相对应的内容部分代码：

<div>
    <h2 id="one">This is one.</h2>
    <p>......</p>
    <h2 id="two">This is two.</h2>
    <p>......</p>
    <h2 id="three">This is three.</h2>
    <p>......</p>
</div>

上述代码里，我们点击导航部分的锚链接可以直接跳转到相应的内容部分，这是这最基本的 HTML 结构。

最重要的，导航代码中 ul 含有一个 CSS 类 .nav，它是必需的，没有的话就会导致插件无效果。

应用第一个方法，在 body 元素添加相关属性：

<body data-spy="scroll" data-target=".bs-docs-sidebar">

data-target 属性指向的是 class 为 bs-docs-sidebar 的 div 块。

第二种办法，使用 JavaScript：

$(function(){
    $('.bs-docs-sidebar').scrollspy();
})

Bootstrap 文档推荐第一种方法，因为不用任何的 JavaScript 语句即可实现 ScrollSpy 效果。

附：jsfiddle 示例

调试

如果你的 ScrollSpy 不起作用，则有一个简单的调试办法，利用 fireQuery：

上图是安装 fireQuery 后打开 firebug 面板 HTML 标签页里的截图，因为 fireQuery 会将 jQuery 事件等附加在 HTML 代码中，所以我们可以清楚地看到如下一条规则，

selector=".bs-docs-sidebar .nav li > a"

如果你的导航部分 HTML 结构与它不一样，则说明 jQuery 找不到它要的元素，也就没法生成效果，解决办法是调整代码结构。

来源：www.zfanw.com/blog/bootstrap-scrollspy.html

默认的 bootstrap.css, 不是必须要加载的，只要给 .active 添加自定义的css style就可以！

分享到：

CSS实现背景透明而背景上的文字不透明 | Ubuntu输入密码登陆后又跳回到登录界面

2013-10-12 06:07
浏览 16309
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论