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 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
JQuery最佳实践之精妙的自定义事件
Aug 11 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
JavaSacript中charCodeAt()方法的使用详解
Jun 05 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 Javascript
AngularJS教程之MVC体系结构详解
Aug 16 Javascript
简单实现js放大镜效果
Jul 24 Javascript
Vue自定义事件(详解)
Aug 19 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
JS实现简单的九宫格抽奖
Jun 28 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
php中随机显示图片的函数代码
2011/06/23 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
jquery validate demo 基础
2015/10/29 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
Python中max函数用于二维列表的实例
2018/04/03 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
容易被忽略的Python内置类型
2020/09/03 Python
详解python对象之间的交互
2020/09/29 Python
python mock测试的示例
2020/10/19 Python
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
迪拜航空官方网站:flydubai
2017/04/20 全球购物
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
公务员培训心得体会
2013/12/28 职场文书
婚前财产协议书范本
2014/10/19 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书
redis中lua脚本使用教程
2021/11/01 Redis
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers