首页 > 其他 > 详细

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

时间:2015-11-30 13:10:28      阅读:269      评论:0      收藏:0      [点我收藏+]

方法

下面是一些弹出框(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>

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

原文:http://www.cnblogs.com/melao2006/p/5006831.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!