说下这个标红的 return this 是干什么用的，前面已说过 this 在这里是被选中的jQuery对象。将其return就可以在调用完我们的插件方法后可以继续调用jQ对象上的其他方法，也就是jQuery的链式操作，说玄乎点就叫级联函数。
OK！趁热打铁，我们来看看暴露出去的两个方法重写之后效果怎么样，毕竟对插件暴露部分的扩展和重写是很牛逼的一块东西。
想象个情景，你用了这个插件后觉得简单的show和hide效果简直是low爆了，决定重写这个弹出和隐藏的效果：
$.fn.popWin.show = function($ele) { $ele.children().first().css('top','-30%').animate({top:'30%'},500); $ele.show(); } $.fn.popWin.hide = function($ele) { $ele.children().first().animate({top:'-30%'},500,function() { $ele.hide(); }); }
你在自己的代码里加上上面两段，然后发现弹窗有了一个简单的上下滑动进入屏幕的效果，同时又不会影响我们弹窗的创建，证明我们的暴露方法还算合理。
当然你也可以让它竖着进、横着进、翻着跟头进，这就看你自己了。
最后贴上默认的样式表，为了急着想粘回去试试的同学们。
.pop-win { border: 1px solid #fff; padding: 10px; background-color: #fff; -wekbit-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 3px 9px rgba(0,0,0,0.3); box-shadow: 0 3px 9px rgba(0,0,0,0.3); } .pop-win-red { padding: 10px; background-color: red; -wekbit-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 3px 9px rgba(0,0,0,0.3); box-shadow: 0 3px 9px rgba(0,0,0,0.3); } .pop-title { width: 100%; height: 20%; line-height: 40px; padding-left: 10px; box-sizing: border-box; border-bottom: 1px solid #eee; font-size: 17px; font-weight: bold; } .pop-desc { width: 100%; height: 60%; box-sizing: border-box; padding: 10px 0 0 10px; border-bottom: 1px solid #eee; } .pop-btn-box { width: 100%; height: 20%; text-align: right; } .pop-btn { margin: 10px 10px 0 0; width: 60px; height: 30px; }
当然这只是个编写插件的例子，如果要拿出去使用还需要仔细打磨。例子虽然简单，旨在抛砖引玉。
您可能感兴趣的文章: