jQuery插件之——简单日历

最近在研究js插件的开发，以前看大神们，对插件都是信手拈来，随便玩弄，感觉自己要是达到那种水平就好了，就开始自己研究插件开发了。研究了一段时间之后，就开始写了自己的第一个日历插件，由于是初学插件开发，代码的可读性可能有点差，希望各位大神可以多提点意见，以后维护代码，让这个插件更加的完整。下面就贴出代码。

首先，给插件来个整体的div容器

<div class="y-total"></div>

本人习惯给容器取class或id名时，加上自己独特的前缀，这样，有助于识别自己的代码，也避免与其他同事的样式冲突。

然后就是开始写样式，可以根据自己的需求来调整样式

 .y-total{height:auto;border:1px solid #666;}
     .y-total .return-btn{height:23px;}
     .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}
     .y-total .return-btn>div:nth-child(3){border-right:0px;}
     .y-total .prev-btn{cursor: pointer;width:25%;float: left;text-align: center;}
     .y-total .time{cursor: pointer;float:left;width:49%;text-align: center;}
     .y-total .next-btn{cursor: pointer;float:right;width:25%;text-align: center;}
     .y-total .y-stop{position: absolute;margin-left: 6px;background-color: red;color: #fff;}
     .y-total #datatab{clear:both;width:100%;}
     .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;}

第三步，就是插件的代码了

 <script>
      (function($){
         var Beautifier = function(vals,options){
           this.vals = vals;
           this.defaults = {
             "width":"300px"
           }
           this.p = $.extend({},this.defaults,options);
           this.$div = $("<div class='return-btn'></div>");
           this.prev = $("<div class='prev-btn'>前一页</div>");
           this.time = $("<div class='time'></div>");
           this.next = $("<div class='next-btn'>后一页</div>");
           this.tab = $("<table id='datatab'><tr></tr></table>");
         }

         Beautifier.prototype = {
           getDate : function(){
              var vals = this.vals;
              var t = this.time.attr("class");
              var tab = this.tab.attr("id");
              this.$div.append(this.prev,this.time,this.next);
              $(this.p.$this).append(this.$div,this.tab).width(this.p.width);
              var i = getInfo(vals);
              $("."+t).text(vals.year+"-" + i[0]+"-" + i[1]);
              $(".prev-btn,.next-btn").click(function(){returnAction($(this),t,vals,tab)});
              setDateInfo(tab);
              init(vals,tab);
           }
         }
         /*加载时将日期放入td中*/
         function init(vals,tab){
            var w = new Date(vals.year+","+vals.month+","+1).getDay()//获取本月第一天是星期几
            var l =(w==0?6:w-1) + new Date(vals.year,vals.month,0).getDate();//需要铺上td的个数
            var t = Math.ceil(l/7);
            for(var i=0; i<t; i++){
              $("#"+tab).append("<tr class='y-tr'></tr>");
            }
            $(".y-tr").each(function(){
               for(var i=0; i<7; i++){
                 $(this).append("<td></td>");
               }
            })
            setvalue(vals,new Date(vals.year,vals.month,0).getDate(),w);
         }
         function setvalue(val,l,w){
            for(var i=1;i<l+1;i++){
              var space = w==0?i+7-1+6:i+w-1+6;
              $("td").eq(space).text(i);
              if(i == val.day){
                $("td").eq(space).css("color","red");
              }
            }
         }
         function getInfo(vals){
            var info = [];
            info.push(vals.month > 9 ? vals.month : "0" + vals.month);
            info.push(vals.day > 9 ? vals.day : "0" + vals.day);
            return info;
         }

         function setDateInfo(tab){
           var m = ["","一","二","三","四","五","六","日"];
           for(var i=1; i<8; i++){
              $("#"+tab).find("tr:eq(0)").append("<td>星期"+m[i]+"</td>");
           }
         }
         /*上一页，下一页的点击事件*/
         function returnAction($this,t,val,tab){
            if($this.attr("class") == "prev-btn"){
                if(val.month < 2){
                   val.month =12;
                   val.year-=1;
                }else{
                   val.month-=1;
                }
             }else if($this.attr("class") == "next-btn"){
                if(val.month > 11){
                   val.month =1;
                   val.year+=1;
                }else{
                   val.month+=1;
                }
             }
            var v = getInfo(val);
            $("."+t).text(val.year+"-"+v[0]+"-"+v[1]);
            $(".y-tr").remove();
            init(val,tab);
         } 

         $.fn.work = function(options){
           var t = new Date();
           var DateVal = {
             "year" : t.getFullYear(),
             "month" : t.getMonth()+1,
             "day" : t.getDate()
           }
           var objs = new Beautifier(DateVal,options);
           objs.getDate();
         }
      })(jQuery)
   </script>

那么，插件就差不多完成了，现在只需要调用插件的方法就可以了

 <script>
      $(".y-total").work({
        "$this" : ".y-total",
        "width" : "200px",//控制容器的宽度
       });
 </script>

效果如图：