jQuery信息提示插件 - Poshy Tip
jQuery 自从出现以来，以其简洁灵活的编程模式迅速流行于世，而且拥有相当多的封装良好的插件。Poshy Tip 就是一款界面友好、功能齐全的jQuery Tooltip信息提示插件。
?
Poshy Tip是一个相当给力的jQuery信息提示插件，可以创建多种样式的信息提示框。它支持异步调用服务器端的数据并呈现在提示框中。此插件的定制性也很强，提供了多种属性和方法，你可以设置提示框的出现位置，修改CSS样式等等。
如何使用
首先在页面的head部分加入jQuery及插件的脚本，然后按如下方法使用即可
$('#demo-basic').poshytip();
?
?
?
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
?<meta content="给力的jQuery信息提示插件 - Poshy Tip 演示页面 - 给力技术" name="description">
?<meta content="jquery,jquery插件,tooltip,信息提示,给力技术,Poshy Tip" name="keywords">
?<meta content="Lwolf" name="author">
??? <title>给力的jQuery信息提示插件 - Poshy Tip 演示页面 >> 给力技术</title>
?<link rel="shortcut icon" href="http://site518.net/favicon.ico" type="image/x-icon">
??? <link rel="stylesheet" type="text/css" href="../demostyle.css">
?
?<link rel="stylesheet" href="tip-darkgray.css" type="text/css" />
</head>
<body>
??<div href="http://localhost/lwolf/wp/jquery-tooltip-poshy-tip/"><<< 返回 <strong>给力的jQuery信息提示插件 - Poshy Tip</strong></a>
???<a href="http://site518.net" style="left: 0px; top: 0px">
???<div title="这个设置了样式" href="#">移动鼠标到这里查看效果</a></p>
?????? <br>
??????
?????? <p>
?????<b><span type="text" size="30" title="输入邮箱地址" />
?????? <br/><br/>
?????? <p>
?????<b><span href="#">移动鼠标到这里查看效果</a><br/></p>
?????? <br>
??????
?????? <p>
?????<b><span title="相当给力~~" href="#">鼠标跟随效果</a></p>
???</div>
???<div target="_blank">RSS</a>|
????<a href="mailto:superlwf@126.com">联系我</a>|<script src="http://s19.cnzz.com/stat.php?id=3154833&web_id=3154833&show=pic1" language="JavaScript"></script>
???</div>
??</div>
???? <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
???? <script type="text/javascript" src="http://vadikom.com/demos/poshytip/src/jquery.poshytip.js"></script>
???? <script type="text/javascript">
????? $(document).ready(function()
????? {
???????????? $('#demo-basic').poshytip({
??????? className: 'tip-darkgray',
??????? bgImageFrameSize: 11,
??????? offsetX: -25
?????? });
??????
?????? $('#demo-form-email').poshytip({
???????????????? className: 'tip-darkgray',
???????????????? showOn: 'focus',
???????????????? alignTo: 'target',
???????????????? alignX: 'left',
???????????????? alignY: 'center',
???????????????? offsetX: 5
??????????????? });
???????????????
??????????????? $('#demo-async-timeout').poshytip({
??????????????????? className: 'tip-darkgray',
???????????????? content: function(updateCallback) {
????????????????? window.setTimeout(function() {
?????????????????? updateCallback('信息已更新');
????????????????? }, 1000);
????????????????? return 'Loading...';
???????????????? }
??????????????? });
???????????????
??????????????? $('#demo-follow-cursor').poshytip({
??????????????????? className: 'tip-darkgray',
???????????????? followCursor: true,
???????????????? slide: false
??????????????? });
????? });
???? </script>
</body>
</html>
?
?
?
?
?
?
?
?
?
?
?
?
/*
?* Poshy Tip jQuery plugin v1.1
?* http://vadikom.com/tools/poshy-tip-jquery-plugin-for-stylish-tooltips/
?* Copyright 2010-2011, Vasil Dinkov, http://vadikom.com/
?*/
(function($) {
?var tips = [],
??reBgImage = /^url\(["']?([^"'\)]*)["']?\);?$/i,
??rePNG = /\.png$/i,
??ie6 = $.browser.msie && $.browser.version == 6;
?// make sure the tips' position is updated on resize
?function handleWindowResize() {
??$.each(tips, function() {
???this.refresh(true);
??});
?}
?$(window).resize(handleWindowResize);
?$.Poshytip = function(elm, options) {
??this.$elm = $(elm);
??this.opts = $.extend({}, $.fn.poshytip.defaults, options);
??this.$tip = $(['<div cellpadding="0" cellspacing="0"><tr><td colspan="2"><span></span></td><td rowspan="2"><span></span></td></tr><tr><td rowspan="2"><span></span></td><td></td></tr><tr><td colspan="2"><span></span></td></tr></table>')
??????.css({border: 0, padding: 0, 'background-image': 'none', 'background-color': 'transparent'})
??????.find('.tip-bg-image').css('background-image', 'url("' + bgImage[1] +'")').end()
??????.find('td').eq(3).append(this.$inner);
????}
????// disable fade effect in IE due to Alpha filter + translucent PNG issue
????if (bgImagePNG && !$.support.opacity)
?????this.opts.fade = false;
???}
???// IE arrow fixes
???if (arrow && !$.support.opacity) {
????// disable arrow in IE6 if using a PNG
????if (ie6 && rePNG.test(arrow[1])) {
?????arrow = false;
?????this.$arrow.css('background-image', 'none');
????}
????// disable fade effect in IE due to Alpha filter + translucent PNG issue
????this.opts.fade = false;
???}
???var $table = this.$tip.find('table');
???if (ie6) {
????// fix min/max-width in IE6
????this.$tip[0].style.width = '';
????$table.width('auto').find('td').eq(3).width('auto');
????var tipW = this.$tip.width(),
?????minW = parseInt(this.$tip.css('min-width')),
?????maxW = parseInt(this.$tip.css('max-width'));
????if (!isNaN(minW) && tipW < minW)
?????tipW = minW;
????else if (!isNaN(maxW) && tipW > maxW)
?????tipW = maxW;
????this.$tip.add($table).width(tipW).eq(0).find('td').eq(3).width('100%');
???} else if ($table[0]) {
????// fix the table width if we are using a background image
????// IE9, FF4 use float numbers for width/height so use getComputedStyle for them to avoid text wrapping
????// for details look at: http://vadikom.com/dailies/offsetwidth-offsetheight-useless-in-ie9-firefox4/
????$table.width('auto').find('td').eq(3).width('auto').end().end().width(document.defaultView && document.defaultView.getComputedStyle && parseFloat(document.defaultView.getComputedStyle(this.$tip[0], null).width) || this.$tip.width()).find('td').eq(3).width('100%');
???}
???this.tipOuterW = this.$tip.outerWidth();
???this.tipOuterH = this.$tip.outerHeight();
???this.calcPos();
???// position and show the arrow image
???if (arrow && this.pos.arrow) {
????this.$arrow[0].className = 'tip-arrow tip-arrow-' + this.pos.arrow;
????this.$arrow.css('visibility', 'inherit');
???}
???if (async) {
????this.asyncAnimating = true;
????var self = this;
????this.$tip.css(currPos).animate({left: this.pos.l, top: this.pos.t}, 200, function() { self.asyncAnimating = false; });
???} else {
????this.$tip.css({left: this.pos.l, top: this.pos.t});
???}
??},
??display: function(hide) {
???var active = this.$tip.data('active');
???if (active && !hide || !active && hide)
????return;
???this.$tip.stop();
???if ((this.opts.slide && this.pos.arrow || this.opts.fade) && (hide && this.opts.hideAniDuration || !hide && this.opts.showAniDuration)) {
????var from = {}, to = {};
????// this.pos.arrow is only undefined when alignX == alignY == 'center' and we don't need to slide in that rare case
????if (this.opts.slide && this.pos.arrow) {
?????var prop, arr;
?????if (this.pos.arrow == 'bottom' || this.pos.arrow == 'top') {
??????prop = 'top';
??????arr = 'bottom';
?????} else {
??????prop = 'left';
??????arr = 'right';
?????}
?????var val = parseInt(this.$tip.css(prop));
?????from[prop] = val + (hide ? 0 : (this.pos.arrow == arr ? -this.opts.slideOffset : this.opts.slideOffset));
?????to[prop] = val + (hide ? (this.pos.arrow == arr ? this.opts.slideOffset : -this.opts.slideOffset) : 0) + 'px';
????}
????if (this.opts.fade) {
?????from.opacity = hide ? this.$tip.css('opacity') : 0;
?????to.opacity = hide ? 0 : this.opacity;
????}
????this.$tip.css(from).animate(to, this.opts[hide ? 'hideAniDuration' : 'showAniDuration']);
???}
???hide ? this.$tip.queue($.proxy(this.reset, this)) : this.$tip.css('visibility', 'inherit');
???this.$tip.data('active', !active);
??},
??disable: function() {
???this.reset();
???this.disabled = true;
??},
??enable: function() {
???this.disabled = false;
??},
??destroy: function() {
???this.reset();
???this.$tip.remove();
???delete this.$tip;
???this.content = null;
???this.$elm.unbind('.poshytip').removeData('title.poshytip').removeData('poshytip');
???tips.splice($.inArray(this, tips), 1);
??},
??clearTimeouts: function() {
???if (this.showTimeout) {
????clearTimeout(this.showTimeout);
????this.showTimeout = 0;
???}
???if (this.hideTimeout) {
????clearTimeout(this.hideTimeout);
????this.hideTimeout = 0;
???}
??},
??calcPos: function() {
???var pos = {l: 0, t: 0, arrow: ''},
????$win = $(window),
????win = {
?????l: $win.scrollLeft(),
?????t: $win.scrollTop(),
?????w: $win.width(),
?????h: $win.height()
????}, xL, xC, xR, yT, yC, yB;
???if (this.opts.alignTo == 'cursor') {
????xL = xC = xR = this.eventX;
????yT = yC = yB = this.eventY;
???} else { // this.opts.alignTo == 'target'
????var elmOffset = this.$elm.offset(),
?????elm = {
??????l: elmOffset.left,
??????t: elmOffset.top,
??????w: this.$elm.outerWidth(),
??????h: this.$elm.outerHeight()
?????};
????xL = elm.l + (this.opts.alignX != 'inner-right' ? 0 : elm.w);?// left edge
????xC = xL + Math.floor(elm.w / 2);????// h center
????xR = xL + (this.opts.alignX != 'inner-left' ? elm.w : 0);?// right edge
????yT = elm.t + (this.opts.alignY != 'inner-bottom' ? 0 : elm.h);?// top edge
????yC = yT + Math.floor(elm.h / 2);????// v center
????yB = yT + (this.opts.alignY != 'inner-top' ? elm.h : 0);?// bottom edge
???}
???// keep in viewport and calc arrow position
???switch (this.opts.alignX) {
????case 'right':
????case 'inner-left':
?????pos.l = xR + this.opts.offsetX;
?????if (pos.l + this.tipOuterW > win.l + win.w)
??????pos.l = win.l + win.w - this.tipOuterW;
?????if (this.opts.alignX == 'right' || this.opts.alignY == 'center')
??????pos.arrow = 'left';
?????break;
????case 'center':
?????pos.l = xC - Math.floor(this.tipOuterW / 2);
?????if (pos.l + this.tipOuterW > win.l + win.w)
??????pos.l = win.l + win.w - this.tipOuterW;
?????else if (pos.l < win.l)
??????pos.l = win.l;
?????break;
????default: // 'left' || 'inner-right'
?????pos.l = xL - this.tipOuterW - this.opts.offsetX;
?????if (pos.l < win.l)
??????pos.l = win.l;
?????if (this.opts.alignX == 'left' || this.opts.alignY == 'center')
??????pos.arrow = 'right';
???}
???switch (this.opts.alignY) {
????case 'bottom':
????case 'inner-top':
?????pos.t = yB + this.opts.offsetY;
?????// 'left' and 'right' need priority for 'target'
?????if (!pos.arrow || this.opts.alignTo == 'cursor')
??????pos.arrow = 'top';
?????if (pos.t + this.tipOuterH > win.t + win.h) {
??????pos.t = yT - this.tipOuterH - this.opts.offsetY;
??????if (pos.arrow == 'top')
???????pos.arrow = 'bottom';
?????}
?????break;
????case 'center':
?????pos.t = yC - Math.floor(this.tipOuterH / 2);
?????if (pos.t + this.tipOuterH > win.t + win.h)
??????pos.t = win.t + win.h - this.tipOuterH;
?????else if (pos.t < win.t)
??????pos.t = win.t;
?????break;
????default: // 'top' || 'inner-bottom'
?????pos.t = yT - this.tipOuterH - this.opts.offsetY;
?????// 'left' and 'right' need priority for 'target'
?????if (!pos.arrow || this.opts.alignTo == 'cursor')
??????pos.arrow = 'bottom';
?????if (pos.t < win.t) {
??????pos.t = yB + this.opts.offsetY;
??????if (pos.arrow == 'bottom')
???????pos.arrow = 'top';
?????}
???}
???this.pos = pos;
??}
?};
?$.fn.poshytip = function(options) {
??if (typeof options == 'string') {
???var args = arguments,
????method = options;
???Array.prototype.shift.call(args);
???// unhook live events if 'destroy' is called
???if (method == 'destroy')
????this.die('mouseenter.poshytip').die('focus.poshytip');
???return this.each(function() {
????var poshytip = $(this).data('poshytip');
????if (poshytip && poshytip[method])
?????poshytip[method].apply(poshytip, args);
???});
??}
??var opts = $.extend({}, $.fn.poshytip.defaults, options);
??// generate CSS for this tip class if not already generated
??if (!$('#poshytip-css-' + opts.className)[0])
???$(['<style id="poshytip-css-',opts.className,'" type="text/css">',
????'div.',opts.className,'{visibility:hidden;position:absolute;top:0;left:0;}',
????'div.',opts.className,' table, div.',opts.className,' td{margin:0;font-family:inherit;font-size:inherit;font-weight:inherit;font-style:inherit;font-variant:inherit;}',
????'div.',opts.className,' td.tip-bg-image span{display:block;font:1px/1px sans-serif;height:',opts.bgImageFrameSize,'px;width:',opts.bgImageFrameSize,'px;overflow:hidden;}',
????'div.',opts.className,' td.tip-right{background-position:100% 0;}',
????'div.',opts.className,' td.tip-bottom{background-position:100% 100%;}',
????'div.',opts.className,' td.tip-left{background-position:0 100%;}',
????'div.',opts.className,' div.tip-inner{background-position:-',opts.bgImageFrameSize,'px -',opts.bgImageFrameSize,'px;}',
????'div.',opts.className,' div.tip-arrow{visibility:hidden;position:absolute;overflow:hidden;font:1px/1px sans-serif;}',
???'</style>'].join('')).appendTo('head');
??// check if we need to hook live events
??if (opts.liveEvents && opts.showOn != 'none') {
???var deadOpts = $.extend({}, opts, { liveEvents: false });
???switch (opts.showOn) {
????case 'hover':
?????this.live('mouseenter.poshytip', function() {
??????var $this = $(this);
??????if (!$this.data('poshytip'))
???????$this.poshytip(deadOpts).poshytip('mouseenter');
?????});
?????break;
????case 'focus':
?????this.live('focus.poshytip', function() {
??????var $this = $(this);
??????if (!$this.data('poshytip'))
???????$this.poshytip(deadOpts).poshytip('show');
?????});
?????break;
???}
???return this;
??}
??return this.each(function() {
???new $.Poshytip(this, opts);
??});
?}
?// default settings
?$.fn.poshytip.defaults = {
??content: ??'[title]',?// content to display ('[title]', 'string', element, function(updateCallback){...}, jQuery)
??className:??'tip-yellow',?// class for the tips
??bgImageFrameSize:?10,??// size in pixels for the background-image (if set in CSS) frame around the inner content of the tip
??showTimeout:??500,??// timeout before showing the tip (in milliseconds 1000 == 1 second)
??hideTimeout:??100,??// timeout before hiding the tip
??timeOnScreen:??0,??// timeout before automatically hiding the tip after showing it (set to > 0 in order to activate)
??showOn:???'hover',?// handler for showing the tip ('hover', 'focus', 'none') - use 'none' to trigger it manually
??liveEvents:??false,??// use live events
??alignTo:??'cursor',?// align/position the tip relative to ('cursor', 'target')
??alignX:???'right',?// horizontal alignment for the tip relative to the mouse cursor or the target element
???????// ('right', 'center', 'left', 'inner-left', 'inner-right') - 'inner-*' matter if alignTo:'target'
??alignY:???'top',??// vertical alignment for the tip relative to the mouse cursor or the target element
???????// ('bottom', 'center', 'top', 'inner-bottom', 'inner-top') - 'inner-*' matter if alignTo:'target'
??offsetX:??-22,??// offset X pixels from the default position - doesn't matter if alignX:'center'
??offsetY:??18,??// offset Y pixels from the default position - doesn't matter if alignY:'center'
??allowTipHover:??true,??// allow hovering the tip without hiding it onmouseout of the target - matters only if showOn:'hover'
??followCursor:??false,??// if the tip should follow the cursor - matters only if showOn:'hover' and alignTo:'cursor'
??fade: ???true,??// use fade animation
??slide: ???true,??// use slide animation
??slideOffset: ??8,??// slide animation offset
??showAniDuration: ?300,??// show animation duration - set to 0 if you don't want show animation
??hideAniDuration: ?300??// hide animation duration - set to 0 if you don't want hide animation
?};
})(jQuery);