jQuery信息提示工具Poshy Tip

        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>

        运行效果:
jQuery信息提示工具Poshy Tip
jQuery信息提示工具Poshy Tip
jQuery信息提示工具Poshy Tip

一.基本使用

$("#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...';
  }  
});

二.参数和方法一览表
jQuery信息提示工具Poshy Tip

PS:源代码见附件poshytipDemo.rar,更加详细的用法与实例见poshytip-1.2.rar。

参考资料:

http://www.cnblogs.com/Jaryleely/archive/2012/11/29/PoshyTip.html

http://vadikom.com/demos/poshytip/ 

相关推荐