jCallout 轻松实现气泡提示功能
jCallout的下载地址:https://github.com/anupamsmaurya/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) 可以关闭气泡:
另外,该气泡同样可以显示图片,将图片的 html 代码写入 message 参数即可:
message: "<img src='images/11.png'>必填项!"
相关推荐
-
JS+CSS实现一个气泡提示框
分享一个气泡提示框,练习的技术有:(1)JS响应鼠标的事件:(2)纯CSS制作三角形. 效果这样: 这是html: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>气泡对话框</title> <script src="myBubbleTooltip.js"></script>
-
JQuery实现简单时尚快捷的气泡提示插件
在程序提交后,我们需要验证并提示出错的位置,利用JQuery我们可以轻松实现气泡提示,先看效果图: 具体调用代码: 复制代码 代码如下: <input name="ipt" id="ipt" value=""/> <script language="javascript"> Tooltip.show('输入值为空!','ipt'); </script> 其实现过程如下: 1.首先我们在Pho
-
基于jquery的气泡提示效果
代码注释已经尽可能的详细了,也不多说了. 初步测试暂未发现大的BUG,总体来说不满意的是鼠标移来移去不断触发气泡时会出现XX为空或不是对象的问题, 虽然不影响效果,但看着IE左下角的黄色警告不爽,暂时不知道如何改进. 加了try/catch解决... 还有就是气泡默认出现在触发对象的正上方,当触发对象在边上时,气泡会有一部分出现在窗口外面......也许这种情况可以让气泡显示在左边或是右边,感觉可能会有些麻烦,就没去弄了,比较懒...... 越用jquery就越喜欢用它... bubble.js
-
jquery.cvtooltip.js 基于jquery的气泡提示插件
序 1.插件名cvtooltip中的cv是ChinaValue的首字母缩写,而tooltip就是提示啦. 2.适用于新功能的提示,引导用户的提示,即时类消息的提示,操作失败提示(操作成功了也没人拦着)等等等,使用css实现,不附带任何图片文件. 3.目前发现的问题,在Chorme中表现的不给力,是由于Chrome对页面的解析与IE和FF不同,导致jquery的position或者offset返回值不同. 4.该插件依然是练习之作,一人之力,错误难免. 实例演示 1.载入页面的同时,气泡提示也显示
-
jCallout 轻松实现气泡提示功能
jCallout的下载地址:https://github.com/anupamsmaurya/jCallout 需要添加此引用 用户名一行的 html 代码是: 复制代码 代码如下: <tr> <td class="columnName">用户名:</td> <td><input id="hTbxUserName" class="needCheck" type="text
-
python实现桌面气泡提示功能
在写桌面软件时,通常会使用到托盘上的泡泡提示功能,让我们来看看使用python如何实现这个小功能. 一.Linux系统 在Linux上,实现一个气泡提示非常简单,使用GTK实现的pynotify模块提供了些功能,我的环境是Ubuntu,默认安装此模块,如果没有,下载源文件编译安装一个.实现代码如下: #!/usr/bin/python #coding:utf-8 import pynotify pynotify.init ("Bubble@Linux") bubble_notify =
-
python实现桌面托盘气泡提示
本文实例为大家分享了python实现桌面托盘气泡提示的具体代码,供大家参考,具体内容如下 # -*- encoding:utf-8 -*- ############################## # # 程序名:python桌面托盘气泡 # 文件名:clsBubble.py # 功能 :实现桌面托盘气泡提示功能 # modify:by adengou 2016.1.4 # program:python3.4.4 # 适用 :windowsXP -windows10 # ##########
-
SpringBoot 配置提示功能(超详细)
目的 配置自动提示的辅助功能可以让配置写起来更快,准确率大大提高. springboot jar 包含提供所有支持的配置属性细节的元数据文件.文件的目的是为了让 IDE 开发者在用户使用 application.properties 或 application.yml 文件时提供上下文帮助和代码补全. 大多数元数据文件是在编译时通过处理用 @ConfigurationProperties 注释的所有项自动生成的.也可以手动编写部分元数据. 版本 参考 SpringBoot 2.2.0.RELEA
-
C# winForm实现的气泡提示窗口功能示例
本文实例讲述了C# winForm实现的气泡提示窗口功能.分享给大家供大家参考,具体如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; namespace WindowsFormsApplication60 { p
-
解决Antd Table表头加Icon和气泡提示的坑
对于Antd Table组件的columns数组来说,它需要接受2个属性(filterDropdown,filterIcon)才能在表头某个属性旁展示图标Icon: columns: [{ title: '表达式', dataIndex: 'formulaTenderAmount', key: 'formulaTenderAmount', width: 150, placeholder: '请输入表达式', filterDropdown: (<div></div>), filter
-
WPF气泡提示框的简单制作
本文实例为大家分享了WPF气泡提示框的具体代码,供大家参考,具体内容如下 直接上代码 <TextBox Name="account" GotFocus="account_GotFocus" LostFocus="account_LostFocus" Style="{StaticResource LabelTextBox}" xl:ControlAttachProperty.Label="用户名:" F
-
js输入框邮箱自动提示功能代码实现
同理 此插件不需要任何html标签,只需要一个输入框 有相对应的class类名就ok 且父级有个class类名,其他的都不需要.内部的HTML代码都是自动生成的. HTML代码如下: 复制代码 代码如下: <div class="parentCls"> <input type="text" class="inputElem"> </div> 其实上面的div标签都可以不需要 只需要在input输入框 且父
随机推荐
- Java探索之Thread+IO文件的加密解密代码实例
- python编程之requests在网络请求中添加cookies参数方法详解
- 恢复百度云盘本地误删的文件脚本(简单方法)
- jquery平滑滚动到顶部插件使用详解
- document.createElement()用法及注意事项(ff下不兼容)
- asp.net WebForm页面间传值方法
- 如何准确定时运行ASP文件
- JSP小知识简单介绍
- jQuery实现将页面上HTML标签换成另外标签的方法
- 实现高性能JavaScript之执行与加载
- android 触屏的震动响应接口调用方法
- 不同方式遍历Map集合(全)
- Python数据分析中Groupby用法之通过字典或Series进行分组的实例
- Android使用GestureOverlayView控件实现手势识别
- 易语言制作情人节表白软件
- Laravel5.5 数据库迁移:创建表与修改表示例
- Python设计模式之桥接模式原理与用法实例分析
- C#实现窗体全屏的两种方法
- Android自定义View实现圆弧进度效果
- Vue验证码60秒倒计时功能简单实例代码