jCallout 轻松实现气泡提示功能

2024-10-02 13:47:00

jCallout的下载地址：https://github.com/anupamsmaurya/jCallout

需要添加此引用

用户名一行的 html 代码是：

代码如下:

然后在 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'>必填项！"

基于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.载入页面的同时,气泡提示也显示
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
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输入框且父

jCallout 轻松实现气泡提示功能

相关推荐

随机推荐