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

  • 相关阅读:
    C#语法相比其它语言比较独特的地方
    Git源码管理工具使用
    2018年第九届蓝桥杯题目(C/C++B组)汇总
    Unity插件系列之二维码
    在本机使用虚拟机安装一个linux系统,并搭建ftp服务器
    用UE4蓝图制作FPS_零基础学虚幻4第二季
    【坦克大战】Unity3D多人在线游戏(泰课的坦克大战--旋转的螺丝钉)
    Drag(拖拽)和Move(移动)两个脚本
    解决:Word在试图打开文件时遇到错误
    2018年的一些记录,共勉
  • 原文地址:https://www.cnblogs.com/melao2006/p/5006831.html
Copyright © 2011-2022 走看看