php show.bs.popover,bootstrap popover用法和popover中文api
Bootstrap popover中文api,通过 JavaScript 调用的。下表列出了这些选项:
Bootstrap popover是Bootstrap3中的弹出提示层功能的插件,下面先来看popover提供的默认配置参数、方法和事件,在Bootstrap popover中文api后面会附上一些实例用法。
Bootstrap popover的默认配置参数如下:
选项名称
类型/默认值
Data 属性名称
描述
animation
boolean
默认值:true
data-animation
向弹出框应用 CSS 动画过渡效果。
content
插入的内容
data-content
要向提示层中插入的内容,默认会把html标签直接显示出来,如果要解析html请把参数:html设为true,文章后面有例子
html
boolean
默认值:false
data-html
如果为true则向弹出框中插入 HTML、为 false则html标签不会被解析,直接显示了出来
placement
string|function
默认值:top
data-placement
弹出框定位方向(即 top|bottom|left|right|auto)。
当指定为 auto 时,会动态调整弹出框。例如,如果 placement 是 "auto left",弹出框将会尽可能显示在左边,在情况不允许的情况下它才会显示在右边。
selector
string
默认值:false
data-selector
定位弹出提示层位于哪个dom节点上,也就是说,你点击一个目标其实是可以在另外一个dom对象上显示出弹出提示层的。
title
string | function
默认值:''
data-title
弹出提示层的title部分的内容,如果未指定 title 属性,则 title 选项是默认的 title 值。
trigger
string
默认值:'hover focus'
data-trigger
弹出框的触发事件: click| hover | focus | manual。您可以传递多个触发器,每个触发器之间用空格分隔。如果设为focus 当按钮失去焦点提示层会消失,例如页面空白处单机提示层消失
template
string
'
可以用这个自定义提示层的dom模板
container
string | false
默认值:false
data-container
向指定元素中追加弹出框,默认是弹出层结构追加到事件节点的后面。这会用在,你的结构中有太多的超出隐藏的时候弹出提示层可能会被挡住,这个时候就比如:
实例: container: 'body'
delay
number | object
默认值:0
data-delay
延迟显示和隐藏弹出框的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字,那么延迟将会应用于显示和隐藏。如果提供的是对象,结构如下所示:
delay:{ show: 500, hide: 100 }
viewport
string | object | function
{ selector: 'body', padding: 0 }
始终位于某个视窗可视范围内 { "selector": "#viewport", "padding": 0 } 用在有视窗区域有滚动条 情况
Bootstrap popover的默认javascript如下:
方法
描述
实例
Options:.popover(options)
向元素集合附加弹出框句柄。
如:var myPopover =$().popover(options)
Toggle:.popover('toggle')
切换显示/隐藏元素的弹出框。
$('#element').popover('toggle')
Show:.popover('show')
显示元素的弹出框。
$('#element').popover('show')
Hide:.popover('hide')
隐藏元素的弹出框。
$('#element').popover('hide')
Destroy:.popover('destroy')
隐藏并销毁元素的弹出框。
$('#element').popover('destroy')
Bootstrap popover弹出层提供的事件如下(主要是做一些回调之类事情):
事件
描述
实例
show.bs.popover
当调用 show 实例方法时立即触发该事件。
$('#mypopover').on('show.bs.popover', function () {
// 执行一些动作...
})
shown.bs.popover
当弹出框对完全弹出时触发该事件(将等待 CSS 过渡效果完成)。
$('#mypopover').on('shown.bs.popover', function () {
// 执行一些动作...
})
hide.bs.popover
当调用 hide 实例方法时立即触发该事件。
$('#mypopover').on('hide.bs.popover', function () {
// 执行一些动作...
})
hidden.bs.popover
当工具提示完全隐藏时触发该事件(将等待 CSS 过渡效果完成)。
$('#mypopover').on('hidden.bs.popover', function () {
// 执行一些动作...
})
Bootstrap popover调用示例如下:
//简单调用
$(".js-btn-top").popover({
placement:"top", //定位方向
title:"懒人建站-jquery插件", //如果不需要标题就不要配置这个选项
content:"内容:懒人建站"
});
//html:true会解析html标签
$(".js-btn-bottom").popover({
trigger:"focus", //如果设为focus 当按钮失去焦点提示层会消失,例如页面空白处单机提示层消失
placement:"bottom",
html:true,
content:'
html:true会解析html标签哦,懒人建站
你也试试吧!
'
});
//事件其实就是一些回调一样的东西,比如隐藏事件hidden,在提示层完全隐藏的时候会触发里面的处理逻辑
$(".js-btn-bottom").on('hidden.bs.popover', function () {
// 执行一些动作...
//这里面的this就是点击的按钮自身
alert(0);
})
↓ 查看全文
php show.bs.popover,bootstrap popover用法和popover中文api相关推荐
- Bootstrap FileInput(文件上传)中文API整理
下载地址.API和DOM地址(英语好的小伙伴可以看看) 下载地址:https://github.com/kartik-v/bootstrap-fileinput API文档 :http://plugi ...
- 学习使用Bootstrap弹出框Popover提示框样式
学习使用Bootstrap弹出框Popover提示框样式 注意事项 弹出方向 失去焦点隐藏 禁用元素弹出提示框 data属性详解 js方法与事件 方法: 事件: 注意事项 popover提示框组件依赖 ...
- Ubuntu 20.04安装中文输入法和切换中文系统
文章目录 前言 1 安装中文输入法 2 切换中文系统 总结 前言 在 Ubuntu 18.04 系统中安装过 sogou 输入法,主要喜欢它能切换皮肤.这次升级到 Ubuntu 20.04,可能年纪大 ...
- vue解决element-ui popover点击取消时 popover的显示与隐藏问题
最近在项目中使用 elementui 中的table组件popover进行开发,官网的案例如果使用数据遍历,操作列使用 <template></template> 做 插槽的话 ...
- Bootstrap Table 中文API 详情
* *$('#table').bootstrapTable({}); *看网上有中文版的,但有些就是字面直接译过来了,而且有的就没有翻译,那就打算自己再翻译一遍,每一条会尽 *最大可能结合尽可能多资料 ...
- Bootstrap系列之-FileInput中文API整理
一. 引入文件 <link href="../css/bootstrap.min.css"rel="stylesheet"> <link ...
- Mysql:替换某个字段中的部分字符串——replace函数
需求:因同事操作不当,使某个字段出现了不必要的字符串,导致数据无法正常解析,需要将该字符串统一去掉. 查看全文 http://www.taodudu.cc/news/show-1017337.html ...
- Bootstrap 弹出框(Popover)插件
弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图.如需激活弹出框,用户只需把鼠标悬停在元素上即可.弹出框的内容完全可使用 Bootstrap 数据 API(Bootstr ...
- bootstrap之popover插件使用
bootstrap可以说是后台管理前端的一个很不错的框架,应用也特别广泛,但笔者认为bootstrap的一些开发文档却不是很足,有时查个东西得找半天. 一般情况下,开源软件的官网是资料最全主要是准确的 ...
最新文章
- 理解T-SQL: 存储过程
- 数据结构:堆(Heap)
- Xamarin Forms启动自带模拟器缓慢
- Java print流简介
- SYSCALL_DEFINE含义
- CCNA认证(1)--CCNA简介
- java编程学习方法_在线学习Java编程的最佳方法
- xml学习总结(四)
- scp windows 和 linux 远程复制 (双向)
- 如何给女朋友解释什么是3PC?
- mailbox 编程_往死里写——从站mailbox实现 | 学步园
- 中国 GDP 20 强城市排行榜(2001-2020)
- bootstrap轮播图 原点变为方块_JS实现无缝切换轮播图(自动+手动)
- 吴恩达深度学习神经网络基础编程作业Python Basics with Numpy
- 联想微型计算机 y720,联想拯救者Y720评测:有颜值的实力派
- 哪款投影仪做家庭影院效果好?家用投影仪哪个好
- 【软件测试】大厂测试开发你真的了解吗?测试开发养成记......
- duilib制作窗体动画效果
- 买个ssl证书费用要多少钱?
- 快来使用HTTPS吧