Poshy Tip是一款非常友好的信息提示工具,它基于jQuery,当鼠标滑向链接时,会出现一个信息提示条。信息的内容直接可以在HTML里设定也可以是从服务端调用的数据,该插件还提供了很多属性和方法。
如下提供了三种使用的例子,代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Poshy Tip jQuery Plugin Demo Page</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- Tooltip classes -->
<link rel="stylesheet" href="tip-yellow/tip-yellow.css" type="text/css" />
<!-- jQuery and the Poshy Tip plugin files -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.poshytip.js"></script>
<!-- Setup examples on this page -->
<script type="text/javascript">
//<![CDATA[
$(function(){
$("#tip1").poshytip();
$('#user').poshytip({
className: 'tip-yellowsimple',
showOn: 'focus',
alignTo: 'target',
alignX: 'right',
alignY: 'center',
offsetX: 5
});
$('#remote').poshytip({
alignY: 'bottom',
content: function(updateCallback) {
$.get('json.json',function(msg){
console.log(msg);
$("#remote").children().remove();
$("#remote").append("<br/><img id='img' src='Image.jpg'/>");
});
return 'Loading...';
}
});
});
//]]>
</script>
</head>
<body>
<div>
<p>1.<a id="tip1" title="嗨。。这里有个工具提示条!" href="#">鼠标滑上这里看看</a></p>
<br/>
<p>2.用户名:<br/><input id="user" type="text" size="30" title="请输入用户名" /></p>
<br/>
<p>3.服务端调用:<br/>
<a id="remote" href="#">鼠标滑向这里加载图片</a>
</p>
</div>
</body>
</html>
运行效果:
一.基本使用
$("#tip1").poshytip();
二.表单提示
当输入框获得焦点时,在右侧会出现提示工具条
$('#user').poshytip({ className: 'tip-yellowsimple', showOn: 'focus', alignTo: 'target', alignX: 'right', alignY: 'center', offsetX: 5 });
三.服务端调用
实际应用中通过请求服务端资源,获得返回数据
$('#remote').poshytip({ alignY: 'bottom', content: function(updateCallback) { $.get('json.json',function(msg){ console.log(msg); $("#remote").children().remove(); $("#remote").append("<br/><img id='img' src='Image.jpg'/>"); }); return 'Loading...'; } });
二.参数和方法一览表
PS:源代码见附件poshytipDemo.rar,更加详细的用法与实例见poshytip-1.2.rar。
参考资料:
http://www.cnblogs.com/Jaryleely/archive/2012/11/29/PoshyTip.html