第二百四十五节，Bootstrap标签页和工具提示插件
Bootstrap标签页和工具提示插件
学习要点：
1.标签页
2.工具提示
本节课我们主要学习一下 Bootstrap 中的标签页和工具提示插件。
一．标签页选项卡
标签页也就是通常所说的选项卡功能。
基本用法
nav样式class类，写在<ul>里，声明导航区域(Bootstrap)
nav-tabs样式class类，写在<ul>里，设置导航样式为选项卡样式(Bootstrap)
active样式class类，写在<li>里，设置当前菜单或当前内容为首选(Bootstrap)
data-toggle="tab"事件，写在<li>里，设置菜单点击事件(Bootstrap)
tab-content样式class类，写在<div>里，设置当前选项卡内容区域(Bootstrap)
tab-pane样式class类，写在选项卡内容区域里的<div>里，设置当前选项内容样式(Bootstrap)
将选项卡的a标签href=对应内容div的id
<ul class="nav nav-tabs"> <li class="active"><a href="#html5" data-toggle="tab">HTML5</a></li> <li><a href="#bootstrap" data-toggle="tab">Bootstrap</a></li> <li><a href="#jquery" data-toggle="tab">jQuery</a></li> <li><a href="#extjs" data-toggle="tab">ExtJS</a></li> </ul> <div class="tab-content" style="padding: 10px;"> <div class="tab-pane active" id="html5">html5</div> <div class="tab-pane" id="bootstrap">bootstrap</div> <div class="tab-pane" id="jquery">jquery</div> <div class="tab-pane" id="extjs">extjs</div> </div>
可以设置淡入淡出效果 fade，而 in 表示首选的内容默认显示
fade样式class类，写在对应内容<div>里，设置内容淡入淡出效果(Bootstrap)
in样式class类，写在对应内容<div>里，设置首选内容淡入淡出效果(Bootstrap)
<ul class="nav nav-tabs"> <li class="active"><a href="#html5" data-toggle="tab">HTML5</a></li> <li><a href="#bootstrap" data-toggle="tab">Bootstrap</a></li> <li><a href="#jquery" data-toggle="tab">jQuery</a></li> <li><a href="#extjs" data-toggle="tab">ExtJS</a></li> </ul> <div class="tab-content" style="padding: 10px;"> <div class="tab-pane active fade in" id="html5">html5</div> <div class="tab-pane fade" id="bootstrap">bootstrap</div> <div class="tab-pane fade" id="jquery">jquery</div> <div class="tab-pane fade" id="extjs">extjs</div> </div>
也可以换成胶囊式
<ul class="nav nav-pills"> <li class="active"><a href="#html5" data-toggle="tab">HTML5</a></li> <li><a href="#bootstrap" data-toggle="tab">Bootstrap</a></li> <li><a href="#jquery" data-toggle="tab">jQuery</a></li> <li><a href="#extjs" data-toggle="tab">ExtJS</a></li> </ul> <div class="tab-content" style="padding: 10px;"> <div class="tab-pane active fade in" id="html5">html5</div> <div class="tab-pane fade" id="bootstrap">bootstrap</div> <div class="tab-pane fade" id="jquery">jquery</div> <div class="tab-pane fade" id="extjs">extjs</div> </div>
将内容区域绑定到指定的选项卡导航的id
data-target="#xxk"事件，将内容区域绑定到指定的选项卡导航，避免多个导航冲突(Bootstrap)
<ul id="xxk" class="nav nav-pills"> <li class="active"><a href="#html5" data-toggle="tab">HTML5</a></li> <li><a href="#bootstrap" data-toggle="tab">Bootstrap</a></li> <li><a href="#jquery" data-toggle="tab">jQuery</a></li> <li><a href="#extjs" data-toggle="tab">ExtJS</a></li> </ul> <div data-target="#xxk" class="tab-content" style="padding: 10px;"> <div class="tab-pane active fade in" id="html5">html5</div> <div class="tab-pane fade" id="bootstrap">bootstrap</div> <div class="tab-pane fade" id="jquery">jquery</div> <div class="tab-pane fade" id="extjs">extjs</div> </div>
使用js执行选项卡
方法
tab('show')方法，将选项卡导航执行选项卡方法事件，可以代替data-toggle="tab"
<ul id="xxk" class="nav nav-tabs"> <li class="active"><a href="#html5">HTML5</a></li> <li><a href="#bootstrap">Bootstrap</a></li> <li><a href="#jquery">jQuery</a></li> <li><a href="#extjs">ExtJS</a></li> </ul> <div data-target="#xxk" class="tab-content" style="padding: 10px;"> <div class="tab-pane active fade in" id="html5">html5</div> <div class="tab-pane fade" id="bootstrap">bootstrap</div> <div class="tab-pane fade" id="jquery">jquery</div> <div class="tab-pane fade" id="extjs">extjs</div> </div>
js
$(function () { $('#xxk a').on('click', function (e) { e.preventDefault(); $(this).tab('show'); }); });
事件
show.bs.tab 在调用 tab 方法时触发(Bootstrap)
shown.bs.tab 在显示整个标签时触发(Bootstrap)
js
$(function () { $('#xxk a').on('click', function (e) { e.preventDefault(); $(this).tab('show'); }); $('#xxk a').on('show.bs.tab', function () { alert('调用 tab 时触发！'); }); $('#xxk a').on('shown.bs.tab', function () { alert('显示完 tab 时触发！'); }); });
HTML
<ul id="xxk" class="nav nav-tabs"> <li class="active"><a href="#html5">HTML5</a></li> <li><a href="#bootstrap">Bootstrap</a></li> <li><a href="#jquery">jQuery</a></li> <li><a href="#extjs">ExtJS</a></li> </ul> <div data-target="#xxk" class="tab-content" style="padding: 10px;"> <div class="tab-pane active fade in" id="html5">html5</div> <div class="tab-pane fade" id="bootstrap">bootstrap</div> <div class="tab-pane fade" id="jquery">jquery</div> <div class="tab-pane fade" id="extjs">extjs</div> </div>
二．工具提示
工具提示就是通过鼠标移动选定在特定的元素上时，显示相关的提示语。
基本实例
以下两个必须
data-toggle="tooltip"事件，写在需要工具提示的元素里，鼠标放上去显示根据提示(Bootstrap)
tooltip()方法，在需要工具提示的元素上使用，将当前元素执行工具提示(Bootstrap)
html
<a id="section" href="#" data-toggle="tooltip" title="超文本标识符">HTML5</a>
js
$(function () { $('#section').tooltip(); });
工具提示有很多属性来配置提示的显示，具体如下：
data-animation 默认 true，在 tooltip 上应用一个 CSS fade 动画。如果设置 false，则不应用。设置是否工具提示淡入淡出
data-html 默认 false，不允许提示内容格式为 html。如果设置为 true，则可以设置 html 格式的提示内容。提示内容是否支持html标签
data-placement 默认值 top，还有 bottom、left、right 和 auto。如果 auto 会自行调整合适的位置，如果是 auto left则会尽量在左边显示，但左边不行就靠右边。设置提示信息位置
data-selector 默认 false，可以选择绑定指定的选择器。可以绑定一个自定义属性的元素
data-original-title 默认空字符串，提示语的内容。优先级比 title 低，设置提示内容
title 默认字空符串，提示语的内容。
data-trigger 默认值 hover foucs，表示怎么触发 tooltip，其他值为：click、manual。多个值用空格隔开，manual手动不能和其他同时设置。设置触发提示方式
data-delay 默认值 0，延迟触发 tooltip(毫秒)，如果传数字则，表示 show/hide 的毫秒数，如果传对象，结构为：{show:500,hide:100}，设置提示显示和隐藏的延迟时间
data-container 默认值 false，将 tooltip 附加到特定的元素上。比如组合按钮组提示，容器不够，可以附加 body 上。container : 'body'，也就是如果提示信息被容器遮挡，可以设置一个外层div，将提示信息的容器重新指定到设置的div上
data-template 更改提示框的 HTML 提示语的模版，默认值为：
<div class='tooltip'>
<div class='tooltip-arrow'></div>
<div class='tooltip-inner'></div>
</div>
部分属性使用方法，其他相同
<a id="section" href="#" data-toggle="tooltip" title="超文本标识符" data-animation="true" data-html="true" data-placement="right" data-trigger="hover" data-delay="0" >HTML5</a>
js
$(function () {
$('#section').tooltip();
});
js使用属性方法，将上面的属性去掉data就是js里使用的属性，如data-delay就是delay
html
<a id="section" href="#" data-toggle="tooltip" title="<b>超文本标识符</b>">HTML5</a>
js 注意这是部分属性的js使用方式其他相同
$(function () {
$('#section').tooltip({
placement:"right", //设置提示信息位置右
html:"false" //设置提示内容支持html标签
});
});
工具提示方法
show工具提示方法参数，在工具提示元素上使用，显示工具提示(Bootstrap)
hide工具提示方法参数，在工具提示元素上使用，隐藏工具提示(Bootstrap)
toggle工具提示方法参数，在工具提示元素上使用，反转显示和隐藏工具提示(Bootstrap)
destroy工具提示方法参数，在工具提示元素上使用，隐藏并销毁工具提示(Bootstrap)
html
<a id="section" href="#" data-toggle="tooltip" title="<b>超文本标识符</b>">HTML5</a>
js
$(function () { $('#section').tooltip({ placement: "right", //设置提示信息位置右 html: "false" //设置提示内容支持html标签 }); $('#section').tooltip('show'); //隐藏 $('#section').tooltip('hide'); //反转显示和隐藏 $('#section').tooltip('toggle'); //隐藏并销毁 $('#section').tooltip('destroy'); });
工具提示事件
show.bs.tooltip 在 show 方法调用时立即触发(Bootstrap)
shown.bs.tooltip 在提示框完全显示给用户之后触发(Bootstrap)
hide.bs.tooltip 在 hide 方法调用时立即触发(Bootstrap)
hidden.bs.tooltip 在提示框完全隐藏之后触发(Bootstrap)
html
<a id="section" href="#" data-toggle="tooltip" title="<b>超文本标识符</b>">HTML5</a>
js
$(function () { $('#section').tooltip({ placement: "right", //设置提示信息位置右 html: "false" //设置提示内容支持html标签 }); $('#section').on('show.bs.tooltip', function () { alert('调用 show 时触发！'); }); $('#section').on('shown.bs.tooltip', function () { alert('在提示框完全显示给用户之后触发！'); }); $('#section').on('hide.bs.tooltip', function () { alert('在 hide 方法调用时立即触发！'); }); $('#section').on('hidden.bs.tooltip', function () { alert('在提示框完全隐藏之后触发！'); }); });
