jQuery信息提示工具
- 作者:admin
- 发表时间:2013-07-02 14:17:11
- 来源:未知
Poshy Tip是一款非常友好的信息提示工具,它基于jQuery,当鼠标滑向链接时,会出现一个信息提示条。信息的内容直接可以在HTML里设定也可以是从服务端调用的数据,该插件还提供了很多属性和方法。
XHTML
Demo中提供了三种使用的例子,页面代码如下:
1、鼠标滑上这里看看
2、用户名:
3、服务端调用: 鼠标滑向这里加载图片
当然,别忘了要加载jquery库和poshytip插件以及相关样式。
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'),手动触发启用提示工具条 |
联系我们
一切良好工作的开始,都需相互之间的沟通搭桥,欢迎咨询。
合作
咨询
建站咨询

