最近在研究js插件的开发，以前看大神们，对插件都是信手拈来，随便玩弄，感觉自己要是达到那种水平就好了，就开始自己研究插件开发了。研究了一段时间之后，就开始写了自己的第一个日历插件，由于是初学插件开发，代码的可读性可能有点差，希望各位大神可以多提点意见，以后维护代码，让这个插件更加的完整。下面就贴出代码。
首先，给插件来个整体的div容器
<divclass="y-total"></div>
本人习惯给容器取class或id名时，加上自己独特的前缀，这样，有助于识别自己的代码，也避免与其他同事的样式冲突。
然后就是开始写样式，可以根据自己的需求来调整样式
1.y-total{height:auto;border:1px solid #666;}2.y-total .return-btn{height:23px;}3.y-total .return-btn>div{border-right: 1px solid #033;border-bottom: 1px solid #033;color: #666;font-family: "Microsoft Yahei",PMingLiU,Verdana,Arial,Helvetica,sans-serif}4.y-total .return-btn>div:nth-child(3){border-right:0px;}5.y-total .PRev-btn{cursor: pointer;width:25%;float: left;text-align: center;}6.y-total .time{cursor: pointer;float:left;width:49%;text-align: center;}7.y-total .next-btn{cursor: pointer;float:right;width:25%;text-align: center;}8.y-total .y-stop{position: absolute;margin-left: 6px;background-color: red;color: #fff;}9.y-total #datatab{clear:both;width:100%;}10.y-total #datatab td {height:30px;font-family: "Microsoft Yahei",PMingLiU,Verdana,Arial,Helvetica,sans-serif;color: #666;border: 1px solid #D2D2D2;font-size: 14px;text-align: center;}
第三步，就是插件的代码了
1<script>2(function($){3varBeautifier =function(vals,options){4this.vals =vals;5this.defaults ={6"width":"300px"7}8this.p = $.extend({},this.defaults,options);9this.$div = $("<div class='return-btn'></div>");10this.prev = $("<div class='prev-btn'>前一页</div>");11this.time = $("<div class='time'></div>");12this.next = $("<div class='next-btn'>后一页</div>");13this.tab = $("<table id='datatab'><tr></tr></table>");14}1516Beautifier.prototype ={17getDate :function(){18varvals =this.vals;19vart =this.time.attr("class");20vartab =this.tab.attr("id");21this.$div.append(this.prev,this.time,this.next);22$(this.p.$this).append(this.$div,this.tab).width(this.p.width);23vari =getInfo(vals);24$("."+t).text(vals.year+"-" + i[0]+"-" + i[1]);25$(".prev-btn,.next-btn").click(function(){returnAction($(this),t,vals,tab)});26setDateInfo(tab);27init(vals,tab);28}29}30/*加载时将日期放入td中*/31functioninit(vals,tab){32varw =newDate(vals.year+","+vals.month+","+1).getDay()//获取本月第一天是星期几33varl =(w==0?6:w-1) +newDate(vals.year,vals.month,0).getDate();//需要铺上td的个数34vart = Math.ceil(l/7);35for(vari=0; i<t; i++){36$("#"+tab).append("<tr class='y-tr'></tr>");37}38$(".y-tr").each(function(){39for(vari=0; i<7; i++){40$(this).append("<td></td>");41}42})43setvalue(vals,newDate(vals.year,vals.month,0).getDate(),w);44}45functionsetvalue(val,l,w){46for(vari=1;i<l+1;i++){47varspace = w==0?i+7-1+6:i+w-1+6;48$("td").eq(space).text(i);49if(i ==val.day){50$("td").eq(space).CSS("color","red");51}52}53}54functiongetInfo(vals){55varinfo =[];56info.push(vals.month > 9 ? vals.month : "0" +vals.month);57info.push(vals.day > 9 ? vals.day : "0" +vals.day);58returninfo;59}6061functionsetDateInfo(tab){62varm = ["","一","二","三","四","五","六","日"];63for(vari=1; i<8; i++){64$("#"+tab).find("tr:eq(0)").append("<td>星期"+m[i]+"</td>");65}66}67/*上一页，下一页的点击事件*/68functionreturnAction($this,t,val,tab){69if($this.attr("class") == "prev-btn"){70if(val.month < 2){71val.month =12;72val.year-=1;73}else{74val.month-=1;75}76}elseif($this.attr("class") == "next-btn"){77if(val.month > 11){78val.month =1;79val.year+=1;80}else{81val.month+=1;82}83}84varv =getInfo(val);85$("."+t).text(val.year+"-"+v[0]+"-"+v[1]);86$(".y-tr").remove();87init(val,tab);88}8990$.fn.work =function(options){91vart =newDate();92varDateVal ={93"year": t.getFullYear(),94"month" : t.getMonth()+1,95"day": t.getDate()96}97varobjs =newBeautifier(DateVal,options);98objs.getDate();99}100})(jQuery)101</script>
那么，插件就差不多完成了，现在只需要调用插件的方法就可以了
1<script>2$(".y-total").work({3"$this" : ".y-total",4"width" : "200px",//控制容器的宽度5});6</script>
效果如图：