继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

js+jquery原创日历插件——含js源文件下半部分(三)

DasiyOulu
关注TA
已关注
手记 7
粉丝 19
获赞 170

需与js源文件上半部分合起来用,详见(二)

js源码下半部分

//中部时间选择对象
function TimeNode() {
    var content = this;
    var node = this.node = $('<div class="foot_box"><div class="data_select"><div class="data_select_left_wrap fl"><div class="data_select_left"></div></div><div class="data_select_right_wrap fl"><div class="data_select_right"></div></div></div><div class="tip">' + "鼠标移入左、右侧,滑动滚轮选择时间。" + '</div></div>');

    var leftNodeTop = -hnow * 30;
    var leftNodeTopPx = leftNodeTop + "px";
    var leftNodeNum = hnow + 2;
    var rightNodeTop = -minnow * 30;
    var rightNodeTopPx = rightNodeTop + "px";
    var rightNodeNum = minnow + 2;

    content.node.find(".data_select_left").css({
        top: leftNodeTopPx
    });
    content.node.find(".data_select_right").css({
        top: rightNodeTopPx
    });
    this.appendTo = function(_jq) {
        $(_jq).append(content.node.get(0));
    }
    this.setData = function() {
        node.find("button").css({
            color: config.headColor
        });
        content.appendTo(wrapNode);
        content.setNum();
        content.setTimeCss(".data_select_left .data_node", leftNodeNum);
        content.setTimeCss(".data_select_right .data_node", rightNodeNum);
    }
    this.show = function() {
        content.node.css({
            left: "0px"
        });
    }
    this.hide = function() {
        content.node.css({
            left: "300px"
        });
    }
    //设置展示数字
    this.setNum = function() {
        if(config.isHourOnly) {
            content.node.find(".data_select_left_wrap").css({
                width: "101%"
            });
            content.node.find(".tip").text("鼠标移入上方,滑动滚轮选择时间。");
            var indexNum = config.dataFormat.indexOf("h");
            config.dataFormat = config.dataFormat.slice(0, indexNum + 2) + ":00";
        }
        var num_left = 0;
        var i_num_left = 0;
        for(var i = -2; i <= 26; i++) {
            if(i < 0) {
                num_left = i + 24;
            } else if(i > 24) {
                num_left = i - 24;
            } else {
                num_left = i;
            }
            num_left < 10 ? num_left = "0" + num_left : num_left;
            var oneTimeNode = $('<div class="data_node">' + num_left + "时" + '</div>');
            oneTimeNode.appendTo(node.find(".data_select_left"));
        }
        for(var i = -2; i <= 62; i++) {
            var num_right = 0;
            if(i < 0) {
                num_right = i + 60;
            } else if(i > 60) {
                num_right = i - 60;
            } else {
                num_right = i;
            }
            num_right < 10 ? num_right = "0" + num_right : num_right;
            var oneTimeNode = $('<div class="data_node">' + num_right + "分" + '</div>');
            oneTimeNode.appendTo(node.find(".data_select_right"));
        }
    }
    //设置滚动效果
    this.setTimeCss = function(_node, _num) {
            content.node.find(_node).removeClass("data_node_center").removeClass("data_node_around");
            content.node.find(_node).eq(_num).addClass("data_node_center");
            content.node.find(_node).eq(_num - 1).addClass("data_node_around");
            content.node.find(_node).eq(_num + 1).addClass("data_node_around");
        }
        //左侧设置小时
    this.node.find(".data_select_left_wrap").hover(function() {
        if(document.addEventListener) {
            document.addEventListener('DOMMouseScroll', timeNode.scrollSelectHour, false);
        } //火狐  
        document.onmousewheel = timeNode.scrollSelectHour;
    }, function() {
        if(document.addEventListener) {
            document.removeEventListener('DOMMouseScroll', timeNode.scrollSelectHour, false);
        }
        document.onmousewheel = null;
    });
    //滚动获取小时
    this.scrollSelectHour = function(event) {
        var e = event || window.event;
        if(e.detail < 0 || e.wheelDelta > 0) { //向上滚动
            leftNodeTop >= 0 ? leftNodeTop = 0 : leftNodeTop += 30;
        } else { //向下滚动
            leftNodeTop <= -720 ? leftNodeTop = -720 : leftNodeTop -= 30;
        }
        leftNodeTopPx = leftNodeTop + "px";
        leftNodeNum = Math.abs(leftNodeTop / 30) + 2;
        content.node.find(".data_select_left").css({
            top: leftNodeTopPx
        });
        content.setTimeCss(".data_select_left .data_node", leftNodeNum);
    }; //IE/Opera/Chrome

    //右侧设置分钟
    this.node.find(".data_select_right_wrap").hover(function() {
        if(document.addEventListener) {
            document.addEventListener('DOMMouseScroll', timeNode.scrollSelectMin, false);
        } //火狐  
        document.onmousewheel = timeNode.scrollSelectMin;
    }, function() {
        if(document.addEventListener) {
            document.removeEventListener('DOMMouseScroll', timeNode.scrollSelectMin, false);
        } //火狐  
        document.onmousewheel = null;
    });
    //滚动获取分钟
    this.scrollSelectMin = function(event) {
        var e = event || window.event;
        if(e.detail < 0 || e.wheelDelta > 0) { //向上滚动
            rightNodeTop >= 0 ? rightNodeTop = 0 : rightNodeTop += 30;
        } else { //向下滚动
            rightNodeTop <= -1800 ? rightNodeTop = -1800 : rightNodeTop -= 30;
        }
        rightNodeTopPx = rightNodeTop + "px";
        rightNodeNum = Math.abs(rightNodeTop / 30) + 2;
        content.node.find(".data_select_right").css({
            top: rightNodeTopPx
        });
        content.setTimeCss(".data_select_right .data_node", rightNodeNum);
    }; //IE/Opera/Chrome

    //获得当前小时
    this.getHourTxt = function() {
            selectHour = content.node.find(".data_select_left .data_node.data_node_center").text();
            selectHour = parseInt(selectHour);
            return selectHour;
        }
        //获得当前分钟
    this.getMinTxt = function() {
        if(config.isHourOnly) {
            selectMinutes = 0;
        } else {
            selectMinutes = content.node.find(".data_select_right .data_node.data_node_center").text();
            selectMinutes = parseInt(selectMinutes);
        }
        return selectMinutes;
    }

}
//中部月份选择对象
function MonthNode() {
    var content = this;
    var node = this.node = $('<div class="month_box hide"></div>');

    this.appendTo = function(_jq) {
        $(_jq).append(content.node.get(0));
    };
    this.setData = function() {
        content.appendTo(wrapNode);
        content.addMonthNode();
    };
    this.show = function() {
        clickMark = 1;
        content.node.find(".month_select_node_wrap").removeClass("visibility_class");
        content.node.removeClass("hide").removeClass("scale_box_lit").removeClass("scale_box_big_big").addClass("scale_box_big");
        content.node.find(".month_select_node").removeClass("gray_class").bind("click",content.clickMonth); 
        if(ynow==startYear){    
            for(var i=0;i<startMonth;i++){
                node.find(".month_select_node").eq(i).find(".month_select_node_wrap").addClass("visibility_class");
                node.find(".month_select_node").eq(i).addClass("gray_class").unbind("click");
            }
        }else if(ynow==endYear){
            for(var i=11;i>endMonth;i--){
                node.find(".month_select_node").eq(i).find(".month_select_node_wrap").addClass("visibility_class");
                node.find(".month_select_node").eq(i).addClass("gray_class").unbind("click");
            }

        }else{
            return ;
        }
    };
    this.hide = function() {
        content.node.removeClass("scale_box_lit").removeClass("scale_box_big").addClass("scale_box_big_big").addClass("hide");
    };

    this.addMonthNode = function() {
        for(var i = 1; i <= 12; i++) {
            var monthSelectNode = null;
            if(i == mnowTxt) {
                monthSelectNode = $('<div class="month_select_node"><div class="month_select_node_txt month_selected">' + i + "月" + '</div><div class="month_select_node_wrap"></div></div>');
                node.append(monthSelectNode.get(0));
            } else {
                monthSelectNode = (function() {
                    var node = $("<div>").addClass("month_select_node");
                    var node_txt = $("<div>").addClass("month_select_node_txt").text(i + "月");
                    var node_wrap = $("<div>").addClass("month_select_node_wrap");
                    node.append(node_txt.get(0)).append(node_wrap.get(0));
                    return node;
                })();
                node.append(monthSelectNode.get(0));
            }
        }
        content.node.find(".month_selected").css({
            background: config.headColor,
            opacity: "0.9",
            color: "#fff"
        });
        //鼠标点击月
        this.node.find(".month_select_node").bind("click",content.clickMonth);
        this.clickMonth=function(){
            mnow = parseInt($(this).find(".month_select_node_txt").text()) - 1;
            content.hide();
            calendarNode.selectIsYM();
            calendarNode.showScale();
            buttonNode.show();
            clickMark = 0;              
        }

        //鼠标滑过月
        this.node.find(".month_select_node").bind("mouseover", function() {
            $(this).find(".month_select_node_wrap").css({
                borderStyle: "solid",
                borderWidth: "2px",
                borderColor: config.headColor,
                opacity: "0.6"
            });
        });
        //鼠标滑出月
        this.node.find(".month_select_node").bind("mouseout", function() {
            $(this).find(".month_select_node_wrap").css({
                borderStyle: "solid",
                borderWidth: "2px",
                borderColor: "#ffffff",
                opacity: "1"
            });
        });
    };

}

