Poshy Tip，基于jQuery的提示插件 返回示例页面
示例
使用本插件替换浏览器默认的title提示:
$('#demo-basic').poshytip();
样式设置(Classes)
使用poshy tip插件，设置样式非常的方便，下面是一些例子(在您下载下来的压缩包的“src”文件夹里都能找到)：
$('#demo-tip-yellow').poshytip();
$('#demo-tip-violet').poshytip({
className: 'tip-violet',
bgImageFrameSize: 9
});
$('#demo-tip-darkgray').poshytip({
className: 'tip-darkgray',
bgImageFrameSize: 11,
offsetX: -25
});
$('#demo-tip-skyblue').poshytip({
className: 'tip-skyblue',
bgImageFrameSize: 9,
offsetX: 0,
offsetY: 20
});
.tip-yellowsimple (没有使用背景图片的Poshy Tip提示效果)
$('#demo-tip-yellowsimple').poshytip({
className: 'tip-yellowsimple',
showTimeout: 1,
alignTo: 'target',
alignX: 'center',
offsetY: 5,
allowTipHover: false
});
.tip-twitter (ala Twitter)
$('#demo-tip-twitter').poshytip({
className: 'tip-twitter',
showTimeout: 1,
alignTo: 'target',
alignX: 'center',
offsetY: 5,
allowTipHover: false,
fade: false,
slide: false
});
$('#demo-tip-green').poshytip({
className: 'tip-green',
offsetX: -7,
offsetY: 16,
allowTipHover: false
});
Poshy Tip的表单提示 (注意提示的位置)
给表单加上Poshy Tip提示效果也非常简单。只是将触发方式改成了“focus/blur”(i.e. showOn: 'focus')，定位点相对于表单元素即可(i.e. alignTo: 'target')。即使浏览器的窗口大小改变了，代码也会自适应，提示插件会自动跟随表单元素(e.g. 缩放窗口，查看效果).
$('#demo-form-name').poshytip({
className: 'tip-yellowsimple',
showOn: 'focus',
alignTo: 'target',
alignX: 'right',
alignY: 'center',
offsetX: 5,
showTimeout: 100
});
$('#demo-form-email').poshytip({
className: 'tip-yellowsimple',
showOn: 'focus',
alignTo: 'target',
alignX: 'left',
alignY: 'center',
offsetX: 5,
showTimeout: 100
});
$('#demo-form-site').poshytip({
className: 'tip-yellowsimple',
showOn: 'focus',
alignTo: 'target',
alignX: 'inner-left',
offsetX: 0,
offsetY: 5,
showTimeout: 100
});
$('#demo-form-subject').poshytip({
className: 'tip-yellowsimple',
showOn: 'focus',
alignTo: 'target',
alignX: 'center',
alignY: 'bottom',
offsetX: 0,
offsetY: 5,
showTimeout: 100
});
内容的异步加载
Poshy Tip支持使用函数返回的提示内容，剧本也经过更新回调函数作为参数传递给这个函数。通过使用这个回调函数，你可以很容易地更新异步的提示内容后已显示。剧本也重新计算和更新提示的位置时，它的内容更新。
示例
$('#demo-async-timeout').poshytip({
content: function(updateCallback) {
window.setTimeout(function() {
updateCallback('Tooltip content updated!');
}, 1000);
return 'Loading...';
}
});
加载Flickr内容
一个更复杂的加载一些Flickr图像的例子：
flowers, closeup, sunset, architecture, Plovdiv, old, town, Nesebar, depeche
var flickrFeedsCache = {};
$('#demo-async-flickr > a').poshytip({
className: 'tip-darkgray',
bgImageFrameSize: 11,
alignY: 'bottom',
content: function(updateCallback) {
var rel = $(this).attr('rel');
if (flickrFeedsCache[rel] && flickrFeedsCache[rel].container)
return flickrFeedsCache[rel].container;
if (!flickrFeedsCache[rel]) {
flickrFeedsCache[rel] = { container: null };
var tagsComma = rel.substring(4).replace('-', ',');
$.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?tags=' + tagsComma + '&tagmode=all&format=json&jsoncallback=?',
function(data) {
var container = $('<div/>').addClass('flickr-thumbs');
$.each(data.items, function(i, item) {
$('<a/>')
.attr('href', item.link)
.append($('<img/>').attr('src', item.media.m))
.appendTo(container)
.data('tip', '<strong>' + (item.title || '(no title)') + '</strong><br />by: ' + item.author.match(/\((.*)\)/)[1]);
if (i == 4)
return false;
});
// add tips for the images inside the main tip
container.find('a').poshytip({
content: function(){return $(this).data('tip');},
className: 'tip-yellowsimple',
showTimeout: 100,
alignTo: 'target',
alignX: 'center',
alignY: 'bottom',
offsetY: 5,
allowTipHover: false,
hideAniDuration: 0
});
// store the content in the cache
// and call updateCallback() to update the content in the main tooltip
updateCallback(flickrFeedsCache[rel].container = container);
}
);
}
return 'Loading images...';
}
});
跟随鼠标
如果设置followCursor: true, 确保幻灯片动画效果更好，这是更好的(即slide: false) 所以它不会与代码移动光标提示与冲突。
$('#demo-follow-cursor').poshytip({
followCursor: true,
slide: false
});
API示例 - 手动触发提示
你不用在给网页标签加上Poshy Tip的时候，直接使用 hover、focus、blur等等就触发了，可以使用showOn: 'none'，屏蔽触发，然后，通过其他元素的点击等事件来触发它：
这个Poshy Tip不是自动触发的，可以点击下面的按钮，手动触发
$('#demo-manual-trigger').poshytip({
content: '这是Poshy Tip的提示效果',
showOn: 'none',
alignTo: 'target',
alignX: 'inner-left',
offsetX: 0,
offsetY: 5
});
$('#button-show').click(function() { $('#demo-manual-trigger').poshytip('show'); });
$('#button-show-delayed').click(function() { $('#demo-manual-trigger').poshytip('showDelayed', 2000); });
$('#button-hide').click(function() { $('#demo-manual-trigger').poshytip('hide'); });
$('#button-hide-delayed').click(function() { $('#demo-manual-trigger').poshytip('hideDelayed', 2000); });
$('#button-update').click(function() { $('#demo-manual-trigger').poshytip('update', 'I am a new content :)'); });
$('#button-disable').click(function() { $('#demo-manual-trigger').poshytip('disable'); });
$('#button-enable').click(function() { $('#demo-manual-trigger').poshytip('enable'); });
$('#button-destroy').click(function() { $('#demo-manual-trigger').poshytip('destroy'); });
使用 Live 事件
您可以通过设置参数liveEvents: true来开启 Live 事件。请注意，在这种情况下，该方法（除“销毁”）不能可靠地工作。他们只会工作的元素，提示已被初始化（即显示至少一次）。生活事件在jQuery 1.4.2 +支持。
$('#demo-live-events > a').poshytip({
liveEvents: true
});
$('#button-live-events').click(function() {
$('#demo-live-events').append(', <a title="这是Poshy Tip的提示效果" href="#">Hover for a tooltip</a>');
});
参数
Methods
Notes
- Requires jQuery 1.4+
- Works in IE6+, FF 2+, Opera 9+, Safari 3+, Chrome
- In IE6 min/max-width are supported (only px values) for the tooltip container DIV so you can use them in your CSS without worrying for IE6 (if you still care about it)
- When a background-image is set for the tooltip container DIV, the script will neglect the background-color/padding/border declarations set for it and will use the background image to create a scalable frame around the tooltip inner DIV (for an explanation how this works, please take a look at the Poshy Tip Page)
- In IE6 PNG background images are not supported (only GIF). If a PNG is set as a background-image for the tooltip container, in IE6 the script will fallback and use the background-color/padding/border declarations instead.
License
Like jQuery, Poshy Tip is dual licensed under the MIT and GPL licenses.
Download
Download link: http://vadikom.com/files/?file=poshytip/poshytip-1.2.zip
Git
The Poshy Tip source code is also available at GitHub:
git clone git://github.com/vadikom/poshytip.git
Support
Post your questions/suggestions in the support forums.
Donate
If you appreciate this script, you can support me by donating a small amount through PayPal or just by spreading the word about it. Your support is highly appreciated!