前端框架bootstrap--标签页和工具提示插件

image.png

前面已经分享几篇关于bootstrap文章，往后再把本人整理的有关bootstrap分享出来,希望可以帮到读者们！

一.标签页

标签页也就是通常所说的选项卡功能

//基本用法

image.png

效果图

效果图

//可以设置淡入淡出效果fade,而in表示首选的内容默认显示

image.png

效果图

效果图

点击对应按钮显示淡入淡出效果

注意：第一个div属性设置in为了使css3内容显示出来，若不设置in就算设置active，css3内容也隐藏

例子

image.png

效果图

效果图

//也可以换成胶囊式

image.png

效果图

效果图

//data-target

使用data-target绑定或不绑定效果都是一样的
//使用JavaScript，直接使用tab方法

image.png

效果图

效果图

事件类型 描述

Show.bs.tab 在调用tab方法时触发
Shown.bs.tab 在显示整个标签时触发
例子

image.png

效果图

效果图

二.工具提示

工具提示就是通过鼠标移动选定在特定的元素上时，显示相关的提示语
//基本实例

image.png

效果图

效果图

工具提示有很多属性来配置提示的显示，具体如下：

属性名 描述

Data-animation 默认true，在tooltip上应用一个css fade动画。如果设置false，则不应用
Data-html 默认false，不允许提示内容格式为html。如果设置为true，则可以设置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’
data-template 更改提示框的html提示语的模板, 默认值为：

例子

image.png

效果图

效果图

加上data-template="123"

image.png

效果图

效果图

image.png

Javascript方式直接去掉前面的data即可。包括：animation、html、placement、selector、original-title、title、trigger、delay、container和template等属性

image.png

效果图

点击显示123效果

//Javascript方式

image.png

效果图

效果显示相当鼠标划过

JavaScript有四个方法：show、hide、toggle和destory四种

//显示

image.png

效果图

加载时已经显示tooltip

//隐藏

加载时不显示tooltip

//反转显示和隐藏

image.png

效果图

效果图

//隐藏并销毁

image.png

效果图

鼠标划过也显示不了tooltip，已经销毁

Tooltip中事件有四种

事件类型 描述
Show.bs.tooltip 在show方法调用时立即触发
Shown.bs.tooltip 在提示框完全显示给用户之后触发
Hide.bs.tooltip 在hide方法调用时立即触发
Hidden.bs.tooltip 在提示框完全隐藏之后触发

image.png

效果图

效果图

本文作者lilyping
越努力，越幸运
原文链接：https://www.jianshu.com/u/3908e601f4ec
微信公众号：BestLilyPing
github:https://github.com/lilyping
Demos源码地址：https://github.com/lilyping