jquery.cvtooltip.js 基于jquery的气泡提示插件

 更新时间:2010年11月19日 18:19:57   作者:  
显示气泡提示的前提是,一定会有一个被提示的对象,默认的位置是根据body来计算的,这样的坏处就是如果页面内容发生了变化,而气泡的位置没有改变,导致提示目的失败。

1.插件名cvtooltip中的cv是ChinaValue的首字母缩写,而tooltip就是提示啦。
2.适用于新功能的提示,引导用户的提示,即时类消息的提示,操作失败提示(操作成功了也没人拦着)等等等,使用css实现,不附带任何图片文件。
3.目前发现的问题,在Chorme中表现的不给力,是由于Chrome对页面的解析与IE和FF不同,导致jquery的position或者offset返回值不同。
4.该插件依然是练习之作,一人之力,错误难免。

实例演示
1.载入页面的同时,气泡提示也显示。请将目光移至第一段。
2.点击按钮后显示气泡提示,注意,该提示不能被关闭,两秒后自动消失消失失失。 我是链接
3.关闭气泡动作后调用关闭函数。 再次点我

参数
panel: "body", //该参数是加载气泡提示的容器,值不同可能会导致计算的位置不同
selector: "", //用于计算定位的控件
direction: 0, //箭头方向
width: 300, //气泡提示宽度,完全手动设置
left: 0, //距离panel参数的左边距
top: 0, //距离panel参数的上边距
delay: -1, //延迟关闭,单位毫秒,值为0时表示立刻关闭
speed: 300, //关闭时的效果,淡出速度
close: true, //是否显示关闭按钮
callback: function() {
$.noop(); //点击关闭后的事件
}

用法和源码
这个就不贴了,查看下页面源文件就行啦,在JS中也写得灰常清楚鸟,或者猛点这里下载。

皮奈斯
显示气泡提示的前提是,一定会有一个被提示的对象,默认的位置是根据body来计算的,这样的坏处就是如果页面内容发生了变化,而气泡的位置没有改变,导致提示目的失败。
针对此情况,提供了selector参数来保证气泡随着该选择器控件的位置改变而发生改变。
js文件打包下载
原文地址 http://www.cnblogs.com/0417/archive/2010/11/17/1880293.html

相关文章

  • jQuery中offsetParent()方法用法实例

    jQuery中offsetParent()方法用法实例

    这篇文章主要介绍了jQuery中offsetParent()方法用法,实例分析了offsetParent()方法的功能、定义及返回匹配元素所有祖先元素中第一个采用定位的祖先元素时的使用技巧,需要的朋友可以参考下
    2015-01-01
  • jquery实现多屏多图焦点图切换特效的方法

    jquery实现多屏多图焦点图切换特效的方法

    这篇文章主要介绍了jquery实现多屏多图焦点图切换特效的方法,涉及jQuery插件jquery.kinMaxShow实现焦点图的相关技巧,非常具有实用价值,需要的朋友可以参考下
    2015-05-05
  • jQuery利用FormData上传文件实现批量上传

    jQuery利用FormData上传文件实现批量上传

    这篇文章主要为大家详细介绍了jQuery利用FormData上传文件实现批量上传功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • Jquery从头学起第四讲 jquery入门教程

    Jquery从头学起第四讲 jquery入门教程

    今天主要讲如何给主要的控件赋值,因为在做网站的时候,很多时候需要初始化表单,所有给控件赋值就成必然的了。
    2010-08-08
  • 教你用jquery实现iframe自适应高度

    教你用jquery实现iframe自适应高度

    iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,今天我们就来分享2种使用jquery实现iframe自适应高度的代码
    2014-06-06
  • jQuery中show与hide方法用法示例

    jQuery中show与hide方法用法示例

    这篇文章主要介绍了jQuery中show与hide方法用法,结合实例形式分析了jQuery使用show与hide方法控制页面元素显示与隐藏的简单实现技巧,需要的朋友可以参考下
    2016-09-09
  • jQuery实现仿京东防抖动菜单效果示例

    jQuery实现仿京东防抖动菜单效果示例

    这篇文章主要介绍了jQuery实现仿京东防抖动菜单效果,结合实例形式分析了jQuery事件响应及页面属性动态操作相关实现技巧,需要的朋友可以参考下
    2018-07-07
  • jQuery基于图层模仿五星星评价功能的方法

    jQuery基于图层模仿五星星评价功能的方法

    这篇文章主要介绍了jQuery基于图层模仿五星星评价功能的方法,使用jQuery动态修改元素背景色的方法实现星评功能,需要的朋友可以参考下
    2015-05-05
  • jQuery实现点击滚动到指定元素上的方法分析

    jQuery实现点击滚动到指定元素上的方法分析

    这篇文章主要介绍了jQuery实现点击滚动到指定元素上的方法,结合实例形式分析了jQuery响应鼠标事件动态操作页面元素属性的相关相关使用技巧,需要的朋友可以参考下
    2020-03-03
  • JQuery入门——用bind方法绑定事件处理函数应用介绍

    JQuery入门——用bind方法绑定事件处理函数应用介绍

    bind()功能是为每个选择元素的事件绑定处理函数,感兴趣的你可以了解下它的语法bind(type, [data], fn),参数data是作为event.data属性值传递对象的额外数据对象,好好学习希望本可以帮助到你
    2013-02-02

最新评论