这是一款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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!