對jQuery相信很多同學和我一樣平時都是拿來主義，沒辦法，要怪只能怪jQuery太火了，各種插件基本能滿足平時的要求。但是這畢竟不是長久之道，古人云：“授之以魚，不如授之以漁”。
鼠標放上去的時候彈出微信掃一掃，微信太火了，老板讓網站上放一個，所以哥寫了個插件滿足一下他，發工資就是上帝，給錢干活，不要給我談節操，it宅男都是三觀盡毀，節操全無的。扯遠了?？葱Ч麍D吧。
$(function(){
var t = $(".weixin").Tip({
title:'微信掃一掃',
content:'<img src="img/weixin.jpg" width="160px" height="160px;">',
html:true,
direction:'bottom'
});
t.bind({
mouseover:function(){
t.Tip("show");
},
mouseout:function() {
t.Tip("hide");
}
});
});
defaultOptions :{
title : '',//標題
content : '',//內容
direction : 'bottom',//彈出反向，相對于選中元素
html : false,//是否允許內容為html元素
template : '<div class="tip"><div class="tip-inner"><h3></h3><div class="tip-container"></div></div></div>'//彈出框模版
}
!function($){
var Tip = function(element, options){
this.init(element, options);
}
Tip.prototype = {
constructor : Tip,
init : function(element, options){
this.element = $(element);
this.options = $.extend({},this.defaultOptions,options);
},
show : function() {
if (!this.tip) {
this.tip = this.getTip();
var title = this.tip.find("h3"),
container = this.tip.find(".tip-container");
//設置標題
title.text(this.options.title);
//設置內容
if (this.options.html) {
container.html(this.options.content);
} else {
container.text(this.options.content);
}
//添加tip到body
$("body").append(this.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) {
case 'top' :
top = eTop - tiph;
left = (eLeft - tipw/2) + eWidth/2;
this.tip.css({top: top, left: left});
break;
case 'left' :
top = (eTop - tiph/2) + eHeight/2;
left = eLeft - tipw;
this.tip.css({top: top, left: left});
break;
case 'bottom' :
top = eTop + eHeight;
left = (eLeft - tipw/2) + eWidth/2;
this.tip.css({top: top, left: left});
break;
case 'right' :
top = (eTop - tiph/2) + eHeight/2;
left = eLeft + eWidth;
this.tip.css({top: top, left: left});
break;
default:
break;
}
} else {
this.tip.css({display:'block'});
}
},
hide : function() {
this.getTip().css({display:"none"});
},
getTip : function() {
return this.tip ? this.tip : $(this.options.template);
},
detach : function() {
},
defaultOptions :{
title : '',
content : '',
direction : 'bottom',
html : false,
template : '<div class="tip"><div class="tip-inner"><h3></h3><div class="tip-container"></div></div></div>'
}
}
$.fn.Tip = function(option) {
return this.each(function(){
var e = $(this),
data = e.data('tip'),
options = typeof option == "object" && option;
if (!data) e.data("tip", new Tip(this,options));
if (typeof option == 'string') data[option]();
});
}
}(window.jQuery);
