iOS UITextView监听滚动到底部 js滚动监听

一．下拉菜单

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

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-*声明式。