/* 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>

該控件庫是我在項目中設計的，可以單獨使用，不依賴其他庫

總結

以上是生活随笔為你收集整理的自制单选多选日历文本框文本域控件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。