jquery 简单易用的提示消息插件 — Poshy Tip

Poshy Tip 是一个强大的jQuery 工具提示插件,拥有不同的外观。作为 Form Tooltips使用时,可以自定义气泡出现的位置。

其特点是简单易用,支持浏览器:IE6+, FF 2+, Opera 9+, Safari 3+, Chrome,并且带有六种皮肤的提示框。

demo效果图:

2014122952002773

使用步骤:

1、 下载poshytip插件,解压之后将文件夹src拷贝到项目中,然后引入js和css文件。

<link rel="stylesheet" href="../src/tip-yellow/tip-yellow.css" type="text/css" />
<script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../src/jquery.poshytip.min.js"></script>

注意:文件夹中包含所有样式,只需引自己需要的样式,此处引用的是tip-yellow.css。poshytip是基于jQuery的插件,所以在引用插件之前先引用jQuery,版本需要在1.4+。

2、html及调用:

<a id="demo" title="Hey, there! This is a tooltip." href="#">
 <script>
 $('#demo').poshytip();
 </script>

如果没有设置poshytip的content,那么它就会将元素的title值作为提示信息。

设置不同皮肤的提示框

$('#demo').poshytip({
  className: ''
});

设置className值来定义皮肤,缺省状态是tip-yellow。取值:tip-yellow,tip-violet,tip-darkgray,tip-skyblue,tip-yellowsimple,tip-twitter,tip-green

注意:设置className同时应将对应的css文件引入。

表单提示:

$('#demo-form-name').poshytip({
 className: 'tip-yellowsimple',
 showOn: 'focus',
 alignTo: 'target',
 alignX: 'right',
 alignY: 'center',
 offsetX: 5,
 showTimeout: 100
});

配置参数:

类型(时间单位为毫秒) 示例
content 显示的内容(缺省取值title) String, DOM element, Function, jQuery

$(‘#demo ‘).poshytip({
content: ‘Hey, there! This is a tooltip.’
});

className 设置提示框的class String

$(‘#demo ‘).poshytip({
className: ‘tip-yellow ‘
});

bgImageFrameSize 提示框背景图片的大小 Number

$(‘#demo ‘).poshytip({
className: ‘tip-violet ‘,
bgImageFrameSize: 9
});

showTimeout 延迟显示时间 Number

$(‘#demo ‘).poshytip({
className: ‘tip-violet ‘,
bgImageFrameSize: 9,
showTimeout: 50
});

hideTimeout 延迟消失时间 Number

$(‘#demo ‘).poshytip({
className: ‘tip-violet ‘,
bgImageFrameSize: 9,
hideTimeout: 50
});

timeOnScreen 自动隐藏之前显示多长时间 Number

$(‘#demo ‘).poshytip({
className: ‘tip-violet ‘,
bgImageFrameSize: 9,
timeOnScreen: 1000
});

//当元素获取到焦点时,提示框显示1秒之后自动隐藏

showOn 触发何种事件显示提示框 String(’hover ‘, ‘focus ‘, ‘none ‘)

$(‘#demo ‘).poshytip({
showOn: ‘focus ‘
});

//当获取焦点时显示提示

liveEvents
alignTo 设置箭头位置 String(’cursor ‘, ‘target ‘)

$(‘#demo ‘).poshytip({
alignTo: ‘cursor ‘
});

//设置箭头位置相对于鼠标位置

alignX 水平对齐相对于鼠标光标或目标元素 String( ‘right ‘, ‘center ‘, ‘left ‘, ‘inner-left ‘, ‘inner-right ‘) $(‘#demo ‘).poshytip({
alignX: ‘center ‘
});
alignY 垂直对齐相对于鼠标光标或目标元素 String( ‘bottom ‘, ‘center ‘, ‘top ‘, ‘inner-bottom ‘, ‘inner-top ‘) $(‘#demo ‘).poshytip({
alignY: ‘center ‘
});
offsetX 设置提示框横向偏移 Number $(‘#demo ‘).poshytip({
offsetX: 10
});
offsetY 设置提示框纵向偏移 Number $(‘#demo ‘).poshytip({
offsetY: 10
});
keepInViewport 设置提示始终显示在窗口 Boolean $(‘#demo ‘).poshytip({
keepInViewport: true
});
allowTipHover 当鼠标悬在tip上时,不隐藏tip Boolean $(‘#demo ‘).poshytip({
allowTipHover: true
});
followCursor 提示跟随光标移动 Boolean $(‘#demo ‘).poshytip({
followCursor: true
});
fade 使用fade动画 Boolean $(‘#demo ‘).poshytip({
fade: true
});
slide 使用slide动画 Boolean

$(‘#demo ‘).poshytip({
slide: true
});

slideOffset slide动画相抵消 Number $(‘#demo ‘).poshytip({
slideOffset: 1000
});
showAniDuration 显示动画时长 Number $(‘#demo ‘).poshytip({
showAniDuration: 1000
});
hideAniDuration 隐藏动画的持续时间 Number $(‘#demo ‘).poshytip({
hideAniDuration: 1000
});
refreshAniDuration 异步更新提示时,动画的持续时间 Number $(‘#demo ‘).poshytip({
refreshAniDuration: 1000
});

方法:

.poshytip(‘show ‘) 显示提示框,前提提示框的alignTo参数被设置为’target ‘
.poshytip(‘showDelayed ‘, [ timeout ] ) 设置显示提示框延迟时间
.poshytip(‘hide ‘) 隐藏提示框
.poshytip(‘hideDelayed ‘, [ timeout ] ) 设置隐藏提示框延迟时间
.poshytip(‘update ‘, content, [ dontOverwriteOption ] ) 更新提示框内容
.poshytip(‘disable ‘) 禁用提示框
.poshytip(‘enable ‘) 启用提示框
.poshytip(‘destroy ‘) 彻底销毁提示框

-END-

分享到:
赞(0)