当前位置：首页 > 网页特效 > 其他

Bootstrap popover功能扩展jquery插件

分类：其他日期：2024-05-14 点击(4) 评论(0)

简介

在页面中引入jquery和bootstrap相关文件，以及bootstrap-popover-x.css和bootstrap-popover-x.js文件。

```html
<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结构如下：

```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。

```html
<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
```html
<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
```html
<button data-toggle="popover-x"
        data-target="#myPopover"
        data-placement="top">
        Click me
</button>    
```            
最后还可以指定鼠标hover或聚焦按钮是打开Bootstrap Popover。

```html
<button data-toggle="popover-x"
        data-target="#myPopover"
        data-trigger="hover focus">
        Click me
</button>   
```           
#####  初始化插件 初始化插件
也可以通过js代码来初始化Bootstrap Popover。

```html
<-- 例如下面的按钮使用上面相同的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> 
```

web299.com

Bootstrap popover功能扩展jquery插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果