<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>功能强大的jquery提示信息特效_网页模板</title>
<!-- Tooltip classes -->
<link rel="stylesheet" href="src/tip-yellow/tip-yellow.css" type="text/css" />
<link rel="stylesheet" href="src/tip-violet/tip-violet.css" type="text/css" />
<link rel="stylesheet" href="src/tip-darkgray/tip-darkgray.css" type="text/css" />
<link rel="stylesheet" href="src/tip-skyblue/tip-skyblue.css" type="text/css" />
<link rel="stylesheet" href="src/tip-yellowsimple/tip-yellowsimple.css" type="text/css" />
<link rel="stylesheet" href="src/tip-twitter/tip-twitter.css" type="text/css" />
<link rel="stylesheet" href="src/tip-green/tip-green.css" type="text/css" />
<!-- jQuery and the Poshy Tip plugin files -->
<script type="text/javascript" src="includes/jquery-1.4.min.js"></script>
<script type="text/javascript" src="src/jquery.poshytip.js"></script>
<!-- Setup examples on this page -->
<script type="text/javascript">
$(function(){
$('#demo-basic').poshytip();
$('#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
});
$('#demo-tip-yellowsimple').poshytip({
className: 'tip-yellowsimple',
showTimeout: 1,
alignTo: 'target',
alignX: 'center',
offsetY: 5,
allowTipHover: false
});
$('#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
});
$('#demo-form-name').poshytip({
className: 'tip-yellowsimple',
showOn: 'focus',
alignTo: 'target',
alignX: 'right',
alignY: 'center',
offsetX: 5
});
$('#demo-form-email').poshytip({
className: 'tip-yellowsimple',
showOn: 'focus',
alignTo: 'target',
alignX: 'left',
alignY: 'center',
offsetX: 5
});
$('#demo-form-site').poshytip({
className: 'tip-yellowsimple',
showOn: 'focus',
alignTo: 'target',
alignX: 'inner-left',
offsetX: 0,
offsetY: 5
});
$('#demo-form-subject').poshytip({
className: 'tip-yellowsimple',
showOn: 'focus',
alignTo: 'target',
alignX: 'center',
alignY: 'bottom',
offsetX: 0,
offsetY: 5
});
$('#demo-async-timeout').poshytip({
content: function(updateCallback) {
window.setTimeout(function() {
updateCallback('Tooltip content updated!');
}, 1000);
return 'Loading...';
}
});
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
});
// call the updateCallback function to update the content in the main tooltip
// and also store the content in the cache
updateCallback(flickrFeedsCache[rel].container = container);
}
);
}
return 'Loading images...';
}
});
$('#demo-follow-cursor').poshytip({
followCursor: true,
slide: false
});
$('#demo-manual-trigger').poshytip({
content: 'Hey, there! This is a tooltip.',
showOn: 'none',
alignTo: 'target',
alignX: 'inner-left',
offsetX: 0,
offsetY: 5
});
$('#button-show').click(function() { $('#demo-manual-trigger').poshytip('show'); });
$('#button-hide').click(function() { $('#demo-manual-trigger').poshytip('hide'); });
$('#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'); });
});
</script>
<style type="text/css">
.flickr-thumbs {
overflow:hidden;
}
.flickr-thumbs a {
float:left;
display:block;
margin:0 3px;
border:1px solid #333;
}
.flickr-thumbs a:hover {
border-color:#eee;
}
.flickr-thumbs img {
display:block;
width:60px;
height:60px;
}
</style>
<!-- Neglect these files - they are used just to make the demo page prettier -->
<link rel="stylesheet" href="includes/demos.css" type="text/css" />
<script type="text/javascript" src="includes/sh_main.min.js"></script>
<script type="text/javascript" src="includes/demos.js"></script>
</head>
<body>
<div id="holder">
<div id="nav">
<h2>Demo Page Navigation</h2>
<ul>
<li class="first"><a href="#examples">Usage Examples</a>
<ul>
<li><a href="#styles">Styles (Classes)</a></li>
<li><a href="#form-tooltips">Form Tooltips (with varying positioning)</a></li>
<li><a href="#async-content">Asynchronous Loading of the Content</a>
<ul>
<li><a href="#async-simple">Simple Example</a></li>
<li><a href="#async-flickr-feeds">Loading Flickr Feeds</a></li>
</ul>
</li>
<li><a href="#follow-cursor">Following the Mouse Cursor</a></li>
<li><a href="#manual-trigger">Triggering the Tooltip Manually</a></li>
</ul>
</li>
<li><a href="#options">Options</a></li>
<li><a href="#methods">Methods</a></li>
<li><a href="#notes">Notes</a></li>
<li><a href="#license">License</a></li>
<li><a href="#download">Download</a></li>
<li><a href="#support">Support</a></li>
<li class="last"><a href="#donate">Donate</a></li>
</ul>
<h2>Next?</h2>
<ul>
<li class="first"><a href="http://www.moobnn.com/">« Back to the Poshy Tip Page</a></li>
<li class="last"><a href="http://www.moobnn.com/">« Back to Vadikom.com</a></li>
</ul>
</div>
<div id="content">
<h1>Poshy Tip jQuery Plugin <span>Demo Page</span></h1>
<h2 id="examples">Usage Examples</h2>
<p>The default browser tooltip that displays the value of the <code>title</code> attribute is replaced with a "poshier" version:</p>
<!-- #demo-basic -->
<p><a id="demo-basic" title="Hey, there! This is a tooltip." href="#">Hover for a tooltip</a></p>
<div class="code-block">
<p
jquery功能强大的提示信息特效.zip （33个子文件） 
jquery功能强大的提示信息特效 jiaoben117 
index.html 24KB src tip-yellow 
tip-yellow.css 2KB
tip-yellow_arrows.png 1KB tip-yellow.png 5KB tip-darkgray Thumbs.db 5KB tip-darkgray.png 5KB tip-darkgray.css 2KB tip-darkgray_arrows.png 1KB tip-green tip-green.css 1KB Thumbs.db 4KB
tip-green_arrows.gif 118B tip-yellowsimple tip-yellowsimple_arrows.gif 107B Thumbs.db 3KB tip-yellowsimple.css 2KB jquery.poshytip.js 15KB tip-violet tip-violet.png 5KB Thumbs.db 5KB tip-violet.css 2KB tip-violet_arrows.png 1KB tip-skyblue tip-skyblue.png 5KB tip-skyblue.css 1KB tip-skyblue_arrows.png 896B tip-twitter tip-twitter.css 2KB tip-twitter_arrows.gif 87B Thumbs.db 4KB jquery.poshytip.min.js 9KB includes demos.js 3KB bullet.png 192B
sheet_bg.jpg 132KB jquery-1.4.min.js 68KB demos.css 8KB sh_main.min.js 16KB jquery功能强大的提示信息特效.jpg 66KB资源评论
