您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
jQuery Poshytip是一块提示性的插件,可以用来提示用户操作,提高用户体验
首先去poshytip官网下载插件 http://vadikom.com/demos/poshytip/
必须引入的是jQuery的js文件和poshytip的js文件和css文件
<link type="text/css" rel="stylesheet" href="js/poshytip-1.2/src/tip-yellow/tip-yellow.css" /> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/poshytip-1.2/src/jquery.poshytip.min.js"></script
<script type="text/javascript"> $(document).ready(function(){ $("#tip1").poshytip({ alignX: 'left', content:'<input type="text" name="a" value="a标签的提示" />' }); $("#username").poshytip({ className: 'tip-yellow', content:'提示内容', showOn: 'focus', alignTo: 'target', alignX: 'right', alignY: 'center', offsetX: 10, showTimeout:1 }); }); </script>
<a id="tip1" title="这是个工具" href="#">移去看看</a> <input type="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 | 工具条消失的过渡时间 |
hideTimeout | 工具条消失的过渡时间 |
offsetY | 相对Y方向位移,数字 |
allowTipHover | 允许鼠标滑向工具条上方 |
fade | 是否使用渐隐渐显动画,true/false |
slide | 是否使用滑动动画,true/false |
方法:show | .poshytip('show'),手动触发显示提示工具条 |
方法:hide | .poshytip('hide'),手动触发隐藏提示工具条 |
方法:disable | .poshytip('disable'),手动触发禁用提示工具条 |
方法:enable | .poshytip('enable'),手动触发启用提示工具条 |
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。