jQuery插件之——简单日历

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

 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>