zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    周总结三
    重大技术需求系统四
    重大技术需求系统三
    重大技术需求系统二
    重大技术需求系统
    周总结(二)
    MJExtension框架介绍
    iOS 中捕获程序崩溃日志
    又是一年1111
    NSAssert的使用
  • 原文地址:https://www.cnblogs.com/melao2006/p/5006846.html
Copyright © 2011-2022 走看看