jQuery插件之——簡單日曆

最近在研究js插件的開發，之前看大神們，對插件都是信手拈來，隨便玩弄，感受本身要是達到那種水平就行了，就開始本身研究插件開發了。研究了一段時間以後，就開始寫了本身的第一個日曆插件，因爲是初學插件開發，代碼的可讀性可能有點差，但願各位大神能夠多提點意見，之後維護代碼，讓這個插件更加的完整。下面就貼出代碼。

首先，給插件來個總體的div容器

<div class="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($){
  3         var Beautifier = function(vals,options){
  4           this.vals = vals;
  5           this.defaults = {
  6             "width":"300px"
  7           }
  8           this.p = $.extend({},this.defaults,options); 
  9           this.$div = $("<div class='return-btn'></div>");
 10           this.prev = $("<div class='prev-btn'>前一頁</div>");
 11           this.time = $("<div class='time'></div>");
 12           this.next = $("<div class='next-btn'>後一頁</div>");
 13           this.tab = $("<table id='datatab'><tr></tr></table>");
 14         }
 15 
 16         Beautifier.prototype = {
 17           getDate : function(){
 18              var vals = this.vals;
 19              var t = this.time.attr("class");
 20              var tab = this.tab.attr("id");
 21              this.$div.append(this.prev,this.time,this.next);
 22              $(this.p.$this).append(this.$div,this.tab).width(this.p.width);
 23              var i = getInfo(vals);
 24              $("."+t).text(vals.year+"-" + i[0]+"-" + i[1]);
 25              $(".prev-btn,.next-btn").click(function(){returnAction($(this),t,vals,tab)});    
 26              setDateInfo(tab);
 27              init(vals,tab);
 28           }
 29         }
 30         /*加載時將日期放入td中*/
 31         function init(vals,tab){
 32            var w = new Date(vals.year+","+vals.month+","+1).getDay()//獲取本月第一天是星期幾
 33            var l =(w==0?6:w-1) + new Date(vals.year,vals.month,0).getDate();//須要鋪上td的個數
 34            var t = Math.ceil(l/7);
 35            for(var i=0; i<t; i++){
 36              $("#"+tab).append("<tr class='y-tr'></tr>");
 37            }
 38            $(".y-tr").each(function(){
 39               for(var i=0; i<7; i++){
 40                 $(this).append("<td></td>");
 41               }
 42            })
 43            setvalue(vals,new Date(vals.year,vals.month,0).getDate(),w);
 44         }
 45         function setvalue(val,l,w){
 46            for(var i=1;i<l+1;i++){
 47              var space = w==0?i+7-1+6:i+w-1+6;
 48              $("td").eq(space).text(i);
 49              if(i == val.day){
 50                $("td").eq(space).css("color","red"); 
 51              }
 52            }
 53         }
 54         function getInfo(vals){
 55            var info = [];
 56            info.push(vals.month > 9 ? vals.month : "0" + vals.month);
 57            info.push(vals.day > 9 ? vals.day : "0" + vals.day);
 58            return info;
 59         }
 60 
 61         function setDateInfo(tab){
 62           var m = ["","一","二","三","四","五","六","日"];
 63           for(var i=1; i<8; i++){
 64              $("#"+tab).find("tr:eq(0)").append("<td>星期"+m[i]+"</td>");
 65           }
 66         }
 67         /*上一頁，下一頁的點擊事件*/
 68         function returnAction($this,t,val,tab){
 69            if($this.attr("class") == "prev-btn"){
 70                if(val.month < 2){
 71                   val.month =12;
 72                   val.year-=1;
 73                }else{
 74                   val.month-=1;
 75                }
 76             }else if($this.attr("class") == "next-btn"){
 77                if(val.month > 11){
 78                   val.month =1;
 79                   val.year+=1;
 80                }else{
 81                   val.month+=1;
 82                }
 83             }   
 84            var v = getInfo(val);
 85            $("."+t).text(val.year+"-"+v[0]+"-"+v[1]);
 86            $(".y-tr").remove();
 87            init(val,tab);
 88         } 
 89 
 90         $.fn.work = function(options){
 91           var t = new Date();
 92           var DateVal = {
 93             "year" : t.getFullYear(),
 94             "month" : t.getMonth()+1,
 95             "day" : t.getDate()
 96           }
 97           var objs = new Beautifier(DateVal,options); 
 98           objs.getDate();
 99         }
100      })(jQuery)
101   </script>

那麼，插件就差很少完成了，如今只須要調用插件的方法就能夠了

1 <script>
2      $(".y-total").work({
3        "$this" : ".y-total",
4        "width" : "200px",//控制容器的寬度
5       });
6 </script>

效果如圖：