jCallout 实现气泡提示
在提交表单前、焦点转移后或者 keyup 时往往需要对输入的文本就行检验,如果输入内容不符合相关约定则要进行提示或警告,有一个叫 jCallout 的插件可以轻松实现该功能,该插件基于 jQuery 使用,所以使用前需要添加引用 jQuery,以下为本人写的例子,结果如下:
用户名一行的 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) 可以关闭气泡:
另外,该气泡同样可以显示图片,将图片的 html 代码写入 message 参数即可:
message: "<img src='images/11.png'>必填项!"
更多 Demo 见http://jsfiddle.net/anupamsm/zdbpj/5/embedded/result/
jCallout 实现气泡提示的更多相关文章
- CSS实现自定义手型气泡提示
实现自定义的手型气泡提示 <html> <head> <meta charset="utf-8"> <title></titl ...
- C#之使用NotifyIcon实现任务栏托盘菜单,图标闪烁效果及气泡提示
很多程序是只需要后台运行的,甚至不需要自己的应用界面.NotifyIcon提供了程序在任务栏的显示功能 程序下载链接如下: http://download.csdn.net/detail/u01031 ...
- Arc Engine 中添加气泡提示框
一.在ArcMap中的定位操作 已知若干点的经纬度坐标,要求在地图中进行定位: 1.通过Tool >Add X Y data 定位点,注意选择地理坐标系下的wgs 1984坐标系: 2.定位后的 ...
- jquery.validate.unobtrusive.js实现气泡提示mvc错误
改写jquery.validate.unobtrusive.js实现气泡提示mvc错误 个人对于这个js.css不是很擅长,所以这个气泡提醒的样式网上找了下,用了这个http://www.cnblog ...
- iOS 灵活,简易,扩展性强的气泡提示框LFBubbleView(含源码)
一.效果图 二.使用方法 使用简单,4行代码集成. _bubbleView = [[LFBubbleView alloc] initWithFrame:CGRectMake(, , , )]; _bu ...
- 气泡提示 纯CSS
tooltip(气泡提示) 依赖 脚本文件:CalvinTip.js 样式文件:toolTip.css 参数 elems HTMLNode 必须 气泡提示的元素 options Object 可选 多 ...
- Asp.net Mvc 表单验证(气泡提示)
将ASP.NET MVC或ASP.NET Core MVC的表单验证改成气泡提示: //新建一个js文件(如:jquery.validate.Bubble.js),在所有要验证的页面引用 (funct ...
- vue 指令---气泡提示(手撸实战)
菜鸟学习之路//L6zt github 自己在造组件轮子,也就是瞎搞.自己写了个slider组件,想加个气泡提示.为了复用和省事特此写了个指令来解决.预览地址项目地址 github 我叫给它胡博 cs ...
- Tippy.js - 免费开源且高度可定制的气泡提示独立组件
推荐一个非常优秀的 web 气泡提示独立UI组件. 介绍 Tippy.js 是一款用于Web的完整工具提示,弹出菜单,下拉菜单和菜单解决方案.适用于鼠标,键盘和触摸输入. 特点 超轻量的纯 javas ...
随机推荐
- QM课程02-外部功能
质量计划 · 对质量计划和检验计划进行基本数据的管理 · 物料说明 · 检验计划 质量检验 · 触发检验 · 具有检验计划选择和样本计算的检验处理 · 打印采样和检验的车间文档 · 记录结果和缺陷 · ...
- C# 函数覆盖总结学习
覆盖类成员:通过new关键字修饰虚函数表示覆盖该虚函数.一个虚函数被覆盖后,任何父类变量都不能访问该虚函数的具体实现.public virtual void IntroduceMyself(){... ...
- delphi 去掉TreeView水平滚动条
使用API函数:声明 FUNCTION ulong ShowScrollBar(ulong hwnd,ulong wBar,ulong bShow) LIBRARY "user32. ...
- 通过ulimit改善linux系统性能(摘自IBM)
本文介绍了 ulimit 内键指令的主要功能以及用于改善系统性能的 ulimit 用法.通过这篇文章,读者不仅能够了解 ulimit 所起的作用.而且能够学会怎样更好地通过 ulimit 限制资源的使 ...
- [转载]Android开发常用调试技术记录
ANDROID 调试技术: 1)Ps 指令 ls –l /proc/27/ cat /proc/27/cmdline #cmdline文件表示了这个进程所在的命令行. cat /proc/ ...
- [MODX] 0. Mangement System Overview
In Modex, there are three tabs: Resoources, Elements & Files First: 'Files' is the place where t ...
- [MODx] 1. Add Html5 template into the MODx
1. Connet MODx by SSH: Go to the MODx cloud; Find you current user and right click selet Edit Cloud; ...
- Swift学习笔记(一)搭配环境以及代码执行成功
1.Swift是啥? 百度去!度娘告诉你它是苹果最新推出的编程语言,比c,c++,objc要高效简单.可以开发ios,mac相关的app哦!是苹果以后大力推广的语言哦! 2.Swift给你带来什么机会 ...
- Blueprint编译过程
Blueprint 编译概述 一.术语 Blueprint,像C++语言一下的,在游戏中使用前须要编译.当你在BP编辑器中,点击编译button时候.BP资源開始把属性和图例过程转换为一个类对象处理. ...
- Linux守护进程(init.d和xinetd)
http://www.cnblogs.com/itech/archive/2010/12/27/1914846.html