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>
