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

最新推荐文章于 2024-11-08 11:23:10 发布

原创最新推荐文章于 2024-11-08 11:23:10 发布 · 4.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #bootstrap #插件 #ToolTip #提示框

本文介绍了webui-popover，一个基于jQuery的提示框插件，它与Bootstrap兼容但不依赖，支持IE7以上浏览器。特点包括运行速度快、定位灵活、关闭按钮、多实例及样式自定义等。使用方法包括通过HTML的data-*属性或JavaScript直接创建，提供丰富的自定义设置选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天工作中无意中发现一款特别好用的基于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>