Jquery插件 tooltip
感觉JQuery用了好久，一直都是在用类别级别的方式写插件，就在昨天尝试了一下对象级别的方式开发。
对象级别的方式，就是把插件写在一个闭包函数里面，闭包的作用：
1.避免全局依赖
2.避免第三方破坏
3.兼容Jquery操作符$和jQuery
对象级别框架格式
1 (function($) { 2 $.fn.pluginName = function() { 3 // Our plugin implementation code goes here. 4 }; 5 })(jQuery);
为了使方法暴露一些参数，供调用者配置，这边选项像一个options对象传递给插件函数
1 (function($) { 2 var defaults = { 3 param1:''， 4 param2:'' 5 } 6 7 var settings = $.extend(defaults, options); 8 $.fn.pluginName = function() { 9 // Our plugin implementation code goes here. 10 }; 11 12 })(jQuery);
最后记录一个自制的tooltip插件
CSS文件：
1 .tooltip { 2 max-width: 200px; 3 text-align: center; 4 position: fixed; 5 padding: 3px 6px; 6 border: 1px solid #000; 7 border-radius: 4px; 8 font-size: 14px; 9 } 10 11 .tooltip-dark { 12 color: #fff; 13 background: #000; 14 } 15 16 .tooltip-light { 17 color: #000; 18 background: #fff; 19 }
JQuery文件
1 (function ($) { 2 $.fn.tooltip = function (options) { 3 var defaults = { 4 theme: 'dark', 5 position: 'top', 6 text:'' 7 }; 8 9 var settings = $.extend(defaults, options); 10 11 var $tooltip = $('<div class="tooltip">' + settings.text + '</div>'); 12 var element = this; 13 14 //绑定事件 15 element.on('mouseenter', function (e) { 16 if (settings.text.length > 0) { 17 showTip(element, settings, $tooltip); 18 } 19 }); 20 21 element.on('mouseleave', function (e) { 22 removeTip($tooltip); 23 }) 24 25 } 26 27 //显示 28 function showTip(element, settings, tipElement) { 29 tipElement.appendTo($('body')); 30 31 //选择主题 32 var theme = settings.theme; 33 tipElement.addClass(theme == 'dark' ? 'tooltip-dark' : 'tooltip-light'); 34 35 var pos = settings.position; 36 var tipWidth = tipElement.width() + parseInt(tipElement.css('padding-left')) + parseInt(tipElement.css('padding-right')); 37 var tipHeight = tipElement.height() + parseInt(tipElement.css('padding-top')) + parseInt(tipElement.css('padding-bottom')); 38 var eleWidth = element.width(); 39 var eleHeight = element.height(); 40 var offset = element.offset(); 41 var Anchor = _position(pos, eleWidth, eleHeight, tipWidth, tipHeight, offset); 42 43 tipElement.css({ 44 "top": (Anchor.y) + "px", 45 "left": (Anchor.x) + "px" 46 }); 47 48 } 49 50 function removeTip(tipElement) { 51 tipElement.remove(); 52 } 53 54 function _position(pos,ew,eh,tw,th,o) { 55 //偏移量 56 var Anchor = { 57 x: 0, 58 y: 0 59 }; 60 61 //计算水平居中 62 var verticalX = o.left + ew / 2 - tw / 2; 63 //计算垂直居中 64 var horizontalY = o.top + eh / 2 - th / 2; 65 66 switch (pos) { 67 case 'top': 68 Anchor.x = verticalX; 69 Anchor.y = o.top - eh - 5; 70 break; 71 case 'left': 72 Anchor.x = o.left - tw - 5; 73 Anchor.y = horizontalY; 74 break; 75 case 'right': 76 Anchor.x = o.left + ew + 5; 77 Anchor.y = horizontalY; 78 break; 79 default: 80 Anchor.x = verticalX; 81 Anchor.y = o.top + eh + 5; 82 break; 83 } 84 85 return Anchor; 86 } 87 }(jQuery));
调用
1 $('#top').tooltip({ text: '测试哦', position: 'top' }); 2 $('#left').tooltip({ text: 'lllleft', theme: 'light', position: 'left' }); 3 $('#right').tooltip({ text: '测试哦', position: 'right' }); 4 $('#bottom').tooltip({ text: 'bottttttttom', theme: 'light', position: 'bottom' });
