web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
弹出层
基于Bootstrap的轻量级弹出提示框插件
分类:
弹出层
日期:
2024-05-14
点击(1)
评论(0)
演 示
免费下载
简介
webui-popover是一款基于Bootstrap的轻量级弹出提示框Tooltip插件。该提示框插件可以和Bootstrap完美结合,但是并不一定需要和Bootstrap一起使用。它支持IE8以上的浏览器。它的特点有: - 运行速度快,轻量级。 - 支持多种定位方式。 - 能自动计算提示框位置。 - 在提示框中提供关闭按钮。 - 同一个页面支持多个提示框实例。 - 支持不同的样式。 - 支持使用url和iframe。 - 支持异步加载模式。 #### 使用方法 ------------ 使用这个提示框插件首先需要引入jQuery和jquery.webui-popover.js,jquery.webui-popover.css文件。 ```html
``` ##### 调用插件 可以使用下面的方法来调用一个提示框。 ```html $('a').webuiPopover(options); ``` #### 配置参数 ------------ #### 应用举例 ------------ 创建一个简单提示框: ```html $('a').webuiPopover({title:'Title',content:'Content'}); ``` 通过DOM元素的data-*首先来创建提示框: ```html
``` ```html $('a').webuiPopover(); ``` 在元素的下方插件一个提示框: ```html $('a').webuiPopover({title:'Title',content:'Content',placement:'bottom'}); ``` 在鼠标滑过元素时弹出一个提示框: ```html $('a').webuiPopover({title:'Title',content:'Content',trigger:'hover'}); ``` 创建一个inverse样式的提示框: ```html $('a').webuiPopover({title:'Title',content:'Content',style:'inverse'}); ``` 创建一个固定宽度和高度的提示框: ```html $('a').webuiPopover({title:'Title',content:'Content',width:300,height:200}); ``` 创建一个带关闭按钮的提示框: ```html $('a').webuiPopover({title:'Title',content:'Content',closeable:true}); ``` 创建一个带动画效果的提示框: ```html $('a').webuiPopover({title:'Title',content:'Content',animation:'pop'}); ``` 创建一个内容使用iframe的提示框: ```html $('a').webuiPopover({type:'iframe',url:'https://www.baidu.com'}); ``` 通过异步模式插件一个提示框: ```html $('a').webuiPopover({ type:'async', url:'https://api.github.com/', content:function(data){ var html = '
'; for(var key in data){html+='
'+data[key]+'
';} html+='
'; return html; } }); ``` 创建一个提示框,并通过手动方式来触发它: ```html //Initailize $('a').webuiPopover({trigger:'manual'}); ... //Show it $('a').webuiPopover('show'); ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告