• Bootstrap历练实例:popover插件中的方法


    方法

    下面是一些弹出框(Popover)插件中有用的方法:

    方法描述实例
    Options: .popover(options) 向元素集合附加弹出框句柄。
    $().popover(options)
    Toggle: .popover('toggle') 切换显示/隐藏元素的弹出框。
    $('#element').popover('toggle')
    Show: .popover('show') 显示元素的弹出框。
    $('#element').popover('show')
    Hide: .popover('hide') 隐藏元素的弹出框。
    $('#element').popover('hide')
    Destroy: .popover('destroy') 隐藏并销毁元素的弹出框。
    $('#element').popover('destroy')

    实例

    下面的实例演示了弹出框(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: 100px 220px 50px">
    <button type="button"class="btn btn-success popover-show"data-toggle="popover"data-container="body"data-content="左则的popover中的一些内容"title="popover title"data-placement="left">左则的popover</button>
    <button type="button" class="btn btn-primary popover-hide" data-toggle="popover" data-container="body" data-content="顶部的popover中的一些内容" title="popover title" data-placement="top">顶部的popover</button>
    <button type="button" class="btn btn-info popover-toggle" data-toggle="popover" data-container="body" data-content="右则的popover中的一些内容" title="popover title" data-placement="right">右则的popover</button>
    <button type="button" class="btn btn-warning popover-destroy" data-toggle="popover" data-container="body" data-content="底部的popover中的一些内容" title="popover title" data-placement="left">底部的popover</button>
    </div>
    <script>
    $(document).ready(function () {
    $(".popover-show").popover("show");
    $(".popover-hide").popover("hide");
    $(".popover-toggle").popover("toggle");
    $(".popover-destroy").popover("destroy");
    })
    </script>
    </body>
    </html>

  • 相关阅读:
    微信开发之注册公众号(二)
    我开通个人博客了~~~~
    微信开发之启用开发者模式(三)
    float浮动属性
    数组的定义与特点
    块级元素和行内元素
    对于if判断和switch选择的入门理解
    Form表单
    不知名的作业
    自我介绍
  • 原文地址:https://www.cnblogs.com/melao2006/p/5006831.html
Copyright © 2020-2023  润新知