一.下拉菜单
常规使用中,和组件方法一样,代码如下:
1 //声明式用法 2 <div class="dropdown"> 3 <button class="btn btn-primary" data-toggle="dropdown"> 4 下拉菜单 5 <span class="caret"></span> 6 </button> 7 <ul class="dropdown-menu"> 8 <li><a href="#">首页</a></li> 9 <li><a href="#">产品</a></li> 10 <li><a href="#">资讯</a></li> 11 <li><a href="#">关于</a></li> 12 </ul> 13 </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 方法时立即触发!');
});
二.滚动监听
滚动监听插件是用来根据滚动条所处在的位置自动更新导航项目,显示导航项目高亮显示。
1 //基本示例 2 <nav class="navbar navbar-default"> 3 <a href="#" class="navbar-brand">web开发</a> 4 <ul class="nav navbar-nav"> 5 <li><a href="#HTML5">HTML5</a></li> 6 <li><a href="#bootstrap">bootstrap</a></li> 7 <li class="dropdown"> 8 <a href="#" data-toggle="dropdown">JavaScript<span class="caret"></span></a> 9 <ul class="dropdown-menu"> 10 <li><a href="#jquery">jquery</a></li> 11 <li><a href="#Yui">Yui</a></li> 12 <li><a href="#ExtJS">ExtJS</a></li> 13 </ul> 14 </li> 15 16 </ul> 17 </nav> 18 <div data-offset="0" data-spy="scroll" style="padding: 0 10px; height: 200px;overflow: auto; position: relative;"> 19 <h4 id="HTML5">HTML5</h4> 20 <p>标准通用标记语言下的一个应用HTML 标准自1999 年12 月发布的HTML4.01后,后继的HTML5 和其它标准被束之高阁,为了推动Web 标准化运动的发展,一些</p> 21 <h4 id="bootstrap">bootstrap</h4> 22 <p>标准通用标记语言下的一个应用HTML 标准自1999 年12 月发布的HTML4.01后,后继的HTML5 和其它标准被束之高阁,为了推动Web 标准化运动的发展,一</p> 23 <h4 id="jquery">jquery</h4> 24 <p>标准通用标记语言下的一个应用HTML 标准自1999 年12 月发布的HTML4.01后,后继的HTML5 和其它标准被束之高阁,为了推动Web 标准化运动的发展,一些</p> 25 <h4 id="Yui">Yui</h4> 26 <p>标准通用标记语言下的一个应用HTML 标准自1999 年12 月发布的HTML4.01后,后继的HTML5 和其它标准被束之高阁,为了推动Web 标准化运动的发展,一。</p> 27 <h4 id="ExtJS">ExtJS</h4> 28 <p>标准通用标记语言下的一个应用HTML 标准自1999 年12 月发布的HTML4.01后,后继的HTML5 和其它标准被束之高阁,为了推动Web 标准化运动的发展,一。</p> 29 </div>
PS:在一个菜单和一个容器的时候,data-target 不设置也可以稳定实现滚动监听高亮。但多个导航时,你不关联其中一个,会导致错误,所以,一般要加上。
如果使用JavaScript 脚本方式,可以去掉data-*,使用脚本属性定义:offset、spy和target。具体方法如下:
1 //使用脚本方式定义属性 2 $('#content').scrollspy({ 3 offset : 0, 4 target : '#nav', 5 });
滚动监听还有一个切换到新条目的事件
1 //事件绑定在导航上 2 $('#nav').on('activate.bs.scrollspy', function () { 3 alert('新条目被激活后触发此事件!'); 4 });
滚动监听还有一个更新容器DOM 的方法。
//HTML 部分 <section class="sec"> <h4 id="html5">HTML5<a href="#" οnclick="removeSec(this)">删除此项</a></h4> <p>...</p> </section> //删除内容时,刷新一下DOM,避免导航监听错位 function removeSec(e) { $(e).parents('.sec').remove(); $('#content').scrollspy('refresh'); } 注意:这个方法必须使用data-*声明式。