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 left,right,mid函数
Jun 10 Javascript
学习javascript,实现插入排序实现代码
Jul 31 Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
angular十大常见问题
Mar 07 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 Javascript
Angular 项目实现国际化的方法
Jan 08 Javascript
React Native开发封装Toast与加载Loading组件示例
Sep 08 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 Javascript
js实现3D旋转相册
Aug 02 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中的mongodb select常用操作代码示例
2014/09/06 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
PHP精确计算功能示例
2016/11/29 PHP
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
如何在MVC应用程序中使用Jquery
2014/11/17 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
JavaScript日期类型的一些用法介绍
2015/03/02 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
ES6中class类用法实例浅析
2017/04/06 Javascript
js实现移动端轮播图效果
2020/12/09 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020/08/31 Javascript
py中的目录与文件判别代码
2008/07/16 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
代码详解django中数据库设置
2019/01/28 Python
PyQt5响应回车事件的方法
2019/06/25 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
AC Lens:购买隐形眼镜
2017/02/26 全球购物
集体婚礼策划方案
2014/02/22 职场文书
打架检讨书2000字
2014/02/22 职场文书
小班上学期评语
2014/05/05 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
2015年七一建党节慰问信
2015/03/23 职场文书
重温入党誓词主持词
2015/06/29 职场文书
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB
MySQL去除密码登录告警的方法
2022/04/20 MySQL