jQuery信息提示工具Poshy Tip -

bijian1013

浏览: 3227676 次
性别:
来自: 深圳

最近访客更多访客>>

dy.f

godandghost

lovefiger

marsgrayson

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery信息提示工具Poshy Tip

博客分类：

JQuery

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>

运行效果：

一.基本使用

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

二.参数和方法一览表