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 相关文章推荐
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
js 判断登录界面的账号密码是否为空
Feb 08 Javascript
jquery拖动改变div大小
Jul 04 jQuery
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
JavaScript实现音乐自动切换和轮播
Nov 05 Javascript
详解微信小程序调起键盘性能优化
Jul 24 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
Sep 29 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 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
如何开发一个虚拟域名系统
2006/10/09 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
php微信支付接口开发程序
2016/08/02 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
Element Popover 弹出框的使用示例
2020/07/26 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
Python生成随机MAC地址
2015/03/10 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
Django实现基于类的分页功能
2019/10/31 Python
Python中包的用法及安装
2020/02/11 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
用HTML5制作数字时钟的教程
2015/05/11 HTML / CSS
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
留学生如何写好自荐信
2013/12/27 职场文书
大学生学年自我鉴定
2014/02/10 职场文书
见习报告格式范文
2014/11/08 职场文书
离婚协议书怎么写的
2014/12/14 职场文书
超强台风观后感
2015/06/09 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
python 爬取吉首大学网站成绩单
2021/06/02 Python
SpringBoot整合JWT的入门指南
2021/06/29 Java/Android
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis
Python学习之异常中的finally使用详解
2022/03/16 Python