bootstrap-js(六)弹出框
实例
为任意元素添加一小块浮层,用于存放非主要信息。
弹出框的标题和内容的长度都是零的话将永远不会被显示出来。
初始化
由于性能的原因,工具提示和弹出框的 data 编程接口(data api)是必须要手动初始化的。
在一个页面上一次性初始化所有弹出框的方式是通过 data-toggle 属性选中
<!DOCTYPE HTML>
<html>
<head>
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" >
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding: 100px 50px 10px;" >
<button type="button" class="btn btn-default" title="Popover title"
data-container="body" data-toggle="popover" data-placement="left"
data-content="左侧的 Popover 中的一些内容">
左侧的 Popover
</button>
<button type="button" class="btn btn-primary" title="Popover title"
data-container="body" data-toggle="popover" data-placement="top"
data-content="顶部的 Popover 中的一些内容">
顶部的 Popover
</button>
<button type="button" class="btn btn-success" title="Popover title"
data-container="body" data-toggle="popover" data-placement="bottom"
data-content="底部的 Popover 中的一些内容">
底部的 Popover
</button>
<button type="button" class="btn btn-warning" title="Popover title"
data-container="body" data-toggle="popover" data-placement="right"
data-content="右侧的 Popover 中的一些内容">
右侧的 Popover
</button>
</div>
<script>$(function ()
{ $("[data-toggle='popover']").popover();
});
</script>
</body>
</html>
1.用法
通过 JavaScript
通过 JavaScript 启用弹出框(popover):
- $('#example').popover(options)
2.参数
可以通过 data 属性或 JavaScript 传递参数。对于 data 属性,将参数名附着到 data- 后面,例如 data-animation=""。
选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
---|---|---|---|
animation | boolean 默认值:true |
data-animation | 为弹出框赋予淡出的 CSS 动画效果。 |
html | boolean 默认值:false |
data-html | 向弹出框插入 HTML。如果为 false,jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击,请使用 text。 |
placement | string|function 默认值:top |
data-placement | 规定如何定位弹出框(即 top|bottom|left|right|auto)。 当指定为 auto 时,会动态调整弹出框。例如,如果 placement 是 "auto left",弹出框将会尽可能显示在左边,在情况不允许的情况下它才会显示在右边。 |
selector | string 默认值:false |
data-selector | 如果提供了一个选择器,弹出框对象将被委派到指定的目标。 |
title | string | function 默认值:'' |
data-title | 如果未指定 title 属性,则 title 选项是默认的 title 值。 |
trigger | string 默认值:'hover focus' |
data-trigger | 定义如何触发弹出框:click| hover | focus | manual。您可以传递多个触发器,每个触发器之间用空格分隔。 |
delay | number | object 默认值:0 |
data-delay | 延迟显示和隐藏弹出框的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字,那么延迟将会应用于显示和隐藏。如果提供的是对象,结构如下所示:
|
container | string | false 默认值:false |
data-container | 向指定元素追加弹出框。 实例: container: 'body' |
3.方法
下面是一些弹出框(Popover)插件中有用的方法:
方法 | 描述 | 实例 |
---|---|---|
Options: .popover(options) | 向元素集合附加弹出框句柄。 |
|
Toggle: .popover('toggle') | 切换显示/隐藏元素的弹出框。 |
|
Show: .popover('show') | 显示元素的弹出框。 |
|
Hide: .popover('hide') | 隐藏元素的弹出框。 |
|
Destroy: .popover('destroy') | 隐藏并销毁元素的弹出框。 |
|
<!DOCTYPE HTML>
<html>
<head>
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" >
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding: 100px 50px 10px;" >
<button type="button" class="btn btn-default popover-show"
title="Popover title" data-container="body"
data-toggle="popover" data-placement="left"
data-content="左侧的 Popover 中的一些内容 —— show 方法">
左侧的 Popover
</button>
<button type="button" class="btn btn-primary popover-hide"
title="Popover title" data-container="body"
data-toggle="popover" data-placement="top"
data-content="顶部的 Popover 中的一些内容 —— hide 方法">
顶部的 Popover
</button>
<button type="button" class="btn btn-success popover-destroy"
title="Popover title" data-container="body"
data-toggle="popover" data-placement="bottom"
data-content="底部的 Popover 中的一些内容 —— destroy 方法">
底部的 Popover
</button>
<button type="button" class="btn btn-warning popover-toggle"
title="Popover title" data-container="body"
data-toggle="popover" data-placement="right"
data-content="右侧的 Popover 中的一些内容 —— toggle 方法">
右侧的 Popover
</button><br><br><br><br><br><br>
<p class="popover-options">
<a href="javascript:void(0);" type="button" class="btn btn-warning" title="<h2>Title</h2>"
data-container="body" data-toggle="popover" data-content="
<h4>Popover 中的一些内容 —— options 方法</h4>">
Popover
</a>
</p>
<script>
$(function () { $('.popover-show').popover('show');});
$(function () { $('.popover-hide').popover('hide');});
$(function () { $('.popover-destroy').popover('destroy');});
$(function () { $('.popover-toggle').popover('toggle');});
$(function () { $(".popover-options a").popover({html : true });});
</script>
</div>
</body>
</html>
4.事件
下表列出了弹出框(Popover)插件中要用到的事件。
事件 | 描述 | 实例 |
---|---|---|
show.bs.popover | 当调用 show 实例方法时立即触发该事件。 |
|
shown.bs.popover | 当弹出框对用户可见时触发该事件(将等待 CSS 过渡效果完成)。 |
|
hide.bs.popover | 当调用 hide 实例方法时立即触发该事件。 |
|
hidden.bs.popover | 当工具提示对用户隐藏时触发该事件(将等待 CSS 过渡效果完成)。 |
|
<!DOCTYPE HTML>
<html>
<head>
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" >
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
</head>
<body>
<div clas="container" style="padding: 100px 50px 10px;" >
<button type="button" class="btn btn-primary popover-show"
title="Popover title" data-container="body"
data-toggle="popover"
data-content="左侧的 Popover 中的一些内容 —— show 方法">
左侧的 Popover
</button>
</div>
<script>
$(function () { $('.popover-show').popover('show');});
$(function () { $('.popover-show').on('shown.bs.popover', function () {
alert("当显示时警告消息");
})});
</script>
</body>
</html>
bootstrap-js(六)弹出框的更多相关文章
- js自定义弹出框
js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...
- js 常见弹出框学习
模拟系统的弹出框 系统自带的弹出框 总结 链接 http://blog.csdn.net/anhuidelinger/article/details/17024491 参考这个网站学习模态框的动态弹 ...
- Bootstrap篇:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你 ...
- 【原创】贡献一个JS的弹出框代码...
一.前言 最近在做一个项目,自己感觉系统自带的alert()方法的弹出框实在是不堪入目,所以在网上找了一些资料,然后自己加工了一下,做出了自己的一个js弹出框,在这里贡献出来,希望对你有帮助. 二.开 ...
- js登录弹出框插件
第一步:页面引入css:<link rel="stylesheet" type="text/css"" href="common/cs ...
- jsp + js + 前端弹出框
在项目中,前端页面我们时常需要各种各样的弹出框: 1.alert对话框:显示含有给定消息的"JavaScript Alert"对话框 代码: var a = "Hello ...
- js swal()弹出框
做前端开发的时候时常会遇到修改成功.新增成功这类弹出框,用alert的话未免有点太low了,而swal()是一个简单又实用的弹出框方法 alert 弹出框样式如下: swal() 弹出框样式如下: 代 ...
- php中bootstrap框架.popover弹出框,鼠标移动到上面自动显示,离开自动消失
<div rel="name"></div> <script> $(function(){//显示弹出框 $("[rel=name]& ...
- js实现弹出框的拖拽
//HTML部分 <div class="wrap"></div> <div class="popUpBox"> <d ...
随机推荐
- 【HDU】1754 I hate it ——线段树 单点更新 区间最值
I Hate It Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- #include <bitset>
1 none();测试是否有越位 2 reset();全部清零 3 set(7, 0);把第7个字符改成0,操作二进制位 4 to_string();转换为字符串 5 to_ulong();转换为无符 ...
- PipedInputStream/PipedOutputStream原理
PipedInputStream类与PipedOutputStream类用于在应用程序中创建管道通信.一个PipedInputStream实例对象必须和一个PipedOutputStream实例对象进 ...
- JavaScript阻止事件冒泡
今天在自学敲代码的时候发现了一个问题,当时的例子如下: <!DOCTYPE html> <html lang="en"> <head> < ...
- ASP.NET中的路径(path) 详解
一 ASP.NET常用路径(path)获取方法与格式对照表 假设我们的网址为http://localhost:1897/ News/Press/Content.aspx?id=1019 跟 Brows ...
- C#读取csv格式文件
方法1:用一个System.Web.UI.HtmlControls.HtmlInputFile去handle文件选取 以下是button click event中的code,用来执行当文件选取了之后读 ...
- Unicode解码、URL编码/解码
+ (NSString *) stringByReplaceUnicode:(NSString *)string { NSMutableString *convertedString = [strin ...
- VB中后台打开Excel文件实现代码
某些时候需要打开Excel文件来获取或者写入数据,但又不希望跳出打开的Excel文件窗口,可以用下面的代码: Dim eb As New excel.Application, wb as excel. ...
- AOP-----动态代理(转)
动态代理是实现AOP的绝好底层技术 JDK的动态代理主要涉及到java.lang.reflect包中的两个类:Proxy和InvocationHandler.其中 InvocationHandler是 ...
- js统计字符串,并且判断出现次数最多的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...