您的位置：首页 > Web前端 > JQuery

好用的基于jQuery的提示框插件--webui-popover

2016-02-18 17:41 831 查看

今天工作中无意中发现一款特别好用的基于jQuery的提示框插件–webui-popover：

该提示框插件可以和Bootstrap完美结合，但是并不一定需要和Bootstrap一起使用。它支持IE7以上的浏览器。它的特点有：

运行速度快，轻量级。

支持多种定位方式。

能自动计算提示框位置。

在提示框中提供关闭按钮。

同一个页面支持多个提示框实例。

支持不同的样式。

支持使用url和iframe。

支持异步加载模式。

使用方法：

它的使用方法特别简单首先在项目中引入必要的js、css文件

然后是HTML部分，也是特别的简单

最后就是创建一个提示框了这里有两种方式可以创建

1、在html标签中使用data-* 属性来创建如：

<a href="#" data-placement="top" data-title="hello" data-content="Content">

这样就创建了一个最简单的提示框。但是这种方式使得html代码显得特别累赘所以推荐使用第二种方式：

2、在js文件中创建：

调用插件封装好的webuiPopover()方法，此方法接受多个参数来对提示框进行自定义的设置。具体的参数详情如下图：

最后附上一个自己做的简单的小例子供各位参考：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="dist/jquery.webui-popover.min.css">
<script src="JS/jquery-1.11.3.min.js"></script>
<script src="dist/jquery.webui-popover.min.js"></script>
<script>
$(function (){
$('a').webuiPopover({title:"hello",content:'Content',style:"inverse",width:"300"});
});
</script>
</head>
<body>
<a href="#">cilck</a>
</body>
</html>

本人也是初次使用次插件有什么介绍的不对的地方还请各位大神指点！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航