对话框/Tips
Popover功能扩展jquery提示插件
PetitQ
这是一款 Bootstrap popover 功能扩展 jquery 插件。该 jquery 插件在原生 Bootstrap popover 功能的基础上，添加了一些新的功能，例如自动定位，支持情景模式等。
使用方法：
在页面中引入 jquery 和 bootstrap 相关文件，以及 bootstrap-popover-x.css 和 bootstrap-popover-x.js 文件。
也想出现在这里？联系我们吧
<link href="path/to/bootstrap.min.css" rel="stylesheet">
<link href="path/to/bootstrap-popover-x.css" rel="stylesheet">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/bootstrap.min.js"></script>
<script src="path/to/bootstrap-popover-x.js"></script>
HTML 结构：
一个 Bootstrap Popover 的基本 HTML 结构如下：
<div id="myPopover" class="popover popover-default">
<div class="arrow"></div>
<h3 class="popover-title">
<span class="close pull-right" data-dismiss="popover-x">×</span>
Title here
</h3>
<div class="popover-content">
Popover content goes here
</div>
<div class="popover-footer">
Footer here
</div>
</div>
然后可以通过一个按钮来触发 Popover。
<button class="btn btn-primary btn-lg" data-toggle="popover-x"
data-target="#myPopover"
data-placement="top">Top</button>
插件为 Popover 内置了 6 种情景模式
popover-default
popover-primary
popover-info
popover-success
popover-danger
popover-warning
<div id="myPopover" class="popover popover-danger">
...</div>
你还可以指定 Popover 出现的位置。
right
left
top
bottom
top top-left
top top-right
bottom bottom-left
bottom bottom-right
left left-top
left left-bottom
right right-top
right right-bottom
auto
auto-top
auto-right
auto-bottom
auto-left
horizontal
vertical
<button data-toggle="popover-x"
data-target="#myPopover"
data-placement="top">
Click me
</button>
最后还可以指定鼠标 hover 或聚焦按钮是打开 Bootstrap Popover。
<button data-toggle="popover-x"
data-target="#myPopover"
data-trigger="hover focus">
Click me
</button>
初始化插件：
也可以通过 js 代码来初始化 Bootstrap Popover。
<-- 例如下面的按钮使用上面相同的popover内容标签 -->
<button id="#btn1" class="btn btn-primary btn-lg">Top</button>
<script>
$(document).on('ready', function() {
// initialize popover on click of `#btn1`$('#btn1').popoverButton({
target: '#myPopover1'
});
// or alternatively initialize popover on hover of `#btn1`$('#btn1').popoverButton({
target: '#myPopover1',
trigger: 'hover focus'
});
});
</script>
该 Bootstrap popover 功能扩展 jquery 插件的 github 地址为：https://github.com/kartik-v/bootstrap-popover-x
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
