通过上一个基础篇我们知道插件的格式，这次我来写一个tab插件
$(function() { $.fn.插件名称 = function(options) { var defaults = { Event : "click", //触发响应事件 msg : "Holle word!" //显示内容 }; var options = $.extend(defaults,options); var $this = $(this); //当然响应事件对象 //功能代码部分 //绑定事件 $this.live(options.Event,function(e){ alert(options.msg); }); } });
直接贴代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> *{margin:0;padding: 0;} li{list-style: none} .lee_ul{overflow: hidden;zoom:1;} .lee_ul1{overflow: hidden;zoom:1;} li{width: 100px;height: 30px;float: left;} li.active{background: red;} li.current{background: red;} .lee_main div{display: none;background: #ccc;width: 300px;} .lee_main .active{display: block;} .lee_main1 div{display: none;background: #ccc;width: 300px;} .lee_main1 .current{display: block;} </style> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript"> ;(function($){ $.fn.lee_tab=function(options){ var defaults={ //各种参数，各种熟悉 activeClass:‘active‘, tabNav:‘.lee_ul>li‘, tabCon:‘.lee_main>div‘, eventType:‘click‘ } var options=$.extend(defaults,options); this.each(function(){ //实现功能的代码 var _this=$(this); _this.find(options.tabNav).on(options.eventType,function(){ $(this).addClass(options.activeClass).siblings().removeClass(options.activeClass); var index=$(this).index(); _this.find(options.tabCon).eq(index).show().siblings().hide(); }); }); return this; alert(this); } })(jQuery); $(function(){ $(‘.lee_tab‘).lee_tab(); $(‘.lee_tab2‘).lee_tab({ activeClass:‘current‘, tabNav:‘.lee_ul1>li‘, tabCon:‘.lee_main1>div‘, eventType:‘mouseover‘ }); }) </script> </head> <body> <div class="lee_tab"> <ul class="lee_ul"> <li class="active">1</li> <li>2</li> <li>3</li> </ul> <div class="lee_main"> <div class="active">11</div> <div>22</div> <div>33</div> </div> </div> <div style="clear:both;"></div> <div class="lee_tab2"> <ul class="lee_ul1"> <li class="current">1</li> <li>2</li> <li>3</li> </ul> <div class="lee_main1"> <div class="current">11</div> <div>22</div> <div>33</div> </div> </div> </body> </html>