编写自己的jQuery Tip插件

我相信很多像我这样的同学总是习惯jQuery，所以我也没办法。只能怪jQuery太热，各种插件基本都能满足平时的需求。但这毕竟不是长久之计。古人云：“授人以鱼不如授人以渔”。

为了方便之前没有接触过的同学，我们先来回顾一下jQuery的插件机制。

复制的代码如下：//添加检查和取消检查插件jquery . fn . extend({ check : function(){ return this . each(function(){ this . checked=true；});}，取消选中： function(){ return this . each(function(){ this . checked=false；});}});//使用插件$ ('input [type=checkbox]')。check()；$(“input[type=radio]”)。取消选中()；

实际上，jQuery插件非常简单。难怪jQuery插件满天飞。在此之前，我认为这很复杂。我一直认为编写插件是一件意义深远的事情。不知道有没有同学有同感。

先做一个需求分析再开始(ps:我是软件工程出身，学费很可怕。不做需求分析对不起学费，呵呵)。

事实上，没有什么可以分析的是做出以下效果：

当我把鼠标放在上面的时候，我弹出微信扫了一下。微信太热了，老板让我在网站上放一个，我就写了一个插件让他满意。发工资是神，给钱干活，别跟我说什么节操。IT宅男被三观毁了，没有节操。太远了。看效果图。

使用该方法与其他jqueries没有什么不同：

复制代码如下： $ (function () {var t=$(')。微信')。提示({title : '微信扫一扫'，content : ' img src=' http 3360 img/weixin . jpg ' width=' 160 px ' height=' 166 px ')，html:true，direction : ' bottom ' })；t . bind({ mouse over : function(){ t . Tip(' show ')；}，mouse out : function(){ t . Tip(' hide ')；} });});

看看可配置的选项。

复制的代码如下：默认选项： {Title : ' '，//Title内容： ' '，//内容方向3360' Bottom '，//弹出反转，相对于所选元素HTML3360 false，//是否允许内容作为HTML元素模板： ' div class=' tip ' div class=' tip-inner ' H3/H3 div class=' tip-container '/div/div//popup template }

最后，如果你感兴趣的话，看看高清无代码源代码，如果你不感兴趣的话，看看ctrl c和ctrl v。

复制代码代码如下：function($){ var Tip=function(element，options){ this.init(element，options)；}提示。prototype={ constructor : Tip，init : function(元素，选项){ this。element=$(元素)；this.options=$ .extend({}，this.defaultOptions，options)；},显示：函数(){ if(！这个。提示){这个。提示=这个。gettip()；var title=this.tip.find('h3 ')，container=this.tip.find(' .提示-容器');//设置标题标题。正文(这个。选项。标题)；//设置内容if(this . options . html){ container。html(这个。选项。内容)；} else { container。正文(这个。选项。内容)；} //添加小费到body $(“body”).追加(这个。提示)；//计算小费的位置var eLeft=this.element.offset().左侧，eTop=this.element.offset().top，Width=this.element.innerWidth()，e Height=this。元素。内部高度()，tipw=this.tip[0].offsetWidth，tiph=this.tip[0].右、上、左；开关(这个。选项。方向){ case ' top ' : top=EtoP-tiph；left=(ElEFT-tipw/2)EwitH/2；this.tip.css({top: top，left : left })；打破；case ' left ' : top=(EtoP-tiph/2)eHeight/2；left=ElEFT-tipw；this.tip.css({top: top，left : left })；打破；表壳‘底部’:顶部=EtoP e高度；left=(ElEFT-tipw/2)EwitH/2；this.tip.css({top: top，left : left })；打破；case ' right ' : top=(EtoP-tiph/2)eHeight/2；left=Eleft Width this . tip . CSS({ top : top，left : left })；打破；default: break} } else { this。小费。CSS({ display : ' block ' })；} }，隐藏：函数(){ this.getTip().CSS({ display : ' none ' })；}，getTip :函数(){返回这个。小费？这个。小费：美元(这个。选项。模板)；}，detach : function() { }，defaultOptions :{ title : ' '，content : ' '，direction : 'bottom '，html : false，template : ' div class=' tip ' div class=' tip-inner ' H3/h3div class=' tip-container '/div/div ' } $。fn。tip=function(option){ return。this(function(){ var e=$(this)，data=e .if(！数据)e.data('tip '，新的tip(此，选项));if (typeof option=='string ')数据[选项]()；});} }(窗口。jquery)；

钢性铸铁样式

复制代码代码如下：tip {位置：绝对值；padding: 3px背景# efefeffborder-radius : 2px；top: 0pxleft: 0px}。小费tip-内部{背景： # fafafbborder: 1px实心# d8d8d8}。小费提示-内部H3 { font-size : 14px；padd : 5pxborder-bottom : 1 px实心# eee}。小费。内部提示tip-container { padd : 5px；}

以上就是本文的所有内容了，小伙伴们对如何编写jQuery插件是否有了新的认识了呢，希望大家能够喜欢本文。