自制单选多选日历文本框文本域控件

/*
ZZSWidget.js 版本号2021.06.29
目前共有单选、多选、日历、文本框、文本域、按钮 6个控件2021.06.29增加了单选、多选和日历控件的options的widgetParentNode属性，可以自由设置每一个的widgetParentNode了，这样就可在多个滚动条的地方不响应其他滚动条的事件2021.06.28 增加ZZSWidget.setWidgetParentNode()方法，现在可以设置非document.body作为单选多选日历控件的parentNode了，这样可以使一些跟随滚动条滚动的情况不会出现panel飞出特定的元素视窗，起到美观的作用
目前该方法可以传入id或直接传入dom对象。注意，该对象会被附上position:relative属性，如果有滚动条则会自动跟随滚动。请不要随意使用该方法。一般该方法用于绑定存在滚动条的那一个非body对象。
2021.06.28 解决单选多选不满最大高度时上置偏移的问题2021.06.27 增加按钮控件
2021.06.27 为小三角增加双事件，点击第二次会自动关闭，增加控件对滚动条（高度）的自动判断功能。如果滚动条有变化，会自动跟踪其变化重新适应
2021.06.25 将滚动事件绑定到外部的每一层符合要求的元素上，而不是只绑定一个，并且设置控件自动判断滚动条高度和自动控制出现位置
2021.06.25 增加自动判断控件绑定的外部元素高度的功能，如果为空，则赋予默认值
2021.06.25 增加ZZSWidget.getValue(id,value)方法2021.06.24 给所有控件统一增加onlytips和placeholder、offsetHeight属性
2021.06.24 增加Widget.getResult(id,t)方法2021.06.23 增加文本框、文本域控件
2021.06.23 给文本框控件添加正则校验功能2021.06.22 增加日历控件到达屏幕下方显示不全自动上置的功能2021.06.21 增加日历控件2021.06.19 增加多选控件2021.06.18 开始制作，初步完成单选控件增加各种控件随滚动条自由移动的功能Option（单选）控件：
ZZSOption(id,[1,2,3],offsetHeight:20,placeholder:"123",onlytips:true});
offsetHeight是高度向下偏移量
placeholder是默认值
onlytips表示placeholder的内容是否是可用的实际值，还是只是一个提示语，默认true，只是一个提示语，当为false时则是一个默认值，用Widget.getResult()的时候是会返回该值的MultipleOption（多选）控件：
ZZSMultipleOption(id,[1,2,3],{offsetHeight:20,placeholder:"123",onlytips:true});
offsetHeight是高度向下偏移量
placeholder是默认值
onlytips表示placeholder的内容是否是可用的实际值，还是只是一个提示语，默认true，只是一个提示语，当为false时则是一个默认值，用Widget.getResult()的时候是会返回该值的Calendar（日历）控件：
ZZSCalendar(id,{offsetHeight:20,placeholder:"__today__"});
第一个参数是目标id
第二个参数是一个对象，目前支持offsetHeight和placeholder两个属性
offsetHeight是偏移y绝对值
placeholder是默认显示的数值，以灰色字体显示，当为“__today__”时显示今天的时间INPUT（文本框）控件：
ZZSInput(id,{minusHeight:0,minusWidth:4,placeholder:"请输入数字",onlyinput:"number"})
minusHeight和minusWidth属性可以缩小input控件相对于外部标签的大小，如果外部标签高度为0，则自动变成高度20px。
placeholder属性不再赘述
onlytips如果为false则placeholder会变成默认文本值，默认为true
onlyinput属性表示设置只能输入某些值，当设为num或number时只能输入阿拉伯数字、加减号和小数点；
当设为chn或chinese时只能输入中文
当设为letter时只能输入英文TEXTAREA（文本域）控件：
与INPUT控件完全一致，只是将input变成textarea
如果外部标签没有高度则默认高度为40pxButton（按钮）控件：
ZZSButton(id,function(){alert(1)},{text:"按钮上面的字",width:100,height:100,borderRadius:10})
这里的function是点击事件
width height borderRadius属性为可选项，不需要带上"px"或"pt"等单位字眼Widget.getResult(id,t)方法:
该方法用于获取绑定控件的对象上面的值
如果placeholder设为onlytips则返回的值为空字符串
如果t为空则放回一个对象{value:"某个value",type:"某个type"}
如果t为value就直接返回value
如果t为type就直接返回type,type有五种，分别是Option MultipleOption Calendar Input Textarea Widget.setValue(id,v)方法：
该方法用于对已经绑定控件的目标元素设置一个值，目标对象是否设置onlytips为true没有影响*/
window.ZZSWidget = function(){}
ZZSWidget.widgetParentNode = document.body;
ZZSWidget.isDOM = (typeof HTMLElement === 'object') ? function(obj){return obj instanceof HTMLElement;} :function(obj){return obj && typeof obj === 'object' && (obj.nodeType === 1 || obj.nodeType === 9) && typeof obj.nodeName === 'string';}
ZZSWidget.Inside = function(a,b){ //a元素是否是b元素的子对象或孙，孙孙孙……对象while(a){a = a.parentNode;if(a == b) return true}return false
}
window.ZZSOption = function(targetid,data,options){options = (Object.prototype.toString.call(options)==='[object Object]')?options:{};var offsetHeight = 'offsetHeight' in options?options['offsetHeight']:0;var onlytips = ('onlytips' in options&&options['onlytips']==false)?false:true;var placeholder = 'placeholder' in options?options['placeholder']:'';if('widgetParentNode' in options){if(document.getElementById(options['widgetParentNode'])){window.ZZSOption.widgetParentNodes[targetid] = document.getElementById(options['widgetParentNode']);}else if(ZZSWidget.isDOM(options['widgetParentNode'])){window.ZZSOption.widgetParentNodes[targetid] = options['widgetParentNode'];}window.ZZSOption.widgetParentNodes[targetid].style.position = 'relative';}function decorate(arr){var str = "["for(var i=0;i<arr.length;i++){str += (Number.isFinite(arr[i])?arr[i]:"'"+arr[i]+"'") +","}return str.slice(0,-1)+"]";}var tar = document.getElementById(targetid);if(!tar){throw Error("ZZSOption控件无法绑定到id为【"+targetid+"】的元素上");}tar.innerHTML = '<div style="width:100%;height:100%;margin:0;padding:0;"><span class="ZZSWidgetOutput" ZZSWidgetType="Option" onlytips=\''+onlytips+'\' placeholder=\''+placeholder+'\' style="display:inline-block;height:100%;width:'+ (tar.clientWidth-18) +'px;">'+(placeholder?(onlytips?'<span style="color:gray;">'+placeholder+'</span>':placeholder):'')+'</span>\<span onmouseout="this.style.color=\'deepskyblue\'" onmouseover="this.style.color=\'dodgerblue\'" style="cursor:pointer;float:right;color:deepskyblue;font-family:微软雅黑;background-color:#f1f1f1;display:inline-block;" onclick="ZZSOption.panel(this.parentNode,'+decorate(data)+',\''+targetid+'\','+offsetHeight+')" class="ZZSWidgetUnit">▼</span></div>';
}
ZZSOption.widgetParentNodes = {};
ZZSOption.scroller = [];
ZZSOption.panel = function(node,options,targetid,offsetHeight){window.ZZSOption.currentTargetId = targetid;var myWidgetParentNode = (targetid in window.ZZSOption.widgetParentNodes)?window.ZZSOption.widgetParentNodes[targetid]:window.ZZSWidget.widgetParentNode;window.ZZSOption.myWidgetParentNode = myWidgetParentNode;if(!window.ZZSOption.lastnode){window.ZZSOption.lastnode = node;}if(window.ZZSOption.lastnode == node && document.getElementById("ZZSWidget") && document.getElementById("ZZSWidget").getAttribute("ZZSWidgetType")=="Option"){document.getElementById("ZZSWidget").remove();return}window.ZZSOption.lastnode = node;var targetHeight = node.parentNode.offsetHeight?node.parentNode.offsetHeight:20;function getAbsolutePosition(node) {var position = { left:0, top:0 };while(node){position.left += node.offsetLeft;position.top += node.offsetTop;node = node.offsetParent;}return position;}var position = getAbsolutePosition(node.parentNode);var x = position.left-1;var y = position.top + targetHeight;var w = node.offsetWidth+2;if(myWidgetParentNode!=document.body){y -= getAbsolutePosition(myWidgetParentNode).top;}y += offsetHeight;var megaHeight = window.innerHeight;window.ZZSOption.scroller = []; //2021.06.29升级，每次都把整个scroller重置，这样可以避免存在多个scroll域时只对一个域绑定scroll事件的情况while(node){node =node.parentNode;if(node && (node.scrollHeight>node.clientHeight || node.offsetHeight>node.clientHeight)){window.ZZSOption.scroller.push(node);}}for(var i=0;i<window.ZZSOption.scroller.length;i++){var sc = window.ZZSOption.scroller[i];if(!sc.ZZSOptionBinded){ //此处会做判断，如果已经绑了就不会绑第二次了sc.addEventListener("scroll",function(e){if(document.getElementById("ZZSWidget")&&document.getElementById("ZZSWidget").getAttribute("ZZSWidgetType")=="Option"){if(!ZZSWidget.Inside(document.getElementById(window.ZZSOption.currentTargetId),e.target)){ return }if(window.ZZSOption.myWidgetParentNode!=document.body && (window.ZZSOption.myWidgetParentNode.style.overflowY=="auto"||window.ZZSOption.myWidgetParentNode.style.overflowY=="scroll")){return}document.getElementById("ZZSWidget").style.top = (window.ZZSOption.y - (e.target.scrollTop - e.target.currentScrollTop)) + "px";}})sc.ZZSOptionBinded = true}y -= sc.scrollTop;if(sc.scrollHeight-sc.offsetHeight>0 && sc.scrollHeight!=0 && sc.offsetHeight!=0){var tmpHeight = sc.scrollHeight + getAbsolutePosition(sc).top;if(sc.style.overflowY && sc.style.overflowY=="hidden"){tmpHeight = 0;}//var tmpHeight = window.innerHeight+sc.scrollHeight-sc.offsetHeight;megaHeight = tmpHeight>megaHeight?tmpHeight:megaHeight;}}var again = falseif(position.top + targetHeight + 122 > megaHeight){again = truey -= (122+offsetHeight*2+targetHeight);}if(myWidgetParentNode!=document.body && (myWidgetParentNode.style.overflowY=="auto"||myWidgetParentNode.style.overflowY=="scroll")){y += myWidgetParentNode.scrollTop;}    window.ZZSOption.x = x;window.ZZSOption.y = y;for(var i=0;i<window.ZZSOption.scroller.length;i++){window.ZZSOption.scroller[i].currentScrollTop = window.ZZSOption.scroller[i].scrollTop;}if(document.getElementById("ZZSWidget")){document.getElementById("ZZSWidget").remove();}var ZZSOptionPanel = '<div id="ZZSWidget" ZZSWidgetType="Option" class="ZZSWidgetUnit" style="overflow-y:auto;border:1px solid #777;width:'+w+'px;max-height:120px;background-color:#eee;position:absolute;left:'+x+'px;top:'+y+'px;">';for(var i=0;i<options.length;i++){ZZSOptionPanel += '<div onclick="ZZSOption.choose(\''+targetid+'\',this)" class="ZZSWidgetUnit" onmouseout="this.style.backgroundColor=\'#eee\'" onmouseover="this.style.backgroundColor=\'dodgerblue\'" style="border:1px solid white;cursor:pointer;" >'+options[i]+'</div>';}ZZSOptionPanel += '<div onclick="ZZSOption.choose(\''+targetid+'\',this,1)" class="ZZSWidgetUnit" onmouseout="this.style.backgroundColor=\'#eee\'" onmouseover="this.style.backgroundColor=\'dodgerblue\'" style="border:1px solid white;cursor:pointer;color:gray;">不选</div>'ZZSOptionPanel += '</div>';myWidgetParentNode.insertAdjacentHTML("beforeend",ZZSOptionPanel);var rh = document.getElementById("ZZSWidget").offsetHeight;if(again && rh<122){y += 122 - rh;if(position.top + targetHeight + rh < megaHeight){y += rh + targetHeight;}window.ZZSOption.y = y;document.getElementById("ZZSWidget").style.top = y + "px";}
}
ZZSOption.choose = function(targetid,t,special){document.getElementById('ZZSWidget').remove();var o = document.getElementById(targetid).getElementsByClassName('ZZSWidgetOutput')[0];if(special){if(o.getAttribute('onlytips')=='true'){console.log(o.getAttribute('placeholder'));o.innerHTML = "<span style='color:gray;'>" + o.getAttribute('placeholder') + "</span>";}else{ o.innerHTML = "" } }else{o.innerHTML=t.innerHTML;}
}
window.ZZSMultipleOption = function(targetid,data,options){options = (Object.prototype.toString.call(options)==='[object Object]')?options:{};var offsetHeight = 'offsetHeight' in options?options['offsetHeight']:0;var onlytips = ('onlytips' in options&&options['onlytips']==false)?false:true;var placeholder = 'placeholder' in options?options['placeholder']:'';if('widgetParentNode' in options){if(document.getElementById(options['widgetParentNode'])){window.ZZSMultipleOption.widgetParentNodes[targetid] = document.getElementById(options['widgetParentNode']);}else if(ZZSWidget.isDOM(options['widgetParentNode'])){window.ZZSMultipleOption.widgetParentNodes[targetid] = options['widgetParentNode'];}window.ZZSMultipleOption.widgetParentNodes[targetid].style.position = 'relative';}function decorate(arr){var str = "["for(var i=0;i<arr.length;i++){str += (Number.isFinite(arr[i])?arr[i]:"'"+arr[i]+"'") +","}return str.slice(0,-1)+"]";}var tar = document.getElementById(targetid);if(!tar){throw Error("ZZSMultipleOption控件无法绑定到id为【"+targetid+"】的元素上");}tar.innerHTML = '<div style="width:100%;height:100%;margin:0;padding:0;"><span class="ZZSWidgetOutput" ZZSWidgetType="MultipleOption" onlytips=\'' + onlytips + '\' placeholder=\'' + placeholder + '\' style="display:inline-block;height:100%;width:'+ (tar.clientWidth-18) +'px;">'+(placeholder?(onlytips?'<span style="color:gray;">'+placeholder+'</span>':placeholder):'')+'</span>\<span onmouseout="this.style.color=\'deepskyblue\'" onmouseover="this.style.color=\'dodgerblue\'" style="cursor:pointer;float:right;color:deepskyblue;font-family:微软雅黑;background-color:#f1f1f1;display:inline-block;" onclick="ZZSMultipleOption.panel(this.parentNode,'+decorate(data)+',\''+targetid+'\','+offsetHeight+');" class="ZZSWidgetUnit">▼</span></div>';
}
ZZSMultipleOption.widgetParentNodes = {};
ZZSMultipleOption.scroller = [];
ZZSMultipleOption.panel = function(node,options,targetid,offsetHeight){window.ZZSMultipleOption.currentTargetId = targetid;var myWidgetParentNode = (targetid in window.ZZSMultipleOption.widgetParentNodes)?window.ZZSMultipleOption.widgetParentNodes[targetid]:window.ZZSWidget.widgetParentNode;window.ZZSMultipleOption.myWidgetParentNode = myWidgetParentNode;if(!window.ZZSMultipleOption.lastnode){window.ZZSMultipleOption.lastnode = node;}if(window.ZZSMultipleOption.lastnode == node && document.getElementById("ZZSWidget") && document.getElementById("ZZSWidget").getAttribute("ZZSWidgetType")=="MultipleOption"){document.getElementById("ZZSWidget").remove();return}window.ZZSMultipleOption.lastnode = node;var targetHeight = node.parentNode.offsetHeight?node.parentNode.offsetHeight:20;function getAbsolutePosition(node) {var position = { left:0, top:0 };while(node){position.left += node.offsetLeft;position.top += node.offsetTop;node = node.offsetParent;}return position;}var position = getAbsolutePosition(node.parentNode);var x = position.left-1;var y = position.top + targetHeight;var w = node.offsetWidth+2;if(myWidgetParentNode!=document.body){y -= getAbsolutePosition(myWidgetParentNode).top;}y += offsetHeight;var megaHeight = window.innerHeight;window.ZZSMultipleOption.scroller = [];while(node){node =node.parentNode;if(node && (node.scrollHeight>node.clientHeight || node.offsetHeight>node.clientHeight)){window.ZZSMultipleOption.scroller.push(node);}}for(var i=0;i<window.ZZSMultipleOption.scroller.length;i++){var sc = window.ZZSMultipleOption.scroller[i];if(!sc.ZZSMultipleOptionBinded){sc.addEventListener("scroll",function(e){if(document.getElementById("ZZSWidget")&&document.getElementById("ZZSWidget").getAttribute("ZZSWidgetType")=="MultipleOption"){if(!ZZSWidget.Inside(document.getElementById(window.ZZSMultipleOption.currentTargetId),e.target)){ return }if(window.ZZSMultipleOption.myWidgetParentNode!=document.body && (window.ZZSMultipleOption.myWidgetParentNode.style.overflowY=="auto"||window.ZZSMultipleOption.myWidgetParentNode.style.overflowY=="scroll")){return}document.getElementById("ZZSWidget").style.top = (window.ZZSMultipleOption.y - (e.target.scrollTop - e.target.currentScrollTop)) + "px";}})sc.ZZSMultipleOptionBinded = true}y -= sc.scrollTop;if(sc.scrollHeight-sc.offsetHeight>0 && sc.scrollHeight!=0 && sc.offsetHeight!=0){var tmpHeight = sc.scrollHeight + getAbsolutePosition(sc).top;if(sc.style.overflowY && sc.style.overflowY=="hidden"){tmpHeight = 0;}//var tmpHeight = window.innerHeight+sc.scrollHeight-sc.offsetHeight;megaHeight = tmpHeight>megaHeight?tmpHeight:megaHeight;}}var again = falseif(position.top + targetHeight + 150 > megaHeight){again = truey -= (150+offsetHeight*2+targetHeight);}if(myWidgetParentNode!=document.body && (myWidgetParentNode.style.overflowY=="auto"||myWidgetParentNode.style.overflowY=="scroll")){y += myWidgetParentNode.scrollTop;}window.ZZSMultipleOption.x = x;window.ZZSMultipleOption.y = y;for(var i=0;i<window.ZZSMultipleOption.scroller.length;i++){window.ZZSMultipleOption.scroller[i].currentScrollTop = window.ZZSMultipleOption.scroller[i].scrollTop;}if(document.getElementById("ZZSWidget")){document.getElementById("ZZSWidget").remove();}var ZZSMultipleOptionPanel = '<div id="ZZSWidget" ZZSWidgetType="MultipleOption" class="ZZSWidgetUnit" style="width:'+w+'px;position:absolute;left:'+x+'px;top:'+y+'px;"><div style="border:1px solid #777;max-height:120px;overflow-y:auto;background-color:#eee;">';for(var i=0;i<options.length;i++){ZZSMultipleOptionPanel += '<div onclick="this.childNodes[0].checked = true;" class="ZZSWidgetUnit" onmouseout="this.style.backgroundColor=\'#eee\'" onmouseover="this.style.backgroundColor=\'dodgerblue\'" style="border:1px solid white;cursor:pointer;" ><input type="checkbox" class="ZZSWidgetUnit"/><span class="ZZSWidgetUnit">'+options[i]+'</span></div>';}ZZSMultipleOptionPanel += '</div><div style="cursor:pointer;background-color:dodgerblue;color:white;font-weight:bold;font-size:15px;line-height:26px;text-align:center;height:26px;border:1px solid #777;" onclick="ZZSMultipleOption.choose(\''+targetid+'\',this)">确定</div></div>';myWidgetParentNode.insertAdjacentHTML("beforeend",ZZSMultipleOptionPanel);var rh = document.getElementById("ZZSWidget").offsetHeight;if(again && rh<150){y += 150 - rh;if(position.top + targetHeight + rh < megaHeight){y += rh + targetHeight;}window.ZZSMultipleOption.y = y;document.getElementById("ZZSWidget").style.top = y + "px";}
}
ZZSMultipleOption.choose = function(targetid,t){var tars = t.parentNode.getElementsByTagName('input');var str = '';for(var i=0;i<tars.length;i++){if(tars[i].checked){str += tars[i].nextSibling.innerHTML + ','}; } str=str.slice(0,-1);var o = document.getElementById(targetid).getElementsByClassName('ZZSWidgetOutput')[0]if(o.getAttribute('onlytips')=='true' && str== ''){ o.innerHTML = '<span style="color:gray;">'+ o.getAttribute('placeholder') + '</span>';}else if(o.getAttribute('onlytips')!='true' && str==''){o.innerHTML = '';}else{ o.innerHTML = str; }document.getElementById('ZZSWidget').remove();
}
window.ZZSCalendar = function(targetid,options){options = (Object.prototype.toString.call(options)==='[object Object]')?options:{};var offsetHeight = 'offsetHeight' in options?options['offsetHeight']:0;var onlytips = ('onlytips' in options&&options['onlytips']==false)?false:true;var placeholder = 'placeholder' in options?options['placeholder']:null;if('widgetParentNode' in options){if(document.getElementById(options['widgetParentNode'])){window.ZZSCalendar.widgetParentNodes[targetid] = document.getElementById(options['widgetParentNode']);}else if(ZZSWidget.isDOM(options['widgetParentNode'])){window.ZZSCalendar.widgetParentNodes[targetid] = options['widgetParentNode'];}window.ZZSCalendar.widgetParentNodes[targetid].style.position = 'relative';}if(placeholder=="__today__"){var D = new Date();var y = D.getFullYear();var m = D.getMonth()+1;m = m<10?"0"+m:m;var d = D.getDate();d = d<10?"0"+d:d;placeholder = y + "-" + m + "-" + d;}function decorate(arr){var str = "["for(var i=0;i<arr.length;i++){str += (Number.isFinite(arr[i])?arr[i]:"'"+arr[i]+"'") +","}return str.slice(0,-1)+"]";}var tar = document.getElementById(targetid);if(!tar){throw Error("ZZSCalendar控件无法绑定到id为【"+targetid+"】的元素上");}tar.innerHTML = '<div style="width:100%;height:100%;margin:0;padding:0;"><span class="ZZSWidgetOutput" ZZSWidgetType="Calendar" onlytips='+onlytips+' placeholder='+placeholder+' style="display:inline-block;height:100%;width:'+ (tar.clientWidth-18) +'px;">'+(placeholder?(onlytips?'<span style="color:gray;">'+placeholder+'</span>':placeholder):'')+'</span>\<span onmouseout="this.style.color=\'deepskyblue\'" onmouseover="this.style.color=\'dodgerblue\'" style="cursor:pointer;float:right;color:deepskyblue;font-family:微软雅黑;background-color:#f1f1f1;display:inline-block;" onclick="ZZSCalendar.panel(this.parentNode,\''+targetid+'\','+offsetHeight+')" class="ZZSWidgetUnit">▼</span></div>';
}
ZZSCalendar.setYear = function(plus){if(document.getElementById("ZZSCalendar_year")){var year = parseInt(document.getElementById("ZZSCalendar_year").innerHTML);year += plus;document.getElementById("ZZSCalendar_year").innerHTML = year;ZZSCalendar.setDay();}
}
ZZSCalendar.setMonth = function(plus){if(document.getElementById("ZZSCalendar_month")){var month = parseInt(document.getElementById("ZZSCalendar_month").innerHTML);month += plus;if(month>12){month = 1;      ZZSCalendar.setYear(1);}else if(month<1){month = 12;ZZSCalendar.setYear(-1);}document.getElementById("ZZSCalendar_month").innerHTML = month;ZZSCalendar.setDay();}
}
ZZSCalendar.setDay = function(){var y = parseInt(document.getElementById("ZZSCalendar_year").innerHTML);var m = parseInt(document.getElementById("ZZSCalendar_month").innerHTML);ZZSCalendar_days = document.getElementsByClassName("ZZSCalendar_day");for(var i=0;i<ZZSCalendar_days.length;i++){ZZSCalendar_days[i].innerHTML = '';ZZSCalendar_days[i].style.backgroundColor = '';}var D = new Date();D.setFullYear(y,m-1,1);var row = D.getDay();//从星期几开始，0是日，1是一，以此类推6是六var column = 0;var dates = 30; //天数if(m==1 || m==3 || m==5 || m==7 || m==8 || m==10 || m==12){dates = 31;}else if(m==4 || m==6 || m==9 || m==11){dates = 30;}else if(m==2){if((y%100!=0&&y%4==0)||y%400==0){ //闰年dates = 29;}else{dates = 28;}}for(var i=1;i<dates+1;i++){document.getElementById("ZZSCalendar_day_x"+row+"_y"+column).innerHTML = i;if(y == new Date().getFullYear() && m == new Date().getMonth()+1 && i == new Date().getDate()){document.getElementById("ZZSCalendar_day_x"+row+"_y"+column).style.backgroundColor = "gold";}row += 1;if(row>6){row = 0;column += 1;}}
}
ZZSCalendar.widgetParentNodes = {};
ZZSCalendar.scroller = [];
ZZSCalendar.panel = function(node,targetid,offsetHeight){window.ZZSCalendar.currentTargetId = targetid;var myWidgetParentNode = (targetid in window.ZZSCalendar.widgetParentNodes)?window.ZZSCalendar.widgetParentNodes[targetid]:window.ZZSWidget.widgetParentNode;window.ZZSCalendar.myWidgetParentNode = myWidgetParentNode;if(!window.ZZSCalendar.lastnode){window.ZZSCalendar.lastnode = node;}if(window.ZZSCalendar.lastnode == node && document.getElementById("ZZSWidget") && document.getElementById("ZZSWidget").getAttribute("ZZSWidgetType")=="Calendar"){document.getElementById("ZZSWidget").remove();return}window.ZZSCalendar.lastnode = node;var targetHeight = node.parentNode.offsetHeight?node.parentNode.offsetHeight:20;function getAbsolutePosition(node) {var position = { left:0, top:0 };while(node){position.left += node.offsetLeft;position.top += node.offsetTop;node = node.offsetParent;}return position;}var position = getAbsolutePosition(node.parentNode);var x = position.left-1;var y = position.top + targetHeight;var w = node.offsetWidth+2;if(myWidgetParentNode!=document.body){y -= getAbsolutePosition(myWidgetParentNode).top;}y += offsetHeight;var megaHeight = window.innerHeight;window.ZZSCalendar.scroller = [];while(node){node =node.parentNode;if(node && (node.scrollHeight>node.clientHeight || node.offsetHeight>node.clientHeight)){window.ZZSCalendar.scroller.push(node);}}if(window.ZZSCalendar.scroller.length){for(var i=0;i<window.ZZSCalendar.scroller.length;i++){var sc = window.ZZSCalendar.scroller[i];if(!sc.ZZSCalendarBinded){sc.addEventListener("scroll",function(e){if(document.getElementById("ZZSWidget")&&document.getElementById("ZZSWidget").getAttribute("ZZSWidgetType")=="Calendar"){if(!ZZSWidget.Inside(document.getElementById(window.ZZSCalendar.currentTargetId),e.target)){ return }if(window.ZZSCalendar.myWidgetParentNode!=document.body && (window.ZZSCalendar.myWidgetParentNode.style.overflowY=="auto"||window.ZZSCalendar.myWidgetParentNode.style.overflowY=="scroll")){return}document.getElementById("ZZSWidget").style.top = (window.ZZSCalendar.y - (e.target.scrollTop - e.target.currentScrollTop)) + "px";}})sc.ZZSCalendarBinded = true}y -= sc.scrollTop;if(sc.scrollHeight-sc.offsetHeight>0 && sc.scrollHeight!=0 && sc.offsetHeight!=0){var tmpHeight = sc.scrollHeight + getAbsolutePosition(sc).top;if(sc.style.overflowY && sc.style.overflowY=="hidden"){tmpHeight = 0;}//var tmpHeight = window.innerHeight+sc.scrollHeight-sc.offsetHeight;megaHeight = tmpHeight>megaHeight?tmpHeight:megaHeight;}}}if(position.top + targetHeight + 201 > megaHeight){y -= (201+offsetHeight*2+targetHeight);}if(myWidgetParentNode!=document.body && (myWidgetParentNode.style.overflowY=="auto"||myWidgetParentNode.style.overflowY=="scroll")){y += myWidgetParentNode.scrollTop;}window.ZZSCalendar.x = x;window.ZZSCalendar.y = y;  for(var i=0;i<window.ZZSCalendar.scroller.length;i++){window.ZZSCalendar.scroller[i].currentScrollTop = window.ZZSCalendar.scroller[i].scrollTop;}if(document.getElementById("ZZSWidget")){document.getElementById("ZZSWidget").remove();}var ZZSCalendarPanel = '<div id="ZZSWidget" class="ZZSWidgetUnit" style="overflow-y:auto;border:1px solid #777;background-color:#eee;position:absolute;left:'+x+'px;top:'+y+'px;">\<table style="table-collapse:collapse;width:100%;text-align:center;" class="ZZSWidgetUnit">\<tr class="ZZSWidgetUnit">\<td onclick="ZZSCalendar.setYear(-1)" style="cursor:pointer;width:28px;" class="ZZSWidgetUnit">←</td>\<td onclick="ZZSCalendar.setMonth(-1)" style="cursor:pointer;width:28px;" class="ZZSWidgetUnit"><</td>\<td colspan="3" style="width:84px;" class="ZZSWidgetUnit"><span class="ZZSWidgetUnit" id="ZZSCalendar_year" style="color:dodgerblue;"></span>年<span id="ZZSCalendar_month" style="color:dodgerblue;" class="ZZSWidgetUnit"></span>月</td>\<td onclick="ZZSCalendar.setMonth(1)" style="cursor:pointer;width:28px;" class="ZZSWidgetUnit">></td>\<td onclick="ZZSCalendar.setYear(1)" style="cursor:pointer;width:28px;" class="ZZSWidgetUnit">→</td>\</tr>\<tr class="ZZSWidgetUnit">\<td style="width:28px;" class="ZZSWidgetUnit">日</td>\<td style="width:28px;" class="ZZSWidgetUnit">一</td>\<td style="width:28px;" class="ZZSWidgetUnit">二</td>\<td style="width:28px;" class="ZZSWidgetUnit">三</td>\<td style="width:28px;" class="ZZSWidgetUnit">四</td>\<td style="width:28px;" class="ZZSWidgetUnit">五</td>\<td style="width:28px;" class="ZZSWidgetUnit">六</td>\</tr>';for(var i=0;i<6;i++){ZZSCalendarPanel += '<tr>';for(var j=0;j<7;j++){ZZSCalendarPanel += '<td class="ZZSCalendar_day ZZSWidgetUnit" style="cursor:pointer;width:28px;height:20px;" onmouseout="this.style.backgroundColor=\'\';var d = new Date();if(this.innerHTML == d.getDate() && document.getElementById(\'ZZSCalendar_year\').innerHTML==d.getFullYear() && document.getElementById(\'ZZSCalendar_month\').innerHTML == d.getMonth()+1){this.style.backgroundColor=\'gold\'}" onmouseover="this.style.backgroundColor=\'dodgerblue\';" id="ZZSCalendar_day_x'+(j)+'_y'+(i)+'" onclick="ZZSCalendar.choose(this,\''+targetid+'\');"></td>';}ZZSCalendarPanel += '</tr>';}ZZSCalendarPanel += '</table></div>';myWidgetParentNode.insertAdjacentHTML("beforeend",ZZSCalendarPanel);document.getElementById("ZZSWidget").setAttribute("ZZSWidgetType","Calendar");var d = new Date();document.getElementById("ZZSCalendar_year").innerHTML = d.getFullYear();document.getElementById("ZZSCalendar_month").innerHTML = d.getMonth()+1;ZZSCalendar.setDay();
}
ZZSCalendar.choose = function(target,targetid){var day = target.innerHTML;var final = "";if(day!=""){day = parseInt(day)<10?("0"+day):day;var month = document.getElementById("ZZSCalendar_month").innerHTML;month = parseInt(month)<10?("0"+month):month;var year = document.getElementById("ZZSCalendar_year").innerHTML;final = year + "-" + month + "-" + day;} document.getElementById(targetid).getElementsByClassName("ZZSWidgetOutput")[0].innerHTML = final;document.getElementById("ZZSWidget").remove();
}
window.ZZSInput = function(targetid,options){options = (Object.prototype.toString.call(options)==='[object Object]')?options:{};var tar = document.getElementById(targetid);var placeholder = 'placeholder' in options?options['placeholder']:"";var minusWidth = 'minusWidth' in options?options['minusWidth']:0;var minusHeight = 'minusHeight' in options?options['minusHeight']:0;var onlyinput = 'onlyinput' in options?options['onlyinput']:"";var onlytips = ('onlytips' in options&&options['onlytips']==false)?false:true;var type = ('type' in options && options['type']=="textarea")?options['type']:"input";if(!tar){throw Error((type=="input"?"ZZSInput":"ZZSTextarea")+"控件无法绑定到id为【"+targetid+"】的元素上");}var w = tar.clientWidth - minusWidth;var h = (tar.clientHeight?tar.clientHeight:(type=="input"?20:40)) - minusHeight;tar.innerHTML = '<'+type+' ZZSWidgetType="'+(type=="input"?"Input":"Textarea")+'" class="ZZSWidgetOutput" '+(onlytips?'placeholder':'value')+'="'+placeholder+'" type="text" style="width:'+ (w) + 'px;height:'+ (h) + 'px;border:1px solid dodgerblue;margin:auto;padding:0;display:block;"' + (type=="input"?'/>':'>'+(onlytips==false&&type=="textarea"?placeholder:'')+'</textarea>');var op = tar.getElementsByClassName('ZZSWidgetOutput')[0];var handle = function(e){}switch(onlyinput){case "number":case "num":case "数字":handle = function(e){e.target.value = e.target.value.replace(/[^\n0-9\.\+\-]*/g,'');}breakcase "letter":case "字母":handle = function(e){e.target.value = e.target.value.replace(/[^\\\|\……\——\.\,\。\，\、\《\》\<\>\？\/\?\、\;\；\:\：\"\'\“\”\‘\’\[\]\{\}\【\】\-\+\_\=\*\/\(\)\（\）\!\！\~\·\@\#\$\%\^\&\n\sa-zA-Z]*/g,'');}breakcase "chinese": case "中文": case "Chinese": case "CHINESE": case "chn": case "Chn": case "CHN":handle = function(e){if(!ZZSInput.inputtingChinese){e.target.value = e.target.value.replace(/[^\\\|\……\——\.\,\。\，\、\《\》\<\>\？\/\?\、\;\；\:\：\"\'\“\”\‘\’\[\]\{\}\【\】\-\+\_\=\*\/\(\)\（\）\!\！\~\·\@\#\$\%\^\&\n\s\u4e00-\u9fa5]*/g,'');}}op.addEventListener("compositionstart",function(e){ZZSInput.inputtingChinese = true},false)op.addEventListener("compositionend",function(e){ZZSInput.inputtingChinese = falsee.target.value = e.target.value.replace(/[^\\\|\……\——\.\,\。\，\、\《\》\<\>\？\/\?\、\;\；\:\：\"\'\“\”\‘\’\[\]\{\}\【\】\-\+\_\=\*\/\(\)\（\）\!\！\~\·\@\#\$\%\^\&\n\s\u4e00-\u9fa5]*/g,'');},false)breakdefault:break}op.addEventListener("change",function(e){handle(e)},false)op.addEventListener("input",function(e){handle(e)},false)
}
ZZSInput.inputtingChinese = false;
window.ZZSTextarea = function(targetid,options){options = (Object.prototype.toString.call(options)==='[object Object]')?options:{};options["type"] = "textarea";window.ZZSInput(targetid,options);
}
window.ZZSButton = function(targetid,func,options){options = (Object.prototype.toString.call(options)==='[object Object]')?options:{};var tar = document.getElementById(targetid);if(!tar){throw Error("ZZSButton控件无法绑定到id为【"+targetid+"】的元素上");}var width = 'width' in options?options['width']:0;var height = 'height' in options?options['height']:0;var borderRadius = 'borderRadius' in options?options['borderRadius']:0;var text = 'text' in options?options['text']:'按钮';if(!window.ZZSButton.funcs){window.ZZSButton.funcs = {}}window.ZZSButton.funcs[targetid] = functar.innerHTML = '<div style="'+(borderRadius?"border-radius:"+borderRadius+"px;":"")+(width?"width:"+width+"px;":"")+(height?"height:"+height+"px;line-height:"+height+"px;":"")+'text-align:center;cursor:pointer;background-color:deepskyblue;margin:auto;" class="ZZSWidgetOutput" ZZSWidgetType="Button" onmouseout="this.style.backgroundColor=\'deepskyblue\'" onmouseover="this.style.backgroundColor=\'dodgerblue\';" onclick="window.ZZSButton.funcs[\''+targetid+'\']()">'+text+'</div>'
}
ZZSWidget.getResult = function(id,t){var result = {"value":"","type":""}var tar = document.getElementById(id);if(!tar) return result;if(tar.getElementsByClassName("ZZSWidgetOutput")){tar = tar.getElementsByClassName("ZZSWidgetOutput")[0];result["type"] = tar.getAttribute("ZZSWidgetType");if(tar.getAttribute("ZZSWidgetType")=="Button"){return null}if(tar.tagName=="INPUT" || tar.tagName == "TEXTAREA"){result["value"] = tar.value;}else{result["value"] = tar.innerText;}var onlytips = tar.getAttribute("onlytips")if((onlytips==="true"||onlytips===true) && tar.getAttribute("placeholder")==tar.innerText){result["value"] = "";}}if(t=="value"||t=="val") return result["value"];if(t=="type") return result["type"];return result;
}
ZZSWidget.setValue = function(id,v){var tar = document.getElementById(id);if(!tar) return;if(tar.getElementsByClassName("ZZSWidgetOutput")){tar = tar.getElementsByClassName("ZZSWidgetOutput")[0];switch(tar.getAttribute("ZZSWidgetType")){case "Input":case "Textarea":tar.value = v;breakcase "Option":case "MultipleOption":case "Calendar":tar.innerHTML = v;breakcase "Button":default:break}}
}
ZZSWidget.setWidgetParentNode = function(id){if(ZZSWidget.isDOM(id)){ZZSWidget.widgetParentNode = id;}else if(document.getElementById(id)){ZZSWidget.widgetParentNode = document.getElementById(id);}else{return;}ZZSWidget.widgetParentNode.style.position = "relative";
}
document.addEventListener("click",function(e){if(document.getElementById("ZZSWidget") && e.target.className.indexOf("ZZSWidgetUnit")<0){document.getElementById("ZZSWidget").remove();}
})

上面是我写的ZZSWidget.js的代码，下面是用法demo

<!DOCTYPE html>
<html>
<head><title></title>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow:hidden;">
<div style="font-weight:bold;width:100%;height:50px;background-color:dodgerblue;text-align:center;line-height:50px;color:white;">ZZSWidget控件demo</div>
<div style="overflow-y:scroll;color:black;" id="demo"><div id="s" style="background-color:#eee;height:300px;">这个将绑定按钮</div><button onclick='ZZSButton("s",function(){alert(1)},{text:"按钮",width:40,height:40,borderRadius:6})'>点击绑定按钮控件到上方</button><button onclick='alert(ZZSWidget.getResult("f","value"))'>点击获取输入框控件的值</button><br/><br/><br/><br/><br/><br/><div id="a" style="background-color:#eee;">这个将绑定单选</div><button onclick='ZZSOption("a",[1,2,3,4,5],{offsetHeight:20,placeholder:"这是提示，请选择单选值",onlytips:true})'>点击绑定单选控件到上方</button><button onclick='alert(ZZSWidget.getResult("a","value"))'>点击获取单选控件的值</button><br/><br/><br/><br/><br/><br/><div id="b" style="background-color:#eee;">这个将绑定多选</div><button onclick='ZZSMultipleOption("b",[1,2,3,4,5],{offsetHeight:20,placeholder:"这是提示，请选择多选值",onlytips:true})'>点击绑定多选控件到上方</button><div id="c" style="background-color:#eee;">这个将绑定日历</div><button onclick='alert(ZZSWidget.getResult("b","value"))'>点击获取多选控件的值</button><br/><br/><br/><br/><br/><br/><button onclick='ZZSCalendar("c",{offsetHeight:20,placeholder:"__today__",onlytips:false})'>点击绑定日历控件到上方</button><button onclick='alert(ZZSWidget.getResult("c","value"))'>点击获取日历控件的值</button><br/><br/><br/><br/><br/><br/><div id="d" style="background-color:#eee;">这个将绑定日历</div><button onclick='ZZSCalendar("d",{offsetHeight:20,placeholder:"请选择日期",onlytips:true})'>点击绑定日历控件到上方</button><button onclick='alert(ZZSWidget.getResult("d","value"))'>点击获取日历控件的值</button><br/><br/><br/><br/><br/><br/><div id="e" style="background-color:#eee;">这个将绑定中文文本框</div><button onclick='ZZSTextarea("e",{placeholder:"请输入中文",minusWidth:4,minusHeight:-20,onlyinput:"Chinese"})'>点击绑定文本域控件到上方</button><button onclick='alert(ZZSWidget.getResult("e","value"))'>点击获取文本域控件的值</button><br/><br/><br/><br/><br/><br/><div id="f" style="background-color:#eee;">这个将绑定英文输入框</div><button onclick='ZZSInput("f",{placeholder:"请输入英文",minusWidth:4,minusHeight:2,onlyinput:"letter"})'>点击绑定输入框控件到上方</button><button onclick='alert(ZZSWidget.getResult("f","value"))'>点击获取输入框控件的值</button><br/><br/><br/><br/><br/><br/>
</div>
</body>
<script type="text/javascript" src="ZZSWidget.js"></script>
<script type="text/javascript">
document.getElementById("demo").style.height = (window.innerHeight - 50) + "px"
window.addEventListener("resize",function(){
document.getElementById("demo").style.height = (window.innerHeight - 50) + "px"
})</script>
</html>

该控件库是我在项目中设计的，可以单独使用，不依赖其他库

自制单选多选日历文本框文本域控件相关推荐

html表单控件富文本框,表单控件之富文本框实践
多行文本输入框(不是富文本框)的html代码如下: 学历及经历: ${emp.details} 富文本的js代码如下: // create Editor from textarea HTML elem ...
html文本框控件,HTML5的文本框表单控件
E-mail表单控件 E-mail表单控件与文本框相似,作用是链接电邮地址,为元素设置type="email":即可配置一个E-mail地址表单控件.只有支持HTML5email属 ...
html5 数值文本框,HTML5新控件 - 数值输入框
图像按钮当type="p_w_picpath"时,浏览器会在相应位置产生一个图像按钮. 基本语法: DOCTYPE html> 笔者,不玩网游还差4天就两个月了.我常常觉得 ...
android 代码控件框高,Android控件_TextView(显示文本框控件)
一.TextView控件的常用属性 1.android:id--控件的id 2.android:layout_width--设置控件的宽度 wrap_content(包裹实际文本内容) fill_pa ...
jQuery - 通过文本描述设置选择控件的选定值
本文翻译自:jQuery - setting the selected value of a select control via its text description I have a sele ...
【Android从零单排系列十一】《Android视图控件——日历、日期、时间选择控件》
目录一.日历.日期.时间组件基本介绍二.几种常见的控件类型 1.CalendarView –日历控件 2. DatePicker –日期选择控件 3.TimePicker –时间选择控件 4.Ch ...
《Cocos Creator游戏实战》实现下拉框按钮ComboBox控件
实现下拉框按钮ComboBox控件创建节点编写脚本该功能已收录在Many Widgets插件中,使用Cocos Creator 3.x版本的小伙伴可以用该插件快速生成下拉框ComboBox控件. ...
解决Vue用v-html、v-text渲染后台富文本框文本内容样式修改问题，用自定义css样式无法渲染出对应效果的问题
举例: 如果您要加载富文本框内容的DOM id是detail 那么就这么写scss样式 #detail {font-size: 14px;text-align: center;&>> ...
Java窗口（JFrame）从零开始（8）——文本框+文本域+密码框
应该最后一章了,前面有大神提到很少有人用Java做UI,这里就算是给像我这样的初学者去了解窗体是怎么一回事的文章吧文本框(JTextField) 构造方法摘要 JTextField() 构造一个新的 ...

自制单选多选日历文本框文本域控件

自制单选多选日历文本框文本域控件相关推荐

最新文章

热门文章