简单实用jQuery poshytip

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

本文出自 “jcblock” 博客,请务必保留此出处http://jclove.blog.51cto.com/5642636/1577591

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。