欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jCallout 轻松实现气泡提示功能_jquery

程序员文章站 2022-03-14 13:04:44
...
jCallout的下载地址:https://github.com/anupamsmaurya/jCallout

需要添加此引用

jCallout 轻松实现气泡提示功能_jquery

用户名一行的 html 代码是:

复制代码 代码如下:


用户名:
*


然后在 js 中添加如下代码:

复制代码 代码如下:

$('#hTbxUserName').jCallout(
'initWithoutShow',{
message: "必填项!",
position: "right",
backgroundColor: "#f00",
textColor: "#fff",
showEffect: "fade",
showSpeed: 300,
hideEffect: "fade",
hideSpeed: 300,
$closeElement: $('')
});

需要注意的是 jCallout 有两种初始化的方法:init 和 initWithoutShow,前者初始化后就会立即显示气泡,后者不会立即显示,要在需要时添加代码显示:

复制代码 代码如下:

var $userNameInput = $("#hTbxUserName");
$userNameInput.blur(function() {
if($userNameInput.val().length==0){
$userNameInput.jCallout('show');
}
});

参数 $closeElement 是设置气泡的关闭按钮,看插件源码会发现

复制代码 代码如下:

$closeElement: $('(X)'),

如果不设置 $closeElement: $('') 的话,会出现如下显示,并且,点击 (x) 可以关闭气泡:

jCallout 轻松实现气泡提示功能_jquery

另外,该气泡同样可以显示图片,将图片的 html 代码写入 message 参数即可:

复制代码 代码如下:

message: "jCallout 轻松实现气泡提示功能_jquery必填项!"

jCallout 轻松实现气泡提示功能_jquery