事件

下表列出了弹出框（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)事件的更多相关文章

  1. Bootstrap 弹出框(Popover)插件

    Bootstrap 弹出框(Popover)插件与Bootstrap 提示工具(Tooltip)插件类似,提供了一个扩展的视图,用户只需要把鼠标指针悬停到元素上面即可.弹出框的内容完全由Bootstr ...

  2. Bootstrap历练实例：警告框(Alert)插件事件

    事件 下表列出了警告框(Alert)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 close.bs.alert 当调用 close 实例方法时立即触发该事件. $('#myal ...

  3. 弹出框 popover.js

    弹出框 popover.js 为任意元素添加一小块浮层,就像 iPad 上一样,用于存放非主要信息. 弹出框的标题和内容的长度都是零的话将永远不会被显示出来. 插件依赖 弹出框依赖 工具提示插件 ,因 ...

  4. Bootstrap历练实例：警告框(Alert)插件的方法

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  5. Bootstrap历练实例：模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html>&l ...

  6. Bootstrap的js插件之弹出框(popover)

    data-toggle="popover"--使弹出框可以切换状态: title--设置弹出框的标题: data-content--设置弹出框的内容部分: data-placeme ...

  7. Bootstrap篇：弹出框和提示框效果以及代码展示

     前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你 ...

  8. bootstrap学习--模态弹出框modals轮子

    1.点击按钮型 <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css"> ...

  9. 第二百四十六节，Bootstrap弹出框和警告框插件

    Bootstrap弹出框和警告框插件 学习要点: 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一．弹出框 弹出框即点击一个元素弹出一个包含标题和内容的 ...

随机推荐

  1. CTS/APIO后文化课游记

    根据ghj1222的尿性,干什么事都要写一个游记划水记啥的...然后就写嘛... 现在是5.30微机课,先开个坑,学校6.5放假,我将于6.5后开始更新本文 APIO回来后发生的事真的特别多...有的 ...

  2. myclipse运行web的一些问题

    一.修改项目访问路径 项目右键>properties(属性)>输入web搜索>双击web>修改Web-Content root内容即可 二. myeclipse中web项目不自 ...

  3. thinkphp实现登录后返回原界面

    主要思路还是用session记录原地址,在登录后再跳转回原界面 先保存请求login方法界面的url public function savelogin(){ session('returnUrl', ...

  4. ch8 -- directMethod

    稀疏直接法 主要用的g2o的方法.自己定义了一个新的一元边.边的误差项是测量值和由估计得来的x,y对应的灰度值之间的误差.导数为灰度对像素坐标的导数乘以像素坐标对yi*李代数的导数的负数.灰度对于像素 ...

  5. Linux 查询服务器序列号命令

      1.查看服务器型号:dmidecode | grep 'Product Name' 2.查看主板的序列号:dmidecode |grep 'Serial Number' 3.查看系统序列号:dmi ...

  6. An internal error occurred during: "Add Deployment". Container with path org.eclipse.jdt.launching.

    导入非本机项目出现这种错误,原因就是JDK版本不一致. 具体解决步骤如下: 右键项目名→Properties→JavaBuild Path→Libraries→选中JRE SystemLibrary[ ...

  7. Babelfish （关于map<string,string>的用法

    题目链接:https://vjudge.net/contest/237395#problem/A 学习博客:https://blog.csdn.net/lyy289065406/article/det ...

  8. Unity 关于激活

  9. 在myecplise中更新代码发布后没效果

    requestmapping指定路径不能访问: 重新发布,重新访问,清除缓存,重新访问,重启浏览器,清除缓存,重新访问,清除Tomcat相关目录,重新发布,重新访问……折腾了很久,可还是没有解决问题. ...

  10. WebGL之物体选择

    原文地址: WebGL之物体选择 使用WebGL将图形绘制到画布后,如何与外部进行交互?这其中最关键的就是如何实现物体的选择.比如鼠标点击后判断是否选中了某个图形或图形的某个部分. 本节实现的效果: ...