Bootstrap历练实例：弹出框(popover)事件
事件
下表列出了弹出框（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 () {
|
实例
下面的实例演示了弹出框（Popover）插件的事件：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：弹出框(popover)事件</title>
<meta charset="utf-8" />
<meta name="viewport"content="width=device-width,initial-scale=1.0" />
<script src="jQuery/jquery-2.1.4.js"></script>
<link rel="stylesheet"href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding:80px 220px 20px">
<button type="button" class="btn btn-success popover-show"data-toggle="popover"data-container="body"data-placement="top"title="popover title"data-content="顶部的popover的一些内容">顶部的popover</button>
</div>
<script>
$(document).ready(function () {
$(".popover-show").popover("show");
$(".popover-show").on("show.bs.popover", function () {
alert("alert message on show");
})
})
</script>
</body>
</html>
Bootstrap历练实例：弹出框(popover)事件的更多相关文章
- Bootstrap 弹出框(Popover)插件
Bootstrap 弹出框(Popover)插件与Bootstrap 提示工具(Tooltip)插件类似,提供了一个扩展的视图,用户只需要把鼠标指针悬停到元素上面即可.弹出框的内容完全由Bootstr ...
- Bootstrap历练实例：警告框(Alert)插件事件
事件 下表列出了警告框(Alert)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 close.bs.alert 当调用 close 实例方法时立即触发该事件. $('#myal ...
- 弹出框 popover.js
弹出框 popover.js 为任意元素添加一小块浮层,就像 iPad 上一样,用于存放非主要信息. 弹出框的标题和内容的长度都是零的话将永远不会被显示出来. 插件依赖 弹出框依赖 工具提示插件 ,因 ...
- Bootstrap历练实例：警告框(Alert)插件的方法
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Bootstrap历练实例：模态框(Modal)插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html>&l ...
- Bootstrap的js插件之弹出框(popover)
data-toggle="popover"--使弹出框可以切换状态: title--设置弹出框的标题: data-content--设置弹出框的内容部分: data-placeme ...
- Bootstrap篇：弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你 ...
- bootstrap学习--模态弹出框modals轮子
1.点击按钮型 <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css"> ...
- 第二百四十六节，Bootstrap弹出框和警告框插件
Bootstrap弹出框和警告框插件 学习要点: 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一．弹出框 弹出框即点击一个元素弹出一个包含标题和内容的 ...
随机推荐
- Orthanc+OHIF DICOM Viewer最佳Dicom解析、在线浏览实践指南（解决方案）
概念 DICOM identifiers Very importantly, the DICOM standard specifies DICOM tags that allow to index e ...
- 洛谷P4018 Roy&October之取石子
题目背景 \(Roy\)和\(October\)两人在玩一个取石子的游戏. 题目描述 游戏规则是这样的:共有\(n\)个石子,两人每次都只能取\(p^k\)个(\(p\)为质数,\(k\)为自然数,且 ...
- 安装pywin32出现--Python version 3.x required, which was not found in the registry
这两天安装pywin32时出现了这个问题 双击.exe文件进入安装界面,然后点击下一步,它会自动定位你的python安装在什么地方,但是我的安装过程中未自动定位到python安装位置,并显示显示: 安 ...
- 交换函数swap的三种实现方法
http://blog.csdn.net/GarfieldEr007/article/details/48314295 本文采用三种方式实现两个数之间的交换,分别是①借助辅助变量temp的swap函数 ...
- Java实例学习——企业进销存管理系统（4）
Java实例学习——企业进销存管理系统(4) (本实例为书上实例,我所记录的是我的学习过程) 开始时间:2月12日 完成时间:暂未完成 2月18日——系统主窗体设计 只看了学习视频 2月19日—— 回 ...
- client的使用
document.documentElement.clientHeight = 464 // 指窗口的可见高度的大小 document.body.clientHeight = 1577 // 指窗口的 ...
- Spring cloud Eureka 服务治理(高可用服务中心)
在微服务的架构中,我们考虑发生故障的情况,所以在生产环境中我们需要对服务中各个组件进行高可用部署. Eureka Server 的高可用实际上就是将自己作为服务想其它服务注册中心注册自己,这样就形成了 ...
- C#高性能Socket服务器IOCP实现
引言我一直在探寻一个高性能的Socket客户端代码.以前,我使用Socket类写了一些基于传统异步编程模型的代码(BeginSend.BeginReceive,等等)也看过很多博客的知识,在linux ...
- 合理设置apache的最大连接数
手头有一个网站在线人数增多,访问时很慢.初步认为是服务器资源不足了,但经反复测试,一旦连接上,不断点击同一个页面上不同的链接,都能迅速打开,这种现象就是说明apache最大连接数已经满了,新的访客只能 ...
- bt5 r3下metasploit连接postgresql数据库
一.查看PostgreSQL使用的端口,默认为7337 #: netstat -tnpl |grep postgres 二.查看Msf配置,里面有默认的用户名和密码 默认配置文件:/opt/metas ...