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


Posted in Javascript onNovember 19, 2010


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

Javascript 相关文章推荐
各情景下元素宽高的获取实现代码
Sep 13 Javascript
form表单action提交的js部分与html部分
Jan 07 Javascript
jQuery中prev()方法用法实例
Jan 08 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
AngularJS入门教程引导程序
Aug 18 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
vue watch深度监听对象实现数据联动效果
Aug 16 Javascript
vuex提交state&&实时监听state数据的改变方法
Sep 16 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 Javascript
JS中的变量作用域(console版)
Jul 18 Javascript
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 #Javascript
JQuery 选择和过滤方法代码总结
Nov 19 #Javascript
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 #Javascript
非阻塞动态加载javascript广告实现代码
Nov 17 #Javascript
javascript实现的使用方向键控制光标在table单元格中切换
Nov 17 #Javascript
Google AJAX 搜索 API实现代码
Nov 17 #Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 #Javascript
You might like
php 获取select下拉列表框的值
2010/05/08 PHP
PHP面向对象精要总结
2014/11/07 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
jQuery 连续列表实现代码
2009/12/21 Javascript
海量经典的jQuery插件集合
2010/01/12 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
AngularJS基础知识
2014/12/21 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
JS基础随笔(菜鸟必看篇)
2016/07/13 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
python中装饰器级连的使用方法示例
2017/09/29 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
网络安全类面试题
2015/08/01 面试题
30岁生日感言
2014/01/25 职场文书
医科大学毕业生自荐信
2014/02/03 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
安全检查汇报材料
2014/12/26 职场文书