//中部年份选择对象
function YearNode() {
    var content = this;
    var node = this.node = $('<div/>').addClass("year_box hide");
    var nodeWrap = $('<div/>').addClass("year_info_wrap");

    this.appendTo = function(_jq) {
        $(_jq).append(content.node.get(0));
    };
    this.setData = function() {
        content.appendTo(wrapNode);
        content.addYearNode();
        content.setYearTop();
    };
    this.show = function() {
        content.node.removeClass("hide").removeClass("scale_box_lit").removeClass("scale_box_big_big").addClass("scale_box_big");
    };
    this.hide = function() {
        content.node.removeClass("scale_box_lit").removeClass("scale_box_big").addClass("scale_box_big_big").addClass("hide");
    };
    this.addYearNode = function() {
        node.append(nodeWrap.get(0));
        for(var i = startYear; i <= endYear; i++) {
            var yearSelectNode = null;
            if(i == new Date().getFullYear()) {
                yearSelectNode = $('<div class="year_select_node"><div class="year_select_node_txt year_selected">' + i + '</div><div class="year_select_node_wrap"></div></div>');
                nodeWrap.append(yearSelectNode.get(0));
            } else {
                yearSelectNode = $('<div class="year_select_node"><div class="year_select_node_txt">' + i + '</div><div class="year_select_node_wrap"></div></div>');
                nodeWrap.append(yearSelectNode.get(0));
            }
        }
        content.node.find(".year_selected").css({
            background: config.headColor,
            opacity: "0.9",
            color: "#ffffff"
        });
        //鼠标点击年
        this.node.find(".year_select_node").bind("click", function() {
            ynow = parseInt($(this).find(".year_select_node_txt").text());
            content.hide();
            wrapNode.find(".calendar_txt_move").text(ynow + "年");
            monthNode.show();
            clickMark = 1;
        });

        //鼠标滑过年
        this.node.find(".year_select_node").bind("mouseover", function() {
            $(this).find(".year_select_node_wrap").css({
                borderStyle: "solid",
                borderWidth: "2px",
                borderColor: config.headColor,
                opacity: "0.6"
            });
        });
        //鼠标滑出年
        this.node.find(".year_select_node").bind("mouseout", function() {
            $(this).find(".year_select_node_wrap").css({
                borderStyle: "solid",
                borderWidth: "2px",
                borderColor: "#ffffff",
                opacity: "1"
            });
        });
    };
    this.setYearTop = function() {
        var yearTopNum = 0;
        var yearTopMax = Math.ceil((endYear - startYear) / 4) - 3;
        var yearScrollTopNum = 55 * Math.abs(yearTopNum);
        var yearScrollTop = -55 * yearScrollTopNum;
        if(new Date().getFullYear() - startYear >= 0 && new Date().getFullYear() - endYear <= 0) {
            yearTopNum = (new Date().getFullYear() + 1 - startYear) / 4;
            if(parseInt(yearTopNum) == yearTopNum) {
                yearTopNum = parseInt(yearTopNum) - 1;
            } else {
                yearTopNum = parseInt(yearTopNum);
            }
            (yearTopMax+3-yearTopNum)<=3?yearTopNum=yearTopMax:yearTopNum=yearTopNum;
            yearTopNum<0?yearTopNum=0:yearTopNum=yearTopNum;
            content.node.find(".year_info_wrap").css({
                top: -yearTopNum * 55
            });
        }
        content.node.hover(function() { //对div的处理 
            if(document.addEventListener) {
                document.addEventListener('DOMMouseScroll', scrollSelectYear, false);
            } //火狐          
            document.onmousewheel = document.onmousewheel = scrollSelectYear;
        }, function() {
            if(document.addEventListener) {
                document.removeEventListener('DOMMouseScroll', scrollSelectYear, false);
            } //火狐          
            document.onmousewheel = null;
        });

        function scrollSelectYear(event) {
            if(yearTopMax>=0){
                var e = event || window.event;
                if(clickMark == 2) {
                    if(e.detail < 0 || e.wheelDelta > 0) { //向上滚动
                        yearTopNum--;
                        yearTopNum <= 0 ? yearTopNum = 0 : yearTopNum = yearTopNum;
                    } else { //向下滚动
                        yearTopNum++;
                        yearTopNum >= yearTopMax ? yearTopNum = yearTopMax : yearTopNum = yearTopNum;
                    }
                    nodeWrap.css({
                        top: -yearTopNum * 55
                    });
                }   
            }else{
                return ;
            }
        }; //IE/Opera/Chrome            

    }
}
//下部日历操作对象
function ButtonNode() {
    var content = this;
    var callback = null;
    var node = this.node = $('<div class="btn_box"><button class="go_back_btn hide">' + "返回" + '</button><button class="make_sure_btn hide">' + "确定" + '</button><button class="ok_btn hide">' + "确定" + '</button><button class="cancel_btn">' + "取消" + '</button></div>');
    this.appendTo = function(_jq) {
        $(_jq).append(content.node.get(0));
    }
    this.setData = function() {
        node.find("button").css({
            color: config.headColor
        });
        content.appendTo(wrapNode);
    }
    this.hide = function() {
        content.node.hide();
    }
    this.show = function() {
            content.node.show();
        }
        //回调函数
    this.setCallback = function(_callback) {
        callback = _callback;
    };
    this.getCallback = function() {
        return callback;
    };

    //第一次点击确定
    this.node.find(".make_sure_btn").bind("click", function() {
            if(typeof(callback) === "function") {
                content.node.find(".go_back_btn").removeClass("hide");
                content.node.find(".make_sure_btn").addClass("hide");
                content.node.find(".ok_btn").removeClass("hide");
                calendarNode.hide();
                timeNode.show();
                $(config.inputId).val(wrapContent.formatDate());
            } else {
                return;
            }
        })
        //第二次点击确定
    this.node.find(".ok_btn").bind("click", function() {
        if(typeof(callback) === "function") {
            content.node.find(".ok_btn").addClass("hide");
            content.node.find(".make_sure_btn").removeClass("hide");
            wrapContent.hide();
            timeNode.getHourTxt();
            timeNode.getMinTxt();
            $(config.inputId).val(wrapContent.formatDate());
            if(typeof(config.callback) === "function") {
                config.callback(wrapContent.getNowTime());
            }
        } else {
            return;
        }
    })

    //点击取消
    this.node.find(".cancel_btn").bind("click", function() {
            wrapContent.hide();
        })
        //点击返回
    this.node.find(".go_back_btn").bind("click", function() {
        calendarNode.show();
        timeNode.hide();
        content.node.find(".make_sure_btn").removeClass("hide");
        content.node.find(".ok_btn").addClass("hide");
        content.node.find(".go_back_btn").addClass("hide");
    })
}
boxWrap.bind("click", function() {
    wrapContent.hide();
})
wrapNode.bind("click", function(event) {
    event.stopPropagation();
})

$(config.inputId).bind("click", function() {
    wrapContent.show();
    wrapContent.setInstall(formatMark);
})

}

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP