码迷,mamicode.com
首页 > 其他好文 > 详细

第 19 章 附加导航插件

时间:2016-04-24 17:14:13      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:

学习要点:

1.附加导航插件

主讲教师:李炎恢

本节课我们主要学习一下 Bootstrap 中的附加导航插件。

一.附加导航
附加导航即粘贴在屏幕某处实现锚点功能。
//基本实例

<body data-spy="scroll" data-target="#myScrollspy">

    <div class="container">
        <div class="jumbotron" style="height:150px">
            <h1>Bootstrap Affix</h1>
        </div>
        <div class="row">
            <div class="col-xs-3" id="myScrollspy">
                <ul class="nav nav-pills nav-stacked" data-spy="affix"data-offset-top="150">
                    <li class="active">
                        <a href="#section-1">第一部分 </a>
                    </li>
                    <li>
                        <a href="#section-2">第二部分</a>
                    </li>
                    <li>
                        <a href="#section-3">第三部分</a>
                    </li>
                    <li>
                        <a href="#section-4">第四部分</a>
                    </li>
                    <li>
                        <a href="#section-4">第五部分</a>
                    </li>
                </ul>
            </div>
            <div class="col-xs-9">
                <h2 id="section-1">第一部分</h2>
                <p>
                    ...
                </p>
                <h2 id="section-2">第二部分</h2>
                <p>
                    ...
                </p>
                <h2 id="section-3">第三部分</h2>
                <p>
                    ...
                </p>
                <h2 id="section-4">第四部分</h2>
                <p>
                    ...
                </p>
                <h2 id="section-5">第四部分</h2>
                <p>
                    ...
                </p>
            </div>

        </div>
    </div>

//导航的 CSS 部分

ul.nav-pills {
    width: 200px;
}
ul.nav-pills.affix {
    top: 30px;
}

//JavaScript 代替 data-spy="affix" data-offset-top="125"

$(‘#myAffix‘).affix({
    offset : {
        top : 150
    }
})

我们默认使用的是 top,当然也可以默认居底 bottom。这个定位方式是直接通过 CSS定位的。
//设置成 bottom

ul.nav-tabs.affix-bottom {
    bottom: 30px;
}

//设置成 bottom

$(‘#myAffix‘).affix({
    offset : {
        bottom : 150
    }
})

Affix 包含几个事件,如下:

技术分享

//其他雷同

$(‘#myAffix‘).on(‘affixed-top.bs.affix‘, function() {
    alert(‘触发!‘);
}); 

第 19 章 附加导航插件

标签:

原文地址:http://www.cnblogs.com/zfc2201/p/5427416.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!