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...';
}
});二.参数和方法一览表
PS：源代码见附件poshytipDemo.rar，更加详细的用法与实例见poshytip-1.2.rar。
参考资料：
http://www.cnblogs.com/Jaryleely/archive/2012/11/29/PoshyTip.html
相关推荐
lupeng 2020-11-14
sjcheck 2020-11-10
sjcheck 2020-11-03
meylovezn 2020-08-28
owhile 2020-08-18
Francismingren 2020-08-17
pythonclass 2020-07-29
sunzhihaofuture 2020-07-19
爱读书的旅行者 2020-07-07
行吟阁 2020-07-05
tianqi 2020-07-05
行吟阁 2020-07-04
冰蝶 2020-07-04
lyg0 2020-07-04
owhile 2020-07-04
opspider 2020-06-28
lengyu0 2020-06-28
tianqi 2020-06-21
dadaooxx 2020-06-16