简单实用jQueryposhytip

jQuery Poshytip是一块提示性的插件，可以用来提示用户操作，提高用户体验

成都做网站、成都网站制作服务团队是一支充满着热情的团队，执着、敏锐、追求更好，是创新互联的标准与要求，同时竭诚为客户提供服务是我们的理念。成都创新互联把每个网站当做一个产品来开发，精雕细琢，追求一名工匠心中的细致，我们更用心！

1. 首先去poshytip官网下载插件 http://vadikom.com/demos/poshytip/

2. 必须引入的是jQuery的js文件和poshytip的js文件和css文件

3. <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

4. <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>

5. <a id="tip1" title="这是个工具" href="#">移去看看</a>
   <input type="text" name="username" id="username" />

6. 这样子的话基本就可以完成啦，下面提供参数和方法表

   
   

7. 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')，手动触发启用提示工具条

当前题目：简单实用jQueryposhytip
文章URL：https://www.cdcxhl.com/article22/godpcc.html

成都网站建设公司_创新互联，为您提供关键词优化、静态网站、定制网站、外贸网站建设、云服务器、定制开发

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联