【Bootstrap学习笔记】8.下拉菜单和滚动监听插件

最新推荐文章于 2024-08-25 21:29:11 发布

sunraito

最新推荐文章于 2024-08-25 21:29:11 发布

阅读量850

点赞数

分类专栏： Bootstrap学习笔记(李炎恢版) 文章标签： bootstrip

本文链接：https://blog.csdn.net/sunraito/article/details/82026585

版权

Bootstrap学习笔记(李炎恢版) 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

十四、下拉菜单和滚动监听插件

学习内容

下拉菜单插件
下拉菜单插件的事件
滚动监听插件
滚动监听插件的事件
滚动监听插件的方法

● 下拉菜单插件

一、声明式用法（同组件）
核心：
1.外围使用.dropdown包裹
2.按钮使用data-toggle="dropdown"触发
3.下拉菜单使用.dropdown-menu
4.如果按钮放在容器外，使用data-target="#myDropdown"绑定

<!--按钮在容器内-->
<div class="dropdown">
   <button class="btn btn-info" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">首页</a></li>
        <li><a href="#">资讯</a></li>
        <li><a href="#">科技</a></li>
    </ul>
</div>

<!--按钮在容器外-->
<button class="btn btn-info" data-toggle="dropdown" data-target="#aa">
    下拉菜单
    <span class="caret"></span>
</button>
<div class="dropdown" id="aa">

    <ul class="dropdown-menu">
        <li><a href="#">首页</a></li>
        <li><a href="#">资讯</a></li>
        <li><a href="#">科技</a></li>
    </ul>
</div>

二、javascript方式用法(不太好用)
一般不单独使用，仍需在btn内搭配data-*，否则作用太不明显

<div class="dropdown">
    <button class="btn btn-info" id="btn">
        点击下拉
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">首页</a></li>
        <li><a href="#">科技</a></li>
        <li><a href="#">资讯</a></li>
    </ul>
</div>

<script>
    //效果是点击按钮可以显示下拉菜单，但是却无法关闭
    $('#btn').dropdown();

    //效果是页面加载时就显示下拉菜单，且无法关闭
    $('#btn').dropdown('toggle');
</script>

事件

show.bs.dropdown
shown.bs.dropdown
hide.bs.dropdown
hidden.bs.dropdown

<script>
   $('#dd').on('show.bs.dropdown',function(){
        alert('show时触发');
    });
</script>

● 滚动监听插件(锚点)

滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。
这里用一个导航条<nav>来示例

<nav class="navbar navbar-default">
<a href="#" class="navbar-brand">动漫</a>
    <ul class="nav navbar-nav">
        <li><a href="#">海贼王</a></li>
        <li><a href="#">全职猎人</a></li>
        <li><a href="#">火影忍者</a></li>
        <li class="dropdown">
            <a href="#" data-toggle="dropdown">
               其它动漫
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">一拳超人</a></li>
                <li><a href="#">死神</a></li>
                <li><a href="#">七龙珠</a></li>
            </ul>
        </li>
    </ul>
</nav>

这里写图片描述

接上文
1.用 div>section>h4+p 给每个链接添加对应内容，并且设置对应锚点
2.给<nav>设置一个id，如“#myNav”，给div增加三个data属性：
(1) data-spy="scroll" 值只能是scroll，即设置滚动容器监听
(2) data-offset="0" 值为数字，即边距多大时触发监听
(3) data-target="#myNav" 对应导航的id，避免多导航情况下的混乱
3.两点注意
(1) div须为滚动容器，即设置高度，并且将overflow设置为scroll或auto
(2) div的position必须设置为relative

<!--注意给nav设置id-->
<nav class="navbar navbar-default" id="myNav">
    <a href="#" class="navbar-brand">动漫</a>
    <!--注意锚点设置-->
    <ul class="nav navbar-nav">
        <li><a href="#op">海贼王</a></li>
        <li><a href="#hh">全职猎人</a></li>
        <li><a href="#na">火影忍者</a></li>
        <li class="dropdown">
            <a href="#" data-toggle="dropdown">
               其它动漫
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#opm">一拳超人</a></li>
                <li><a href="#bl">死神</a></li>
                <li><a href="#db">七龙珠</a></li>
            </ul>
        </li>
    </ul>
</nav>

