bootstrap(选项卡、提示框和弹出框)
来源:互联网 发布:税收数据 编辑:程序博客网 时间:2024/05/29 13:35
选项卡(Tabs)
选项卡Tabs是Web中一种非常常用的功能。用户点击或悬浮对应的菜单项,能切换出对应的内容
Bootstrap框架中的选项卡主要有两部分内容组成:
选项卡组件(也就是菜单组件),对应的是 Bootstrap的 nav-tabs)
底部可以切换的选项卡面板,在 Bootstrap 中通常 tab-pane 来表示.
<!-- 选项卡组件(菜单项nav-tabs)--><ul id="myTab" class="nav nav-tabs" role="tablist"> <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li> <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li> <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li> <li><a href="#security" role="tab" data-toggle="tab">安全</a></li> <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li></ul><!-- 选项卡面板 --><div id="myTabContent" class="tab-content"> <div class="tab-pane active" id="bulletin">公告内容面板</div> <div class="tab-pane" id="rule">规则内容面板</div> <div class="tab-pane" id="forum">论坛内容面板</div> <div class="tab-pane" id="security">安全内容面板</div> <div class="tab-pane" id="welfare">公益内容面板</div></div><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
选项卡–选项卡的结构
一个选项卡主要包括两个部分,其一是菜单项,其二是内容面板
关键一点,选项卡中链接的锚点要与对应的面板内容容器的ID相匹配。
对于面板内容tab-pane都是隐藏的,只有当前面板内容才是显示的:
css源码:.tab-content > .tab-pane { display: none;}.tab-content > .active { display: block;}
选项卡–触发切换效果
选项卡也定义data属性来触发切换效果。当然前提你也要先加载bootstrap.js或者是tab.js。声明式触发选项卡需要满足以下几点要求:
1、选项卡导航链接中要设置 data-toggle=”tab”
2、并且设置 data-target=”对应内容面板的选择符(一般是ID)”;
如果是链接的话,还可以通过 href=”对应内容面板的选择符(一般是ID)”
主要起的作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。
3、面板内容统一放在 tab-content 容器中,而且每个内容面板 tab-pane 都需要设置一个独立的选择符(最好是ID)与选项卡中的 data-target 或 href 的值匹配。
选项卡–为选择卡添加fade样式
为了让面板的隐藏与显示在切换的过程效果更流畅,可以在面板中添加类名 fade,让其产生渐入的效果。
在添加 fade 样式时,最初的默认显示的内容面板一定要记得加上 in 类名,不然其内容用户无法看到
<!-- 选项卡组件(菜单项nav-tabs)--><ul id="myTab" class="nav nav-tabs" role="tablist"> <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li> <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li> <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li> <li><a href="#security" role="tab" data-toggle="tab">安全</a></li> <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li></ul><!-- 选项卡面板 --><div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="bulletin">公告内容面板</div> <div class="tab-pane fade" id="rule">规则内容面板</div> <div class="tab-pane fade" id="forum">论坛内容面板</div> <div class="tab-pane fade" id="security">安全内容面板</div> <div class="tab-pane fade" id="welfare">公益内容面板</div></div><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
选项卡–胶囊式选项卡(nav-pills)
在Bootstrap除了可以让 nav-tabs 具有选项卡的切换功能之外,还可以对胶囊式 nav-pills 导航也具有选项卡的功能。我们只需要将 nav-tabs 换成 nav-pills,另外关键一点是将 data-toggle=”tab”换成data-toggle=”pill”。
<!-- 选项卡组件(菜单项nav-pills)--><ul id="myTab" class="nav nav-pills" role="tablist"> <li class="active"><a href="#bulletin" role="tab" data-toggle="pill">公告</a></li> <li><a href="#rule" role="tab" data-toggle="pill">规则</a></li> <li><a href="#forum" role="tab" data-toggle="pill">论坛</a></li> <li><a href="#security" role="tab" data-toggle="pill">安全</a></li> <li><a href="#welfare" role="tab" data-toggle="pill">公益</a></li></ul><!-- 选项卡面板 --><div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="bulletin">公告内容面板</div> <div class="tab-pane fade" id="rule">规则内容面板</div> <div class="tab-pane fade" id="forum">论坛内容面板</div> <div class="tab-pane fade" id="security">安全内容面板</div> <div class="tab-pane fade" id="welfare">公益内容面板</div></div>
选项卡–JavaScript触发方法
在每个链接的单击事件中调用tab(“show”)方法,显示对应的标签面板内容。针对上面的示例,删除HTML中自定义的 data-toggle=”tab” 或 data-toggle=”pill” 的属性,然后通过下面的脚本来调用:
$(function(){ $("#myTab a").click(function(e){ e.preventDefault(); $(this).tab("show"); });})实例 :<!-- 选项卡组件(菜单项nav-tabs)--><ul id="myTab2" class="nav nav-tabs" role="tablist"> <li><a href="#a" role="tab">娱乐</a></li> <li><a href="#b" role="tab">房产</a></li> <li><a href="#c" role="tab">国内</a></li> <li><a href="#d" role="tab">国外</a></li> </ul><!-- 选项卡面板 --><div id="myTabContent2" class="tab-content"> <div class="tab-pane fade in active" id="a">娱乐内容面板</div> <div class="tab-pane fade" id="b">房产内容面板</div> <div class="tab-pane fade" id="c">国内内容面板</div> <div class="tab-pane fade" id="d">国外内容面板</div> </div><script> $(function(){ $("#myTab2 a").click(function(e){ e.preventDefault(); $(this).tab("show"); });})</script>
提示框(Tooltip)
样式文件:
LESS版本:对应源文件 tooltips.less
<style id="jsbin-css"> body { padding: 100px; } .btn { margin: 20px 10px 20px; } </style></head><body> <h3>按钮做的提示框</h3> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" data-original-title="提示框居左" title=""> 提示框居左 </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="提示框在顶部"> 提示框在顶部 </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-original-title="提示框在底部"> 提示框在底部 </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" data-original-title="提示框居右"> 提示框居右 </button> <h3>链接制作的提示框</h3> <a class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="提示框居左"> 提示框居左 </a> <a class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="提示框在顶部"> 提示框在顶部 </a> <a class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="提示框在底部"> 提示框在底部 </a> <a class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="提示框在居右"> 提示框居右 </a> <a href="##" class="btn btn-primary" id="myTooltip"> 我是提示框 </a> <a href="##" class="btn btn-primary" id="myTooltip2"> 我是提示框2 </a> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script> $(function(){ //添加提示框的事件 $('[data-toggle="tooltip"]').tooltip(); //能过js来更改提示框 $('#myTooltip').tooltip({ title:"我是一个提示框,我在顶部出现", placement:'top' }); }); </script>
通过 title 属性的值来定义提示信息(也可以使用自定义属性 data-original-title 来设置提示信息)。
通过 data-placement 自定义属性来控制提示信息框的位置,根据四种不同的位置,data-placement具有四个值:top、right、bottom和left,分别表示提示框出现的位置在顶部、右边、底部和左边。
还有一个最重要的参数不可缺少,data-toggle=”tooltip”。
需要特别注意的是:
1、如果同时设置了 data-original-title 和 title 定义提示信息,那么 data-original-title 的优先级要高于 title。只有 data-original-title 值为空时,才会取 title 的值做为提示信息的内容。
2、Bootstrap框架中的提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发。
提示框–其他的自定义属性
提示框–JS设置参数方法
弹出框(Popover)
不同的是:弹出框除了有标题 title 以外还增加了内容 content 部分。这个在提示框中是没有的。
样式文件:
☑ LESS版本:对应的源文件是 popovers.less
<button type="button" class="btn btn-default" id="myPopover">猛击我吧</button><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script><script>$(function(){ $('#myPopover').popover({ title:"我是弹出框的标题", content:"我是弹出框的内容", placement:"right" });});</script>
弹出框–弹出框的结构
弹出框Popover和提示框tooltip相比,就多了一个content内容,那么在此使用 data-content 来定义弹出框中的内容。同样可以使用或者标签来制作,
调用popover的时候,options的参数与声明式选择里以data-开头的自定义属性一样。都可以在options里设置,
<button type="button" data-toggle="popover" class="btn btn-default" id="myPopover"> 鼠标放上显示弹出框 </button><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script><script>//通过js来定义弹出框$(function(){ $('#myPopover').popover({ title:"我是弹出框的标题", content:"我是弹出框的内容", placement:"top", trigger:"hover" });});</script>
弹出框–提示框和弹出框的异同
提示框 tooltip 的默认触发事件是 hover 和 focus,而弹出框 popover 是 click
提示框 tooltip 只有一个内容(title),而弹出框不仅可以设置标题(title)还可以设置内容(content)
提示框tooltip的模板:
<div class="tooltip" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"></div></div>
弹出框popover的模板:
<div class="popover" role="tooltip"> <div class="arrow"></div> <h3 class="popover-title"></h3> <div class="popover-content"></div></div>
- bootstrap(选项卡、提示框和弹出框)
- bootstrap提示和弹出框
- bootstrap 弹出框,提示框。
- Bootstrap 提示工具和弹出框(Popover)插件
- 点击弹出带有确定和取消选项的提示框
- BootStrap 工具提示 弹出框 警告框
- bootstrap中dialog弹出框(警告/提示)
- JS组件Bootstrap实现弹出框和提示框效果代码
- JS组件Bootstrap实现弹出框和提示框效果代码
- Bootstrap 选项卡和面板
- bootstrap modal弹出框
- bootstrap弹出框
- bootstrap弹出框居中
- Bootstrap 弹出框
- bootstrap 各类弹出框
- bootstrap弹出框
- Bootstrap弹出框
- bootstrap弹出框
- Holding Bin-Laden Captive!
- Objective-C Expected a type错误
- 导出EXCEL,PDF 方法简单明了
- WCF REST 工作总结(一)
- android 自做一个简单的ORM数据库框架
- bootstrap(选项卡、提示框和弹出框)
- Java中对文件的信息的读出,输出在控制台上
- 结合java讲sql server存储过程
- 如何在SpringMVC中获取request对象
- printf()参数传递
- ajax
- 树状数组(木有看到图)
- Dungeon Game
- android常用工具类 --- 网络、手机信息封装