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 相关文章推荐
js以对象为索引的关联数组
Jul 04 Javascript
js 判断脚本加载完毕的代码
Jul 13 Javascript
浅谈JavaScript function函数种类
Dec 29 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
移动端横屏的JS代码(beta)
May 16 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
Vue自定义指令封装节流函数的方法示例
Jul 09 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
JavaScript自定义超时API代码实例
Apr 30 Javascript
对vue生命周期的深入理解
Dec 03 Vue.js
最好用的省市二级联动 原生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
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
PHP调用C#开发的dll类库方法
2014/07/28 PHP
帝国cms目录结构分享
2015/07/06 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
jquery随意添加移除html的实现代码
2011/06/21 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
2012/03/05 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
js DOM的事件常见操作实例详解
2019/12/16 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
python正则表达式抓取成语网站
2013/11/20 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
简单了解如何封装自己的Python包
2020/07/08 Python
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
高分子材料与工程专业个人求职信
2013/12/15 职场文书
2014春晚主持词
2014/03/25 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
标准单位租车协议书
2014/09/23 职场文书
新闻人物通讯稿
2014/10/09 职场文书
基层党支部整改方案
2014/10/25 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书
python使用glob检索文件的操作
2021/05/20 Python
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题