jQuery插件之——简单日历

街边微凉小悲伤 发布于:2015-11-03 23:00 栏目:原创 浏览:1324 评论:5
最近在研究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&gt;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&gt;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;
}


第三步,就是插件的代码了
(function($) {
    var Beautifier = function(vals, options) {
            this.vals = vals;
            this.defaults = {
                "width": "300px"
  
            }
            this.p = $.extend({}, this.defaults, options);
            this.$div = $("&lt;div class='return-btn'&gt;&lt;/div&gt;");
            this.prev = $("&lt;div class='prev-btn'&gt;前一页&lt;/div&gt;");
            this.time = $("&lt;div class='time'&gt;&lt;/div&gt;");
            this.next = $("&lt;div class='next-btn'&gt;后一页&lt;/div&gt;");
            this.tab = $("&lt;table id='datatab'&gt;&lt;tr&gt;&lt;/tr&gt;&lt;/table&gt;");
  
        }
    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 &lt; t; i++) {
            $("#" + tab).append("&lt;tr class='y-tr'&gt;&lt;/tr&gt;");
        }
        $(".y-tr").each(function() {
            for (var i = 0; i &lt; 7; i++) {
                $(this).append("&lt;td&gt;&lt;/td&gt;");
            }
        })
        setvalue(vals, new Date(vals.year, vals.month, 0).getDate(), w);
    }
    function setvalue(val, l, w) {
        for (var i = 1; i &lt; 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 &gt; 9 ? vals.month : "0" + vals.month);
        info.push(vals.day &gt; 9 ? vals.day : "0" + vals.day);
        return info;
    }
  
    function setDateInfo(tab) {
        var m = ["", "一", "二", "三", "四", "五", "六", "日"];
        for (var i = 1; i &lt; 8; i++) {
            $("#" + tab).find("tr:eq(0)").append("&lt;td&gt;星期" + m + "&lt;/td&gt;");
        }
    }
    /*上一页,下一页的点击事件*/
    function returnAction($this, t, val, tab) {
        if ($this.attr("class") == "prev-btn") {
            if (val.month &lt; 2) {
                val.month = 12;
                val.year -= 1;
            } else {
                val.month -= 1;
            }
        } else if ($this.attr("class") == "next-btn") {
            if (val.month &gt; 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)
  
//那么,插件就差不多完成了,现在只需要调用插件的方法就可以了
$(".y-total").work({
     "$this": ".y-total",
     "width": "200px",
    //控制容器的宽度  
});

效果如图:
沙发#
发布于:2015-11-03 23:19
支持,帮你排了下版,编辑器是有代码输入框的
板凳#
发布于:2015-11-04 22:40
admin:支持,帮你排了下版,编辑器是有代码输入框的回到原帖
嗯,好的,谢了
地板#
发布于:2015-11-07 08:57
不错,感谢分享知识
4楼#
发布于:2015-11-07 09:44
大家相互学习,多交流
5楼#
发布于:2015-11-07 22:58
Reginas:不错,感谢分享知识回到原帖
大家互相学习,多多交流
游客

返回顶部