简单实用jQuery poshytip
jQuery Poshytip是一块提示性的插件,可以用来提示用户操作,提高用户体验
首先去poshytip官网下载插件http://vadikom.com/demos/poshytip/
必须引入的是jQuery的js文件和poshytip的js文件和css文件
<linktype="text/css"rel="stylesheet"href="js/poshytip-1.2/src/tip-yellow/tip-yellow.css"/><scripttype="text/javascript"src="js/jquery-1.7.2.min.js"></script><scripttype="text/javascript"src="js/poshytip-1.2/src/jquery.poshytip.min.js"></script
<scripttype="text/javascript">$(document).ready(function(){$("#tip1").poshytip({alignX:'left',content:'<inputtype="text"name="a"value="a标签的提示"/>'});$("#username").poshytip({className:'tip-yellow',content:'提示内容',showOn:'focus',alignTo:'target',alignX:'right',alignY:'center',offsetX:10,showTimeout:1});});</script>
<aid="tip1"title="这是个工具"href="#">移去看看</a><inputtype="text"name="username"id="username"/>
这样子的话基本就可以完成啦,下面提供参数和方法表
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
工具条消失的过渡时间
offsetY
相对Y方向位移,数字
allowTipHover
允许鼠标滑向工具条上方
fade
是否使用渐隐渐显动画,true/false
slide
是否使用滑动动画,true/false
方法:show
.poshytip('show'),手动触发显示提示工具条
方法:hide
.poshytip('hide'),手动触发隐藏提示工具条
方法:disable
.poshytip('disable'),手动触发禁用提示工具条
方法:enable
.poshytip('enable'),手动触发启用提示工具条
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。