jQuery日历插件开发

在jquery的学习中，经常碰到使用jQuery插件的使用，后来想着自己应该动手写一个jQuery插件，提高自己的能力，所以自己就写了一个简单的日历插件。自己动手将这个插件开发的全过程写下来，希望对各位前端新手有所帮助。

jquery插件开发大体上分为两种方式：

• 使用jQuery.extend(object)
• 使用jQuery.fn.extend(object)

前者的使用非常的简单，其相当于向jQuery添加了一个静态方法，可以通过$直接调用，举个例子：

$.extend({
  canlen:function(){
      alert('这是一个日历插件')
  }
});
$.canlen();//直接调用

下面我们来看第二种方式的jQuery插件开发，我的日历插件也是使用该方法进行开发的。并且为了后期的维护，将代码改写成面向对象的形式。首先，为了确保插件不与其他使用$的库发生冲突，所以，将jQuery传递给立即调用函数。并且为了让插件更加的灵活，所以应该让插件可以接受参数，当然使用者可以不进行传参，插件里面会给出参数的默认值。而整个的jquery插件如下所示：

;(function($){
    $.fn.calenPlugin = function(options){
        var calen = new Calen(this,options);
        return calen.init();
    }
    function Calen(ele,opt){
        this.ele = ele;
        this.tableBox = $('<div class="box"></div>');
        this.options = opt;
        this.defaults = {
            elem : this.ele,
        };
        this.options = $.extend({},this.defaults,opt);
        this.selectedMonth = new Date().getMonth() + 1;
        this.selectedYear = new Date().getFullYear();
    };
    Calen.prototype = {
        init:function(){
            var sel = $('<div class="sel"></div>');
                selYear = $('<select class="sel_year"></select>'),
                selMonth = $('<select class="sel_month"></select>');
            for(var i=-25;i<25;i++){
                var option = $('<option value="'+(new Date().getFullYear()+i)+'">'+(new Date().getFullYear()+i)+'</option>');
                option.appendTo(selYear);
            };
            for(var i=1;i<=12;i++){
                var option = $('<option value="'+i+'">'+i+'</option>');
                option.appendTo(selMonth);
            }
            sel.append(selYear);
            sel.append(selMonth);
            this.ele.append(sel);
            $('.sel_year').val(new Date().getFullYear());
            $('.sel_month').val(new Date().getMonth()+1);
            this.slectChange();
        },

        slectChange:function(){
            var _self = this;

            $('.sel_year').change(function(){
                _self.selectedYear = $(this).val();
                _self.renderTable();
            });
            $('.sel_month').change(function(){
                _self.selectedMonth = $(this).val();
                _self.renderTable();
            });
            _self.renderTable();
        },

        renderTable:function(){
            this.tableBox.html('');
            this.ele.append(this.tableBox);
            var table = $('<table class="calen_table"></table>');
            var html = '<thead><tr>';
            var totalDay = new Date(this.selectedYear,this.selectedMonth,0).getDate();

            var pervMonth = this.selectedMonth -1 < 1 ? 12 : this.selectedMonth -1;
            var prevYear = this.selectedMonth -1 < 1 ? this.selectedYear - 1 : this.selectedYear;
            var prevToDay = new Date(prevYear,pervMonth,0).getDate();
            var firWeek = new Date(this.selectedYear+'-'+this.selectedMonth).getDay();
            var weekArry = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            for(var i=0;i<weekArry.length;i++){
                html += '<td>'+weekArry[i]+'</td>';
            };
            html += '</tr><thead><tbody><tr>';
            for(var i=1;i<=firWeek;i++){
                html +='<td class="prevDay">'+(prevToDay+i-firWeek)+'</td>';
            }
            for (i=1; i<=totalDay; i++){
                html += '<td>' + i + '</td>';
                firWeek = (firWeek + 1)%7;
                if ((firWeek==0) && (i!=totalDay)){
                    html += '</tr><tr>';
                };
                if(i==totalDay&&firWeek!=0){
                    var j = 7-firWeek;
                    for(var s = 1;s<=j;s++){
                        html += '<td class="prevDay">'+s+'</td>';
                    }
                };
            }
            html+='</tr></tbody></table>';
            table.html(html);
            table.appendTo(this.tableBox);
        }
    }
}(jQuery));

同时，插件的调用直接如下所示：

$('.calen').calenPlugin({
    elem:this
})

具体的效果如下图所示

calen.gif

项目github地址。项目还有些东西不完善，以后将更新。