tooltip提示控件
这些天忙于公司项目的改版就很少来这里发表文章了,今天趁着周末休息给大家分享一个jQuery提示控件。可用于显示加载提示、错误提示、操作提示等。
先上张预览图:
提示条样式可以自己定义,支持关闭回调和锁屏,自适应居中,采用fixed定位(暂未考虑兼容IE6)。
下面是源码:
1 /** 2 * tooltip提示 3 * @author Newton---承諾ン祗愛 4 * @date 2012年04月19日晚 5 * @update 2012年04月23日重构,保证一个实例的关闭函数只能触发自身的关闭事件,加入动画缓动支持。 6 * @param object{} 7 * @type string tip: '', 提示内容,支持传入html。 8 * @type number time: 3, 自动关闭时间,以秒计时。 9 * @type boolean lock: false, 锁屏。 10 * @type string easing: 'linear' 动画缓动效果,需要缓动插件支持。 11 * @type string maskColor: '#000', 锁屏颜色。 12 * @type number maskOpacity: .3, 锁屏透明度。 13 * @type number fxSpeed: 300, 动画速度,不建议设置过大,以毫秒计时。 14 * @type number index: 999999, z-index值。 15 * @type function afterClose: $.noop 关闭后回调。 16 */ 17 (function ($){ 18 //提示条外层包裹 19 var tooltipWrap = $([ 20 ' 21 <div style="position: fixed; top:-100%; left: 50%; margin: 0; padding: 0;">', 22 ' 23 <div style="position: relative; top:0; right: 50%; margin: 0; padding: 0;"></div> 24 25 ', 26 '</div> 27 28 ' 29 ].join('')).appendTo(document.body); 30 31 //锁屏 32 var lockMask = $(' 33 <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none;"></div> 34 35 ').appendTo(document.body); 36 37 //内容包裹 38 var tootipInner = tooltipWrap.children(); 39 40 //计时器id 41 var timer = null; 42 43 //实例堆栈 44 var instanceStack = null; 45 46 //默认参数 47 var defaults = { 48 tip: '', 49 time: 3, 50 fxSpeed: 300, 51 index: 999999, 52 lock: false, 53 easing: 'linear', 54 maskOpacity: .2, 55 maskBackground: '#000', 56 afterClose: $.noop 57 }; 58 59 //接口 60 var tooltip = function (config){ 61 //模仿静态方法,不需要用new初始化 62 if (!(this instanceof tooltip)) { 63 return new tooltip(config); 64 } 65 this.config = $.extend({}, defaults, config); 66 this.config.time = this.config.time * 1000; 67 this._initialize(); 68 return this; 69 }; 70 71 //原型方法 72 tooltip.prototype = { 73 //初始化函数 74 _initialize: function (){ 75 clearTimeout(timer); 76 if (instanceStack !== null && instanceStack !== this) instanceStack.config.afterClose(); 77 instanceStack = this; 78 tooltipWrap.css('z-index', this.config.index); 79 lockMask.css({ 80 zIndex: this.config.index - 1, 81 opacity: this.config.maskOpacity, 82 background: this.config.maskBackground 83 }); 84 this._toggleMask(); 85 tootipInner.html(this.config.tip); 86 this._slideDown(); 87 }, 88 //锁屏 89 _locked: function (){ 90 lockMask.fadeIn(this.config.fxSpeed); 91 }, 92 //关闭锁屏 93 _unlocked: function (){ 94 lockMask.fadeOut(this.config.fxSpeed); 95 }, 96 //显示隐藏锁屏 97 _toggleMask: function (){ 98 if (this.config.lock) { 99 this._locked(); 100 } else { 101 this._unlocked(); 102 } 103 }, 104 //提示条滑下 105 _slideDown: function (){ 106 var t = this; 107 tooltipWrap.stop(true, false).animate({ 108 top: 0 109 }, this.config.fxSpeed, this.config.easing, function (){ 110 t._autoClose(); 111 }); 112 }, 113 //提示条收起 114 _slideUp: function (){ 115 //保证只有当前实例才能执行关闭操作 116 if (instanceStack !== this) return; 117 var t = this; 118 this._unlocked(); 119 tooltipWrap.animate({ 120 top: -tooltipWrap.height() 121 }, this.config.fxSpeed, this.config.easing, function (){ 122 instanceStack = null; 123 t.config.afterClose(); 124 }); 125 }, 126 //自动关闭 127 _autoClose: function (){ 128 var t = this; 129 timer = setTimeout(function (){ 130 clearTimeout(timer); 131 t._slideUp(); 132 }, this.config.time); 133 }, 134 //关闭接口 135 close: function (){ 136 this._slideUp(); 137 } 138 }; 139 140 //公开接口 141 window.tooltip = tooltip; 142 })(jQuery);
调用方法(依赖jQuery,每个参数的意义注释里都有,不多解释了):
1 tooltip({ 2 tip: '消息', 3 lock: true, 4 time: 6, 5 afterClose: function(){ 6 alert('我关闭了!'); 7 } 8 });
更新日志: 2012年04月23日:详细请见注释。 示例下载: tooltip.rar(前端组-Newton)
posted on 2012-04-24 08:53 前端组www.qianduanzu.com 阅读(2784) 评论(6) 编辑 收藏 举报