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
相关推荐
jquery热点提示工具插件
jquery改变alt或title提示效果,提示框的背景色和文本色可自定义!
jQuery thumbnail 惟美的图片Tip提示效果 jQuery thumbnail 惟美的图片Tip提示效果
Jquery 表单验证控件(tip提示效果).zip
jquery 工具提示插件awTooltip 演示地址:http://www.jq22.com/plugin/635
这是本人写的一个jquery模仿安卓的toast信息提示工具插件,使用简单,方便,兼容目前主流浏览器,里面有一个demo.html文件,教你怎样使用本工具。
JQuery 实现鼠标悬停的Tip链接提示特效,鼠标放在链接上,即可弹出链接提示框,有多种样式可定义。可以设置提示框样式,是圆角、直角,边框粗细,还可以在提示框内定义更加复杂的内容,比如图片、表格等,使用时需要...
自己做的jquery模拟select插件,用这还不错,整合qtip实现了提示功能,希望对大家有帮助
Poshy Tip jQuery Plugin,详情请下载查看,里面有详细说明。
jquery tips提示图片信息
jQuery实例-信息提示jQuery实现 jQuery实例-信息提示jQuery实现
漂亮的jquery tip,类似于弹出层的效果,很漂亮
jquery热点提示工具插件.rarjquery热点提示工具插件.rarjquery热点提示工具插件.rarjquery热点提示工具插件.rarjquery热点提示工具插件.rarjquery热点提示工具插件.rar
jQuery表单验证插件EasyValidator 2.0带TIP提示效果
jquery 学习课堂工具 RivaFLVPlayerSetup
提示未功能,包括样式 位置 事件都可以 由自己定义 。。。很强很方便。。
jQuery信息提示弹出层插件 jQuery信息提示弹出层插件网页特效.zip