今天继续学习bootstrap的滚动监听
功能实现的主要代码如下:
<body>
<div>
<nav id="navbar-example" class="navbar navbar-default navbar-static">
<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="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" id="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" data-toggle="dropdown">
下拉菜单<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<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" 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>
</body>
效果图如下:
主要效果就是你点击上面的栏目,他会自动跳转到目标行
好的,现在让我来一步步分析一下代码
首先是第一部分nav元素中的内容
它添加了“navbar”,“navbar-default”和“navbar-static”的类,然后是含有“container-fluid”,“navbar-header”的标签。接着是一个导航栏组的按钮,这个用过很多次了,操作是添加:navbar-toggle collapsed 两个类,为data-toggle属性赋值,利用id为data-target绑定后面的ul,li内容,再用a标签写导航栏名。后面一半部分是使用id补充完导航栏需要的其他具体内容,到目前为止的操作,之前的导航栏似乎还差不多。
第二部分就是监听功能的重点了
定义了一个div,为其添加类“scrollspy-exmple”,同样通过data-target使用id绑定前面的菜单部分,还需要添加一个赋值data-spy=“scroll”
最后再用id和href把导航栏的每一个按钮和内容绑定,监听滚动就实现了
一共用id配data-target套了两层
bootstrap可切换式标签页
在框架中实现可切换标签页是靠添加“.nav-tabs”
点击菜单时内容会自动转换相应内容
代码如下:
<body>
<div>
<ul id="navTab" class="nav nav-tabs">
<li class="active">
<a href="#home" id="home-tab" data-toggle="tab">新闻</a>
</li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">下拉菜单
<span class="caret"></span></a>
<ul class="dropdown-menu" id="myTabDrop1-contents">
<li><a href="#dropdown1" id="dropdown1-tab" data-toggle="tab">@设置</a></li>
<li><a href="#dropdown2" id="dropdown2-tab" data-toggle="tab">@定制</a></li>
<li class="divider"></li>
<li><a href="#dropdown3" id="dropdown3-tab" data-toggle="tab">@关于</a></li>
</ul>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>主页标签页</p>
<p>主页标签页</p>
<p>主页标签页</p>
</div>
<div class="tab-pane fade" id="news">
<p>新闻标签页</p>
<p>新闻标签页</p>
<p>新闻标签页</p>
</div>
<div class="tab-pane fade" id="dropdown1">
<p>定制标签页</p>
<p>定制标签页</p>
<p>定制标签页</p>
</div>
<div class="tab-pane fade" id="dropdown2">
<p>设置标签页</p>
<p>设置标签页</p>
<p>设置标签页</p>
</div>
<div class="tab-pane fade" id="dropdown3">
<p>关于</p>
<p>关于</p>
<p>关于</p>
</div>
</div>
</div>
</body>
现在来分析一下代码的组成
还是分两部分看吧,第一部分是ul元素,第二部分是div
在第一部分中,最外层的ul标签添加类“nav”和“nav-tabs”,赋值id为navTab
ul里面的内容就是普通的导航栏,在这里我用的导航栏是一个单元配一个下拉3层的形式
里面的每一栏只要之一href和后面的id对应还有添加一个data-toggle=“tab”
再来看第二部分,
最外层的div是添加了一个“tab-content”的类
然后里面每一个内容块都是添加了“tab-pane”和“fade”类,如果是默认选中的标签的话还需要额外添加一个active类,然后就是id和之前的herf一一对应绑定
bootstrap提示框
框架中的提示框包括工具提示框,警告框,弹出框三种
工具提示框
工具提示框又分上侧、下侧、左侧、右测、动态、静态的
这部分书上的代码内容又不太行了,果断打开菜鸟!
<h4>工具提示(Tooltip)插件 - 锚</h4>
这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip" title="默认的 Tooltip">默认的 Tooltip</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">左侧的 Tooltip</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">顶部的 Tooltip</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">底部的 Tooltip</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">右侧的 Tooltip</a>
<br>
这个是静态的
静态的格式就是在a标签中加上data-toggle属性为tooltip,然后根据需要填写data-placement属性,title属性是本体文字
<h4>工具提示(Tooltip)插件 - 按钮</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="默认的 Tooltip"> 默认的 Tooltip</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">左侧的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">顶部的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">底部的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">右侧的 Tooltip</button>
上面的是动态的
动态的按钮和面前的差不多,把a标签换成了button,多了一个添加类“btn btn-default”就ok了
要想成功运行以上代码,还需要添加一串js代码
<script>
$(function () {
$("[data-toggle='tooltip']").tooltip();
});
</script>
这串语句的意思是选中含有该属性值得标签元素,执行tooltip(),这个函数具体内容是预设的,我没看过源码我也不知道,反正就这么写就对了