事件

下表列出了弹出框（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. ch8 -- useLK

    useLK 光流法跟踪FAST角点 执行    ./useLK ../../data 运行程序. 光流法需要include<opencv2/video/tracking.hpp>,用到列表 ...

  2. Tkinter的l组件常用属性

    Label常用属性 序号 属性 说明 1  anchor   指示文字会被放在控件的什么位置, 可选项有 N, NE, E, SE, S, SW, W, NW, CENTER. 默认为 CENTER. ...

  3. 029 Divide Two Integers 两数相除

    不使用乘号,除号和取模符号将两数相除.如果溢出返回 MAX_INT.详见:https://leetcode.com/problems/divide-two-integers/description/ ...

  4. poj3233(矩阵快速幂的和)

    题目链接:http://poj.org/problem?id=3233 Matrix Power Series Time Limit: 3000MS   Memory Limit: 131072K T ...

  5. map 常用方法

    map遍历: Map map = new HashMap(); Iterator it = map.entrySet().iterator(); while(it.hasNext()) { Map.E ...

  6. 经典SQL语句集锦(收藏版)

    文章来源:http://www.cnblogs.com/herbert/archive/2010/07/02/1770062.html SQL分类: DDL—数据定义语言(CREATE,ALTER,D ...

  7. using System.Web.Script.Serialization

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析和生成.它基于JavaScript Programming Langu ...

  8. .bak文件数据还原

    .bak文件还原(见下图) 1.连接上数据库,右键数据库,选择新建数据库,输入你要还原数据库的名称 2.数据库右键-->任务-->还原-->数据库,弹出窗口选择[源设备],选择.ba ...

  9. 50个必备的jQuery代码段

    本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助 ...

  10. 在Magento System Configuration页面添加配置项

    以 Jp_Coupon 模块为例: 目标: 在 System configuration 页面添加一个 JP tab, 在JP中添加 Coupon section, 然后给 Coupon sectio ...