<!--注意三个data属性以及style属性-->
<div data-spy="scroll" data-offset="0" data-target="#myNav" style="max-height:200px; overflow:scroll; position:relative">
   <section>
        <h4 id="op">海贼王</h4>
        <p>《航海王》是日本漫画家尾田荣一郎作画的少年漫画作品，在《周刊少年Jump》1997年34号开始连载。改编的电视动画《航海王》于1999年10月20日起在富士电视台首播。2012年5月11日，《航海王》获得第41回日本漫画家协会赏 [1]  。截至2015年6月15日，《航海王》以日本本土累计发行了3亿2086万6000本，被吉尼斯世界纪录官方认证为“世界上发行量最高的单一作者创作的系列漫画” [2]  。2017年7月21日，日本纪念日协会通过认证，将每年的7月22日设立为“ONE PIECE纪念日” [3]  。</p>
    </section>

    <scction>
        <h4 id="hh">全职猎人</h4>
        <p>《全职猎人》 [1]  （英文：HUNTER×HUNTER，日文：ハンター×ハンター），是日本漫画家富坚义博的一部漫画作品。该作于1998年起在日本漫画杂志《周刊少年Jump》（集英社）不定期连载，另亦有根据原作改编的同名电视动画、剧场版和电子游戏等周边媒体产品。在汉字文化圈中主要有两部周刊漫画杂志连载《全职猎人》的中文版，分别是：“宝岛少年”（台湾），“EX-am”（香港）。而美国则由Viz Communications负责出版。</p>
    </scction>

    <scction>
        <h4 id="na">火影忍者</h4>
        <p>电视动画《火影忍者》改编自日本漫画家岸本齐史的同名漫画，2002年10月3日在东京电视台系列全6局、岐阜放送首播，共220话；第二季《火影忍者疾风传》自2007年2月开始播出，共500话；累计全720话。故事成功地将原本隐藏在黑暗中，用世界上最强大的毅力和最艰辛的努力去做最密不可宣和隐讳残酷的事情的忍者，描绘成了太阳下最值得骄傲最光明无限的职业。系列续作《博人传-火影次世代-》2017年4月播出。 [1]  </p>
    </scction>

    <scction>
        <h4 id="opm">一拳超人</h4>
        <p>《一拳超人》是由ONE原作、村田雄介作画，连载于网络漫画杂志《邻座的Young jump》上的漫画。 [1-2]  原为ONE在个人网站上连载的练笔之作， [3]  后被喜爱该作的另一漫画家村田雄介，在征得ONE同意后重新绘制而成。至2016年11月27日，重制版日文单行销量累计突破1111万部。 [4</p>
    </scction>

    <scction>
        <h4 id="bl">死神</h4>
        <p>《BLEACH》（原意“漂白”，片假名：ブリーチ）是久保带人创作，2001年开始连载于集英社旗下《周刊少年JUMP》上的漫画。亦改编有同名动画及轻小说。至日文单行本第71卷发售时，累计发行量突破8600万册。 [1]  
台湾东立出版社译为《死神》（后为大陆网络所通用），香港文化传信译为《漂灵》，大陆连环画出版社先后拟定译名为“死神”、“净灵”，但均未通过新闻出版署审批，最后译为《境·界》。简体中文单行本由株式会社集英社正式授权，连环画出版社引进出版，北京中少动漫图书有限公司代理发行简体中文版。2014年7月10日，《境·界》（死神）全彩版漫画登陆中国移动和动漫，这是集英社历史上第一次在中国授权全彩漫画电子版权 [2]  。2016年8月22日发行的《周刊少年JUMP》38号中完结。</p>
    </scction>

    <scction>
        <h4 id="db">七龙珠</h4>
        <p>《龙珠》（DRAGON BALL），是七龙珠系列中的开山之作，根据日本著名漫画家鸟山明的同名漫画改编，于1986年2月26日在日本富士电视台首播。1986年东映动画公司把早期（1-194篇）的漫画改成一部153集的动画， [1]  七龙珠系列TV动画就此诞生。</p>
    </scction>
</div>

滚动容器滚动时，对应的导航条自动产生一个.active样式
这里写图片描述

使用JavaScript脚本方式

<script>
//默认值初始化 
//$('#myScroll').scrollspy();

//带参数初始化
$('#myScroll').scrollspy({
    offset:0,
    target:'#myNav',
});
</script>

事件

activate.bs.scrollspy 新条目被激活后触发事件

<script>
   $('#myNav').on('activate.bs.scrollspy',function(){
        alert('新条目被激活！');
   });
</script>

方法

refresh 更新容器DOM方法。比如滚动容器内的内容被删除后，要重新刷新容器避免导航监听错位。
写法：$('#myScroll').scrollspy('refresh');

<script>
    //删除内容项后刷新滚动容器
    function removesec(e){
        $(e).parents('.sec').remove();
        $('#myScroll').scrollspy('refresh');
    }
</script>