jquery poshytip消息提示插件使用
2015-08-11 13:50
696 查看
Poshy Tip是一款非常友好的信息提示工具了,如我们通常在做表单验证时会用到这个功能,这样可以告诉用户我们是要如何填写或者什么东西填写错误了,下面来看看这个poshytip使用。
使用步骤:
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+。poshytip包含两个js文件jquery.poshytip.js和jquery.poshytip.min.js,前者是未压缩版,如果在开发中出现错误可以引用这个调试,开发完之后线上引用后者压缩版的。
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
});
配置参数:
方法:
.poshytip('show') 显示提示框,前提提示框的alignTo参数被设置为'target'
.poshytip('showDelayed', [ timeout ] ) 设置显示提示框延迟时间
.poshytip('hide') 隐藏提示框
.poshytip('hideDelayed', [ timeout ] ) 设置隐藏提示框延迟时间
.poshytip('update', content, [ dontOverwriteOption ] ) 更新提示框内容
.poshytip('disable') 禁用提示框
.poshytip('enable') 启用提示框
.poshytip('destroy') 彻底销毁提示框
小结:
提示无处不在,更多的提示才能帮助用户轻松的使用产品,不管是表单注册提示、错误提示等等。希望你能够喜欢这款提示插件。
使用步骤:
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+。poshytip包含两个js文件jquery.poshytip.js和jquery.poshytip.min.js,前者是未压缩版,如果在开发中出现错误可以引用这个调试,开发完之后线上引用后者压缩版的。
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') 彻底销毁提示框
小结:
提示无处不在,更多的提示才能帮助用户轻松的使用产品,不管是表单注册提示、错误提示等等。希望你能够喜欢这款提示插件。
相关文章推荐
- jQuery 实现点击空白关闭目标元素的实现方法
- jQuery的noConflict()的作用
- jquery插件中的(function(){})
- jQuery的扩展
- JavaScript JQuery获取span、button标签中的文本
- 前端笔记——jquery ajax提交表单
- jquery交替实现隐藏、显示
- jQuery 鼠标拖拽排序
- 由于jquery版本差异导致的问题总结
- js与jquery获取滚动条距浏览器顶部的距离
- 基于jQuery HTML5人物介绍卡片特效
- JQuery发送ajax请求不能用数组作为参数
- jquery删除某数组某几个下标的元素
- jQuery中prepend()方法使用详解
- 使用超酷的jQuery缩略图生成插件NailThumb制作漂亮的缩略图web应用
- Jquery操作下拉框(DropDownList)实现取值赋值
- 【技术】jquery常用命令
- jquery获取class的值加入到数组,并判断数组中是否存在特定字符串
- jQuery模仿window7窗口弹出效果
- jQuery radio的取值与赋值