- 浏览: 399670 次
- 性别:
- 来自: 南京
文章分类
最新评论
-
qiuqinjun:
你好,项目的文献能否打包学习下呢
java定时任务管理实现 -
panghaoyu:
实现一个智能提示功能需要ajax、数据库、jsp/php、算法 ...
使用jQuery Autocomplete(自动完成)插件 -
CommonAccount:
我的showModalDialog() 传对象参数,在子窗口用 ...
JS中showModalDialog (模态窗口)详细使用 -
wyfn18:
very good
使用jQuery Autocomplete(自动完成)插件 -
jiangqingtian:
xiexie
使用jQuery Autocomplete(自动完成)插件
How It Works
TipTip uses the title
attribute just like the native browser tooltip does. However, thetitle
will be copied and then removed from the element when using TipTip so that the browser tooltip will not show up.
TipTip only generates one set of popup elements total, rather then generating one set of popup elements for each element with TipTip applied to it. This helps speed things up and reduces processing time. The elements generated are all div
elements and are appended to the end of the body
element. The structure looks like this:
<
div
id
=
"tiptip_holder"
>
<
div
id
=
"tiptip_content"
>
<
div
id
=
"tiptip_arrow"
>
<
div
id
=
"tiptip_arrow_inner"
></
div
>
</
div
>
</
div
>
</
div
>
There are specific CSS class names added to the "tiptip_holder" div
element when it appears depending on the orientation it appears in. Here is a list of the class names along with it's orientation:
- tip_top - When the tooltip appears above the element.
- tip_bottom - When the tooltip appears below the element.
- tip_left - When the tooltip appears to the left the element.
- tip_right - When the tooltip appears to the right the element.
- tip_left_top - When the tooltip appears to the left and above the element.
- tip_left_bottom - When the tooltip appears to the left and below the element.
- tip_right_top - When the tooltip appears to the right and above the element.
- tip_right_bottom - When the tooltip appears to the right and below the element.
TipTip has been tested (and works) in: IE7 & IE8, Firefox, Safari, Opera, and Chrome.
How To Use It
Obviously you need to make sure you have the latest jQuery library already loaded in your page. After that it's really simple, just add the following code to your page:
$(
function
(){
$(
".someClass"
).tipTip();
});
Below is an example of using TipTip with some options:
$(
function
(){
$(
".someClass"
).tipTip({maxWidth:
"auto"
, edgeOffset: 10});
});
Below is an example of what your HTML
would look like:
<
p
>
Cras sed ante. Phasellus in massa. <
a
href
=
""
class
=
"someClass"
title
=
"This will show up in the TipTip popup."
>Curabitur dolor eros</
a
>, gravida et, hendrerit ac, cursus non, massa.
<
span
id
=
"foo"
>
<
img
src
=
"image.jpg"
class
=
"someClass"
title
=
"A picture of the World"
/>
</
span
>
</
p
>
Options
- activation: string ("hover" by default) - jQuery method TipTip is activated with. Can be set to: "hover", "focus" or "click".
- keepAlive: true of false (false by default) - When set to true the TipTip will only fadeout when you hover over the actual TipTip and then hover off of it.
-
maxWidth: string ("200px" by default) - CSS
max-width
property for the TipTip element. This is a string so you can apply a percentage rule or 'auto'. - edgeOffset: number (3 by default) - Distances the TipTip popup from the element with TipTip applied to it by the number of pixels specified.
- defaultPosition: string ("bottom" by default) - Default orientation TipTip should show up as. You can set it to: "top", "bottom", "left" or "right".
-
delay: number (400 by default) - Number of milliseconds to delay before showing the TipTip popup after you
mouseover
an element with TipTip applied to it. - fadeIn: number (200 by default) - Speed at which the TipTip popup will fade into view.
- fadeOut: number (200 by default) - Speed at which the TipTip popup will fade out of view.
- attribute: string ("title" by default) - HTML attribute that TipTip should pull it's content from.
- content: string (false by default) - HTML or String to use as the content for TipTip. Will overwrite content from any HTML attribute.
-
enter: callback function - Custom function that is run each time you
mouseover
an element with TipTip applied to it. -
exit: callback function - Custom function that is run each time you
mouseout
of an element with TipTip applied to it.
ChangeLog
Version 1.3 (Mar. 23, 2010)- Added
defaultPoistion
option that enables you to set the default orientation TipTip should show up as. - Added
attribute
option that enables you to set the HTML attribute that TipTip should pull it's content from. - Added
content
option. This will be used as the content for the TipTip and will overwrite any content pulled form any HTML attribute. - Added
activation
option enables you to specify the jQuery method TipTip is activated with: hover, focus or click. Now you can use TipTip on forms and for validation! - Added
keepAlive
option that when set to true the TipTip will only fadeout when you hover over the actual TipTip and then hover off of it. Allowing for hyperlinks inside your TipTip content to be accessible.
- Added HTML support with Tip Tip. You can now add HTML into the Title attribute (though this is not recommended if you want strictly valid code).
- Tightened up spacing margins in JS.
- Updated margins in CSS file.
- Swapped dynamically added orientation CSS class names ('_left' & '_right') to make better sense.
- Added in some tighter spacing for the tooltip in JS.
- Initial release.
License
This TipTip jQuery plug-in is dual licensed under the MIT and GPL licenses.
- tipTipv13.zip (4.7 KB)
- 下载次数: 46
发表评论
文章已被作者锁定,不允许评论。
-
jQuery实现Session过期提示
2013-06-24 15:46 10619起初项目中session过期的时候需要做一个提示框(并不进 ... -
页面所有元素加载完成之后执行某个js函数
2013-06-08 12:35 95975在页面所有元素加载完成之后执行某个js函数 做项目 ... -
在页面加载完后执行javascript代码
2013-06-04 15:54 0在页面加载完后执行javascript代码 ... -
基于jQuery的waterfall(瀑布流)布局
2013-05-21 15:44 5120<!DOCTYPE html> < ... -
如何提高你的jQuery代码技巧
2013-05-17 21:37 0Query之所以如此流行并被从大公司到个人博客的几乎每个人都 ... -
使用jQuery去掉指定标签里所有文字内容对应的链接
2013-05-21 15:43 1204有时候需要使用jQuery来去除指定的某些标签,例如,删除所有 ... -
Jquery的UI库 w2ui
2013-05-10 16:52 5092很不错的Jquery的UI库 w2ui,基于Jquery的 ... -
Javascript动态生成table的性能调优
2013-05-08 10:08 0客户端动态输出table数 ... -
经典的回到页面顶端
2013-04-25 13:54 1770经典的回到页面顶端,当页面滚动到一定的高度时,给一个回到顶 ... -
jQuery/javascript实现IP/Mask自动联想功能
2013-02-01 16:02 3434之前做一个云计算的项目,涉及到一个安全组自动联想的功能,思想是 ... -
js 验证各种格式类型的正则表达式
2013-01-31 14:59 0<script src="scripts/ ... -
amCharts目前最牛逼的图表插件
2012-12-05 23:40 0amCharts,图表插件,目前最牛的图表插件 -
判断几种浏览器类型的表达式
2012-12-03 14:11 1005// IE浏览器 if (/MSIE/.test(n ... -
js获取工程路径以及js调用Servlet
2012-10-18 21:19 0function getRootPath(){ va ... -
jQuery jqplot chart plugins
2012-09-28 00:31 0Charts on this page may depe ... -
jQuery tip plugins
2012-09-25 00:35 01. 一款jQuery提示插件 2. 以下为一个java ... -
使用jQuery Autocomplete(自动完成)插件
2012-09-18 01:25 26350jQuery 的Autocomplete(自动完成、自动 ... -
动态创建js,jQuery
2012-09-18 00:53 0function checkJquery() { ... -
jQuery ajax - getJSON() 方法
2012-09-17 22:41 0<html> <head> ... -
仿IBM导航条实现
2012-09-16 22:57 0<!DOCTYPE html PUBLIC " ...
相关推荐
jquery tips提示图片信息
jquery tips提示插件自适应屏幕宽度提示图片信息
在 6om购物排行榜上发现了这个 jquery tips 商品图片提示框,非常漂亮。 使用 Jquery 类库,代码精简,并且带人性化缺口和阴影。 那个箭头不要以为是用图片做的,其实并没有,完全用 CSS 实现。 我把代码分享出来,...
jquery,tips,冒泡,jquery,tips,冒泡
* $(selector).tips({ //selector 为jquery选择器 * msg:'your messages!', //你的提示消息 必填 * side:1, //提示窗显示位置 1,2,3,4 分别代表 上右下左 默认为1(上) 可选 * color:'#FFF', //提示文字色 默认...
jquery的tips提示组件,供大家一起共同分享学习。
jquery tips 提示插件 jquery.tips.js v0.1beta JQUERY TIPS的提示插件 本地上传备份/使用分享,以免遗忘
一个好看的TIPS jQuery 小贴士 插件 操作简单 可自定义样式
在选择时,最好以ID选择符作为开头 我想这个很好理解,因为JQuery内部使用document.getElementByID方法进行ID选择,这种方法比其他所有对DOM选择的方法更快,所以以$(“#”)开头是最好的,比如: 代码如下: ”a”> ”b...
jQuery带Tips动画提示通用表单验证插件下载(jquery validate),动画效果漂亮
* jquery tips 提示插件 jquery.tips.js v0.1beta * * 使用方法 * $(selector).tips({ //selector 为jquery选择器 * msg:'your messages!', //你的提示消息 必填 * side:1, //提示窗显示位置 1,2,3,4 分别代表 上...
前段时间发布了Jquery类库1.4版本,使用者也越来越多,为了方便大家对Jquery的使用,下面列出了一些Jquery使用技巧。
一款jquery提示插件,poshytip
filter方法表示的是对当前内部的元素进行筛选,这个接受两种参数,一个返回bool的function,或者是JQuery的选择表达式,包装集内的元素只会小于等于当前包装集内的元素,并且含有的元素属于原来包装集内元素的子集: ...
比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器...Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类库、禁用Jquery效果、解决Jquery类库与其他...
学习jQuery的第一件事是:如果你想要一个事件运行在你的页面上,你必须在$(document).ready()里调用这个事件。所有包括在$(document).ready()里面的元素或事件都将会在DOM完成加载之后立即加载,并且在页面内容加载...
包装集总是面向集合的,需要的朋友可以参考下。