Bootstrap中的 JavaScript 特效 — 下拉菜单和滚动监听插件

一．下拉菜单

　　　　常规使用中，和组件方法一样，代码如下：

//声明式用法
<div class="dropdown">
　　<button class="btn btn-primary" data-toggle="dropdown">
　　　　下拉菜单
　　　　<span class="caret"></span>
 6　　 </button>
　　<ul class="dropdown-menu">
 8　　　　 <li><a href="#">首页</a></li>
　　　　<li><a href="#">产品</a></li>
　　　　<li><a href="#">资讯</a></li>
　　　　<li><a href="#">关于</a></li>
　　</ul>
</div>

　　　　声明式用法的关键核心：
　　　　　　1.外围容器使用class="dropdown"包裹；
　　　　　　2.内部点击按钮事件绑定data-toggle="dropdown"；
　　　　　　3.菜单元素使用class="dropdown-menu"。

　　　　

　　　　在JavaScript 调用中，没有属性，方法并不好用，下面介绍四个基本事件。
　　　　//下拉菜单方法，但仍然需要data-*
　　　　$('#btn').dropdown();
　　　　$('#btn').dropdown('toggle');

 

　　　　下拉菜单支持4 种事件，分别对应弹出前、弹出后、关闭前和关闭后。

　　　　

　　　　//事件，其他雷同
　　　　$('#dropdown').on('show.bs.dropdown', function () {
　　　　　　　　alert('在调用show 方法时立即触发！');
　　　　});

 

二．滚动监听　　

　　　　滚动监听插件是用来根据滚动条所处在的位置自动更新导航项目，显示导航项目高亮显示。

　　//基本示例
   <nav class="navbar navbar-default">
        <a href="#" class="navbar-brand">web开发</a>
        <ul class="nav navbar-nav">
            <li><a href="#HTML5">HTML5</a></li>
            <li><a href="#bootstrap">bootstrap</a></li>
            <li class="dropdown">
                <a href="#" data-toggle="dropdown">JavaScript<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#jquery">jquery</a></li>
                    <li><a href="#Yui">Yui</a></li>
                    <li><a href="#ExtJS">ExtJS</a></li>
                </ul>
            </li>

        </ul>
   </nav>
    <div data-offset="0" data-spy="scroll" style="padding: 0 10px; height: 200px;overflow: auto; position: relative;">
        <h4 id="HTML5">HTML5</h4>
        <p>标准通用标记语言下的一个应用HTML 标准自1999 年12 月发布的HTML4.01后，后继的HTML5 和其它标准被束之高阁，为了推动Web 标准化运动的发展，一些</p>
        <h4 id="bootstrap">bootstrap</h4>
        <p>标准通用标记语言下的一个应用HTML 标准自1999 年12 月发布的HTML4.01后，后继的HTML5 和其它标准被束之高阁，为了推动Web 标准化运动的发展，一</p>
        <h4 id="jquery">jquery</h4>
        <p>标准通用标记语言下的一个应用HTML 标准自1999 年12 月发布的HTML4.01后，后继的HTML5 和其它标准被束之高阁，为了推动Web 标准化运动的发展，一些</p>
        <h4 id="Yui">Yui</h4>
        <p>标准通用标记语言下的一个应用HTML 标准自1999 年12 月发布的HTML4.01后，后继的HTML5 和其它标准被束之高阁，为了推动Web 标准化运动的发展，一。</p>
        <h4 id="ExtJS">ExtJS</h4>
        <p>标准通用标记语言下的一个应用HTML 标准自1999 年12 月发布的HTML4.01后，后继的HTML5 和其它标准被束之高阁，为了推动Web 标准化运动的发展，一。</p>
    </div>

　　　　　　　

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

　　　　

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

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

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

　　　　

//事件绑定在导航上
$('#nav').on('activate.bs.scrollspy', function () {
3　　 alert('新条目被激活后触发此事件！');
});

　　　　滚动监听还有一个更新容器DOM 的方法。

//HTML 部分
<section class="sec">
　　<h4 id="html5">HTML5<a href="#" onclick="removeSec(this)">删除此项</a></h4>
　　<p>...</p>
</section>
//删除内容时，刷新一下DOM，避免导航监听错位
function removeSec(e) {
　　$(e).parents('.sec').remove();
　　$('#content').scrollspy('refresh');
}
注意：这个方法必须使用data-*声明式。