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' });

 

转载于:https://www.cnblogs.com/CoffeeEddy/p/9968340.html