Fork me on GitHub
滚动监听

(JavaScript插件——滚动监听)

前言

阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html

本文主要来学习一下JavaScript插件--下拉菜单。

滚动监听

案例

滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记。你可以试试滚动这个页面,看看左侧导航的变化。

先把实现的代码上了,你可以通过测试代码先来看看效果。

 View Code

然后运行后,在内容下,也就是有滚动条哪里滚动鼠标齿轮,即可看到效果。

用法1--通过data属性

通过为需要监听的页面元素(一般是<body>)不过在上面添加在了Div上面,你可以自己看看代码就明白了。然后给div添加属性data-spy="scroll"就可很轻松的为顶部导航条添加滚动监听功能。然后为其添加data-target属性,此属性的值为任何Bootstrap中.nav组件的父元素的ID或class。

<div data-offset="0" class="scrollspy-example" data-spy="scroll" data-target="#navbar-example">
........
</div>

导航链接地址必须有对应的目标

导航条内的链接地址必须有对应的页面元素具有同样的ID值。例如,<a href="#home">home</a>必须对应DOM中例如<div id="home"></div>

用法2--通过JavaScript

通过JavaScript启动滚动监听:

    <script type="text/javascript">
      $(function () {
        $('.scrollspy-example').scrollspy({ target:'#navbar-example' });
      })
    </script>

通过将样式类为scrollspy-example的div,去掉它的data-target属性。这样同样可以进行鼠标滚轮的切换。

方法

.scrollspy('refresh')

使用滚动监听插件时,每当页面中从DOM中增加或删除页面元素时,都需要调用此方法以,如下:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

不过暂时还没用到。

选项

可以将选项通过data属性或JavaScript传递。对于data属性,需要将选项名称放到data-之后,例如data-offset=""

事件

 <script type="text/javascript">
     $('#navbar-example').on('activate.bs.scrollspy', function () {
          alert(1);
    })
    </script>

 最后注意:针对滚动监听的内容当然要添加滚动条,也就是要预先添加样式

复制代码
     <style type="text/css">
       .scrollspy-example 
        { 
            height: 200px; 
            overflow: auto;
            position: relative;
            border:1px solid red;
        }
    </style>
复制代码

给与Div内容一定的高度。

总结

 纠结了很久,就是因为针对内容那里没有滚动条。这一点一定记住勒。

本文已更新至Bootstrap3.0入门学习系列导航http://www.cnblogs.com/aehyok/p/3404867.html

 
 

LeetCode:Longest Consecutive Sequence

题目链接

Given an unsorted array of integers, find the length of the longest consecutive elements sequence.

For example,
Given [100, 4, 200, 1, 3, 2],
The longest consecutive elements sequence is [1, 2, 3, 4]. Return its length: 4.

Your algorithm should run in O(n) complexity.

分析:

算法1:首先想到的是排序,排序后遍历一遍就可以找出最长连续序列的长度,只是要稍微注意下判断连续序列的过程中有可能两个元素相同,比如1 2 2 3,排序复杂度n*log(n),虽然题目要求O(n)复杂度,但是这个解法也可以通过OJ,代码如下:

 View Code

算法2:想要O(n)的算法,我们只有以时间换空间,先把数组中所有元素映射到哈希表。然后以题目给出的数组为例:对于100,先向下查找99没找到,然后向上查找101也没找到,那么连续长度是1,从哈希表中删除100;然后是4,向下查找找到3,2,1,向上没有找到5,那么连续长度是4,从哈希表中删除4,3,2,1。这样对哈希表中已存在的某个元素向上和向下查找,直到哈希表为空。算法相当于遍历了一遍数组,然后再遍历了一遍哈希表,复杂的为O(n)。代码如下:                            本文地址

复制代码
 1 class Solution {
 2 public:
 3     int longestConsecutive(vector<int> &num) {
 4         // IMPORTANT: Please reset any member data you declared, as
 5         // the same Solution instance will be reused for each test case.
 6         int res = 1, len = num.size();
 7         if(len == 0)return 0;
 8         unordered_set<int> hashtable;
 9         for(int i = 0; i < len; i++)
10             hashtable.insert(num[i]);
11         while(hashtable.empty() == false)
12         {
13             int currlen = 1;
14             int curr = *(hashtable.begin());
15             hashtable.erase(curr);
16             int tmp = curr-1;
17             while(hashtable.empty()==false && 
18                 hashtable.find(tmp) != hashtable.end())
19             {
20                 hashtable.erase(tmp);
21                 currlen++;
22                 tmp--;
23             }
24             tmp = curr+1;
25             while(hashtable.empty()==false && 
26                 hashtable.find(tmp) != hashtable.end())
27             {
28                 hashtable.erase(tmp);
29                 currlen++;
30                 tmp++;
31             }
32             if(res < currlen)res = currlen;
33         }
34         return res;
35     }
36 };
复制代码

【版权声明】转载请注明出处:http://www.cnblogs.com/TenosDoIt/p/3422249.html

 
 
分类: BootStrap3.0
posted on 2013-11-13 22:50  HackerVirus  阅读(577)  评论(0编辑  收藏  举报