自己動手寫jQuery外掛程式 Tip（提示框）

對jquery相信很多同學和我一樣平時都是拿來主義，沒辦法，要怪只能怪jquery太火了，各種外掛程式基本能滿足平時的要求。但是這畢竟不是長久之道，古人云：「授之以魚，不如授之以漁」。

為了方便之前沒有接觸的同學，先來回顧一下jquery的外掛程式機制吧。

1

//新增check和uncheck外掛程式
2jquery.fn.extend();5},
6   uncheck: function
() );8}
9});
10//
外掛程式的使用
11 $("input[type=checkbox]").check();
12 $("input[type=radio]").uncheck();

動手之前先來做一下需求分析吧（ps：哥是學軟體工程出生的學費很坑爹啊，不搞搞需求分析對不起學費啊，呵呵）。

其實也沒啥好分析的就是做出如下效果：

使用方法其他jquery沒什麼不同：

$(function

());
t.bind(,
mouseout:
function
()     });
});

defaultoptions :

!function

($)    
tip.prototype =,this
.defaultoptions,options);
},show : 
function
()  
else
//新增tip到body
.tip);
//計算tip的位置
var eleft = this
.element.offset().left,
etop = this
.element.offset().top,
ewidth = this
.element.innerwidth(),
eheight = this
.element.innerheight(),
tipw = this.tip[0].offsetwidth,
tiph = this.tip[0].offsetheight,
top,
left;
switch(this
.options.direction) );
break
;                
case 'left':
top = (etop - tiph/2) + eheight/2;
left = eleft -tipw;
this
.tip.css();
break
;                
case 'bottom':
top = etop +eheight;
left = (eleft - tipw/2) + ewidth/2;
this
.tip.css();
break
;                
case 'right':
top = (etop - tiph/2) + eheight/2;
left = eleft +ewidth;
this
.tip.css();
break
;                
default
:                    
break
;                }
} else
);            }
},hide : 
function
() );
},gettip : 
function
() ,
detach : 
function
() ,
defaultoptions :
}$.fn.tip = function
(option) );
}}(window.jquery);

.tip 

.tip .tip-inner 
.tip .tip-inner h3 
.tip .tip-inner .tip-container 

自己動手寫Vue外掛程式Toast

避免重複install，設立flag toast.installed false toast.install function vue,options 使用options的配置 for let i in options vue.prototype.toast toast,type 2 建立例項，掛載...

動手寫乙個jquery外掛程式 實踐

目錄結構 index.html,index.css以及tab.js 首先搭建乙個jquery外掛程式的框架 tab.js function tab.prototype window.tab tab jquery index.html 裡呼叫tab建構函式 function script 然後我們先配...

動手寫乙個jquery外掛程式 實踐

目錄結構 index.html,index.css以及tab.js 首先搭建乙個jquery外掛程式的框架 tab.js function tab.prototype window.tab tab jquery index.html 裡呼叫tab建構函式 然後我們先配置一些預設引數 tab.js v...