jCallout 轻松实现气泡提示功能


Posted in Javascript onSeptember 22, 2013

jCallout的下载地址:https://github.com/anupamsmaurya/jCallout

需要添加此引用

jCallout 轻松实现气泡提示功能

用户名一行的 html 代码是:

<tr>
    <td class="columnName">用户名:</td>
    <td><input id="hTbxUserName" class="needCheck" type="text"/><span class="necessary">*</span></td>
</tr>

然后在 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: $('<span style="float: right; cursor: pointer">(X)</span>'),

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

jCallout 轻松实现气泡提示功能

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

message: "<img src='images/11.png'>必填项!"

jCallout 轻松实现气泡提示功能

Javascript 相关文章推荐
setTimeout和setInterval的浏览器兼容性分析
Feb 27 Javascript
在JavaScript中使用inline函数的问题
Mar 08 Javascript
Extjs学习笔记之三 extjs form更多的表单项
Jan 07 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 Javascript
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
javascript实现信息增删改查的方法
Jul 25 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
js 只比较时间大小的实例
Oct 26 Javascript
JavaScript中的一些隐式转换和总结(推荐)
Dec 22 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 #Javascript
jquery的选择器的使用技巧之如何选择input框
Sep 22 #Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 #Javascript
JS网页播放声音实现代码兼容各种浏览器
Sep 22 #Javascript
js和php如何获取当前url的内容
Sep 22 #Javascript
使用非html5实现js板连连看游戏示例代码
Sep 22 #Javascript
非html5实现js版弹球游戏示例代码
Sep 22 #Javascript
You might like
世界收音机发展史
2021/03/01 无线电
用PHP实现图象锐化代码
2007/06/14 PHP
php操作excel文件 基于phpexcel
2010/07/02 PHP
php守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
php简单防盗链实现方法
2015/07/29 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
javascript闭包的理解和实例
2010/08/12 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
python实现的简单RPG游戏流程实例
2015/06/28 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
python抓取文件夹的所有文件
2018/02/27 Python
TensorFlow损失函数专题详解
2018/04/26 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
C#可否对内存进行直接的操作
2015/02/26 面试题
linux面试相关问题
2012/08/11 面试题
班主任新年寄语
2014/04/04 职场文书
运动会稿件100字
2014/09/24 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
Go 语言中 20 个占位符的整理
2021/10/16 Golang