jQuery信息提示工具jquery.poshytip (转载)
2024-08-26 06:24:38
转载地址:http://www.helloweba.com/view-blog-123.html
Poshy Tip是一款非常友好的信息提示工具,它基于jQuery,当鼠标滑向链接时,会出现一个信息提示条。信息的内容直接可以在HTML里设定也可以是从服务端调用的数据,该插件还提供了很多属性和方法。
XHTML
Demo中提供了三种使用的例子,页面代码如下:
<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>
当然,别忘了要加载jquery库和poshytip插件以及相关样式。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="src/jquery.poshytip.js"></script>
<link rel="stylesheet" href="src/tip-yellow/tip-yellow.css" type="text/css" />
jQuery
1、基本使用:
$("#tip1").poshytip();
2、表单提示:当输入框获得焦点时,在右侧会出现提示工具条
$('#user').poshytip({
className: 'tip-yellowsimple',
showOn: 'focus',
alignTo: 'target',
alignX: 'right',
alignY: 'center',
offsetX: 5
});
3、服务端调用:通过调用服务端ajax.php,获得返回数据
$('#remote').poshytip({
alignY: 'bottom',
content: function(updateCallback) {
$.get('ajax.php?id=1',function(msg){
updateCallback(msg);
});
return 'Loading...';
}
});
参数和方法一览表
参数/方法 | 描述 |
content | 提示工具条中的内容,默认是从元素的title属性中获取。 |
className | 提示工具条的样式 |
showTimeout | 提示工具条出现前的过渡时间 |
hideTimeout | 提示工具条消失的过渡时间 |
showOn | 提示工具条触发方式,有'hover', 'focus', 'none'三种方式 |
alignX | 提示工具条出现在水平方向相对当前元素的位置,有'right', 'center', 'left', 'inner-left', 'inner-right' |
alignY | 提示工具条出现在垂直方向相对当前元素的位置,有'bottom', 'center', 'top', 'inner-bottom', 'inner-top' |
offsetX | 相对X方向位移,数字 |
offsetY | 相对Y方向位移,数字 |
hideTimeout | 工具条消失的过渡时间 |
hideTimeout | 工具条消失的过渡时间 |
hideTimeout | 工具条消失的过渡时间 |
offsetY | 相对Y方向位移,数字 |
allowTipHover | 允许鼠标滑向工具条上方 |
fade | 是否使用渐隐渐显动画,true/false |
slide | 是否使用滑动动画,true/false |
方法:show | .poshytip('show'),手动触发显示提示工具条 |
方法:hide | .poshytip('hide'),手动触发隐藏提示工具条 |
方法:disable | .poshytip('disable'),手动触发禁用提示工具条 |
方法:enable | .poshytip('enable'),手动触发启用提示工具条 |
更多信息请访问Poshy Tip官方网站:http://vadikom.com/tools/poshy-tip-jquery-plugin-for-stylish-tooltips/
最新文章
- sqlserver2008存储过程(比较两个日期大小和获取当前月最大天数的存储过程)
- Struts2中使用OGNL
- JVM探索之——内存管理(二)
- java获取每个月的最后一天
- iOS - OC SQLite 数据库存储
- 解决Oracle 11gR2 空闲连接过多,导致连接数满的问题
- 设置代码ios 6添加日历事件No calendar has been set.错误
- 洛谷-小鱼会有危险吗-BOSS战-入门综合练习2
- 卷积神经网络CNN与深度学习常用框架的介绍与使用
- 第48篇 字符编码探密--ASCII,UTF8,GBK,Unicode
- 支持行单击、双击事件的GridView和DataList控件(译)
- C++ 最简单的日志类
- Linux入门总结——虚拟机安装配置以及vim简单操作
- How to Build a New Habit: This is Your Strategy Guide
- iOS开发 -------- storyBoard实现控制器添加childViewController
- python第十五天-原来还差一份作业
- 洛谷.2754.星际转移问题(最大流Dinic 分层)
- 用户人品预测大赛--getmax队--竞赛分享
- LG4091 【[HEOI2016/TJOI2016]求和】
- iOS 设备屏幕上实时打印 Log 的小工具