您的位置：首页 > Web前端 > BootStrap

Bootstrap框架学习(五）——Bootstrap插件设计之下拉菜单、滚动监听、标签页

2018-06-13 15:36 357 查看

五、Bootstrap插件设计

    2、下拉菜单（Dropdown）插件

        Bootstrap框架可以将下拉菜单通过组合的方式加入到任何组件之中，譬如：导航条、标签页等。     
<div class="bs-example">
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-collapse">
<span class="sr-only">Toggle Nav</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">下拉菜单</a>
</div>
<div class="collapse navbar-collapse bs-example-js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
下拉菜单A
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1">下拉菜单1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1">下拉菜单2</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1">下拉菜单3</a></li>
</ul>
</li>
<li class="dropdown">
<a id="drop2" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
下拉菜单B
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1">下拉菜单1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1">下拉菜单2</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1">下拉菜单3</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="fat-menu" class="dropdown">
<a id="drop3" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
下拉菜单Z
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1">下拉菜单1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1">下拉菜单2</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1">下拉菜单3</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container-fluid -->
</nav> <!-- /navbar-example -->
</div> <!-- /example -->

    3、滚动监听

        Bootstrap框架的滚动监听插件ScrollSpy，主要应用在导航条上。ScrollSpy插件会根据滚动条的位置自动更新导航条中相应的导航项。其基本的实现是随着滚动，基于滚动条的位置向导航栏添加 .active class。如果想要单独引用该插件的功能，那么您需要引用 scrollspy.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

用法

  • 通过 data 属性：向想要监听的元素（通常是 body）添加 data-spy="scroll"。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。为了它能正常工作，必须确保页面主体中有匹配所要监听链接的 ID 的元素存在。
    <body data-spy="scroll" data-target=".navbar-example">
...
<div class="navbar-example">
    <ul class="nav nav-tabs">
        ...
    </ul>
</div>
...
</body>
  • 通过 JavaScript：可以通过 JavaScript 调用滚动监听，选取要监听的元素，然后调用 .scrollspy() 函数：
    $('body').scrollspy({ target: '.navbar-example' })


<div class="bs-example">
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-scrollspy">
<span class="sr-only">Toggle Nav</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">滚动监听</a>
</div>
<div class="collapse navbar-collapse bs-example-js-navbar-scrollspy">
<ul class="nav navbar-nav">
<li><a href="#header">@顶部</a></li>
<li><a href="#mid">@主体</a></li>
<li class="dropdown">
<a href="#" id="navbarDrop" class="dropdown-toggle" data-toggle="dropdown">下拉菜单<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop">
<li><a href="#setting" tabindex="-1">设置</a></li>
<li><a href="#bbs" tabindex="-1">讨论</a></li>
<li class="divider"></li>
<li><a href="#about" tabindex="-1">关于</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0" class="scrollspy-example">
<h4 id="header">@顶部</h4>
<p>滚动监听 - 顶部</p>
<p>滚动监听 - 顶部</p>
<p>滚动监听 - 顶部</p>
<h4 id="mid">@主体</h4>
<p>滚动监听 - 主体</p>
<p>滚动监听 - 主体</p>
<p>滚动监听 - 主体</p>
<h4 id="setting">设置</h4>
<p>滚动监听 - 设置</p>
<p>滚动监听 - 设置</p>
<p>滚动监听 - 设置</p>
<h4 id="bbs">讨论</h4>
<p>滚动监听 - 讨论</p>
<p>滚动监听 - 讨论</p>
<p>滚动监听 - 讨论</p>
<h4 id="about">关于</h4>
<p>滚动监听 - 关于</p>
<p>滚动监听 - 关于</p>
<p>滚动监听 - 关于</p>
</div>
</div><!-- /example -->

4、可切换式标签页

    Bootstrap可切换式标签页，可使用.nav-tabs类实现。如果需要为标签页设置淡入淡出效果，可添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容。

用法

  • 通过 data 属性：需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。<ul class="nav nav-tabs">     <li><a href="#identifier" data-toggle="tab">Home</a></li>     ... </ul>
  • 通过 JavaScript：可以使用 Javascript 来启用标签页，如下所示：
    $('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
<div class="bs-example bs-example-tabs">
<ul id="navTab" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">主页</a></li>
<li role="presentation"><a href="#news" role="tab" id="news-tab" data-toggle="tab" aria-controls="news">新闻</a></li>
<li role="presentation" class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents">下拉菜单<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
<li><a href="#dropdown1" tabindex="-1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@设置</a></li>
<li><a href="#dropdown2" tabindex="-1" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@定制</a></li>
<li class="divider"></li>
<li><a href="#dropdown3" tabindex="-1" role="tab" id="dropdown3-tab" data-toggle="tab" aria-controls="dropdown3">@关于</a></li>
</ul>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledBy="home-tab">
<p>主页标签页</p>
<p>主页标签页</p>
<p>主页标签页</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="news" aria-labelledBy="profile-tab">
<p>新闻标签页</p>
<p>新闻标签页</p>
<p>新闻标签页</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="dropdown1" aria-labelledBy="dropdown1-tab">
<p>设置标签页</p>
<p>设置标签页</p>
<p>设置标签页</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="dropdown2" aria-labelledBy="dropdown2-tab">
<p>定制标签页</p>
<p>定制标签页</p>
<p>定制标签页</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="dropdown3" aria-labelledBy="dropdown3-tab">
<p>关于</p>
<p>关于</p>
<p>关于</p>
</div>
</div>
</div><!-- /example -->






阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航