js+jquery原创日历插件——含js源文件下半部分（三）
需与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);
})}
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