Popover.js
来源:互联网 发布:如何用记事本编写java 编辑:程序博客网 时间:2024/06/05 11:27
基本配置参数
//常用配置参数:$(document).ready(function() { $('#temp').popover( { trigger:'click', //触发方式 template: '', //自定义模板 title:"标题",//设置 弹出框 的标题 html: true, // 为true的话,data-content里就能放html代码了 content:"",//这里可以直接写字符串,也可以 是一个函数,该函数返回一个字符串; } );}//常用方法:$('#element').popover('show');$('#element').popover('hide');$('#element').popover('destroy')
弹出框(Popover)插件不像之前所讨论的下拉菜单及其他插件那样,它不是纯 CSS 插件。如需使用该插件,您必须使用 jquery 激活它(读取 javascript)。使用下面的脚本来启用页面中的所有的弹出框(popover):
$(function () { $("[data-toggle='popover']").popover(); });
弹窗的默认设置
.popover { position: absolute; top: 0; left: 0; z-index: 1060; display: none; max-width: 276px; //**默认弹窗宽度为276px,如需更改,需要再当页的样式重新设置进行覆盖** padding: 1px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 1.42857143; text-align: left; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-break: normal; word-spacing: normal; word-wrap: normal; white-space: normal; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .2); border-radius: 6px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); box-shadow: 0 5px 10px rgba(0, 0, 0, .2); line-break: auto;}
可以修改或者覆盖.popover的属性,如果只在一个页面中需要修改在其他页面不需要修改时,则可以在这个页面修改.popover的属性:
.popover { width:auto; max-width:800px;}
如果给多个按钮一起绑定了popover,但是在使用的时候只想让一次只出现一个弹出层,如果在点击的时候设置其他绑定了popover弹出层隐藏,再让点击的这一个弹出层显示,如下:
$("button").popover({placement:"left",title:"这是一个弹出层",content:"这特么的是内容!",trigger:" click"});$("button").each(function(){ $(".popover").hide(); //或者$(".popover").popover("hide"); $(this).popover("show")});
这样在显示的时候是没有问题的,但是在第二次或以后再次点击已经被隐藏的弹出层按钮的时候,弹出层会闪动一下,效果不好看。
后来又研究了一下,popover的触发方式有四种,分别是:hover、click、focus、manual,其中manual是手动触发,即使用
$("button").popover({placement:"left",title:"这是一个弹出层",content:"这特么的是内容!",trigger:" manual"});$("button").each(function(){ $(".popover").popover("hide"); $(this).popover("show")});
阅读全文
1 0
- Popover.js
- 在bootstrap中popover.js,popover英文是什么意思?
- popover
- bootstrap popover.js 弹出框组件
- Bootstrap的js插件之弹出框(popover)
- bootstrap中popover.js(弹出框)使用总结+案例
- [前端]弹出框中显示图表(popover.js + echarts.js)
- iOS: popover
- Popover 初探
- Bootstrap中的弹出框插件popover.js中的参数title、content不能使用html代码
- Bootstrap插件(五)——弹出框(popover.js)
- Bootstrap Popover 点击Popover外区域自动关闭Popover
- UIViewController (popover view controller)
- iphone popover库
- iOS: popover window effect
- ios Popover View使用方法
- BootStrap ToolTip , popover
- iPad页面管理-popover
- 数据类型:Boolean——JavaScript知识小结06
- JMS
- VC中“GetVersionExW函数被声明为已否决”的问题?
- OpenClipboard()函数的使用
- android_UI事件传递,点击冲突
- Popover.js
- 微信nickname乱码(emoji)及mysql编码格式设置(utf8mb4)解决的过程
- 自定义角标view
- 初学者入门学习java的简介笔记(2)附加笔记
- ACM 数位DP
- Xcode工程中黄色文件夹(group)与蓝色文件夹(folder)区别
- vc6实现监控程序内存使用情况
- orcle启动服务执行脚本
- Uva 270 Lining Up