自制单选多选日历文本框文本域控件
生活随笔
收集整理的這篇文章主要介紹了
自制单选多选日历文本框文本域控件
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
/*
ZZSWidget.js 版本號(hào)2021.06.29
目前共有單選、多選、日歷、文本框、文本域、按鈕 6個(gè)控件2021.06.29增加了單選、多選和日歷控件的options的widgetParentNode屬性，可以自由設(shè)置每一個(gè)的widgetParentNode了，這樣就可在多個(gè)滾動(dòng)條的地方不響應(yīng)其他滾動(dòng)條的事件2021.06.28 增加ZZSWidget.setWidgetParentNode()方法，現(xiàn)在可以設(shè)置非document.body作為單選多選日歷控件的parentNode了，這樣可以使一些跟隨滾動(dòng)條滾動(dòng)的情況不會(huì)出現(xiàn)panel飛出特定的元素視窗，起到美觀的作用
目前該方法可以傳入id或直接傳入dom對(duì)象。注意，該對(duì)象會(huì)被附上position:relative屬性，如果有滾動(dòng)條則會(huì)自動(dòng)跟隨滾動(dòng)。請(qǐng)不要隨意使用該方法。一般該方法用于綁定存在滾動(dòng)條的那一個(gè)非body對(duì)象。
2021.06.28 解決單選多選不滿最大高度時(shí)上置偏移的問(wèn)題2021.06.27 增加按鈕控件
2021.06.27 為小三角增加雙事件，點(diǎn)擊第二次會(huì)自動(dòng)關(guān)閉，增加控件對(duì)滾動(dòng)條（高度）的自動(dòng)判斷功能。如果滾動(dòng)條有變化，會(huì)自動(dòng)跟蹤其變化重新適應(yīng)
2021.06.25 將滾動(dòng)事件綁定到外部的每一層符合要求的元素上，而不是只綁定一個(gè)，并且設(shè)置控件自動(dòng)判斷滾動(dòng)條高度和自動(dòng)控制出現(xiàn)位置
2021.06.25 增加自動(dòng)判斷控件綁定的外部元素高度的功能，如果為空，則賦予默認(rèn)值
2021.06.25 增加ZZSWidget.getValue(id,value)方法2021.06.24 給所有控件統(tǒng)一增加onlytips和placeholder、offsetHeight屬性
2021.06.24 增加Widget.getResult(id,t)方法2021.06.23 增加文本框、文本域控件
2021.06.23 給文本框控件添加正則校驗(yàn)功能2021.06.22 增加日歷控件到達(dá)屏幕下方顯示不全自動(dòng)上置的功能2021.06.21 增加日歷控件2021.06.19 增加多選控件2021.06.18 開始制作，初步完成單選控件增加各種控件隨滾動(dòng)條自由移動(dòng)的功能Option（單選）控件：
ZZSOption(id,[1,2,3],offsetHeight:20,placeholder:"123",onlytips:true});
offsetHeight是高度向下偏移量
placeholder是默認(rèn)值
onlytips表示placeholder的內(nèi)容是否是可用的實(shí)際值，還是只是一個(gè)提示語(yǔ)，默認(rèn)true，只是一個(gè)提示語(yǔ)，當(dāng)為false時(shí)則是一個(gè)默認(rèn)值，用Widget.getResult()的時(shí)候是會(huì)返回該值的MultipleOption（多選）控件：
ZZSMultipleOption(id,[1,2,3],{offsetHeight:20,placeholder:"123",onlytips:true});
offsetHeight是高度向下偏移量
placeholder是默認(rèn)值
onlytips表示placeholder的內(nèi)容是否是可用的實(shí)際值，還是只是一個(gè)提示語(yǔ)，默認(rèn)true，只是一個(gè)提示語(yǔ)，當(dāng)為false時(shí)則是一個(gè)默認(rèn)值，用Widget.getResult()的時(shí)候是會(huì)返回該值的Calendar（日歷）控件：
ZZSCalendar(id,{offsetHeight:20,placeholder:"__today__"});
第一個(gè)參數(shù)是目標(biāo)id
第二個(gè)參數(shù)是一個(gè)對(duì)象，目前支持offsetHeight和placeholder兩個(gè)屬性
offsetHeight是偏移y絕對(duì)值
placeholder是默認(rèn)顯示的數(shù)值，以灰色字體顯示，當(dāng)為“__today__”時(shí)顯示今天的時(shí)間INPUT（文本框）控件：
ZZSInput(id,{minusHeight:0,minusWidth:4,placeholder:"請(qǐng)輸入數(shù)字",onlyinput:"number"})
minusHeight和minusWidth屬性可以縮小input控件相對(duì)于外部標(biāo)簽的大小，如果外部標(biāo)簽高度為0，則自動(dòng)變成高度20px。
placeholder屬性不再贅述
onlytips如果為false則placeholder會(huì)變成默認(rèn)文本值，默認(rèn)為true
onlyinput屬性表示設(shè)置只能輸入某些值，當(dāng)設(shè)為num或number時(shí)只能輸入阿拉伯?dāng)?shù)字、加減號(hào)和小數(shù)點(diǎn)；
當(dāng)設(shè)為chn或chinese時(shí)只能輸入中文
當(dāng)設(shè)為letter時(shí)只能輸入英文TEXTAREA（文本域）控件：
與INPUT控件完全一致，只是將input變成textarea
如果外部標(biāo)簽沒有高度則默認(rèn)高度為40pxButton（按鈕）控件：
ZZSButton(id,function(){alert(1)},{text:"按鈕上面的字",width:100,height:100,borderRadius:10})
這里的function是點(diǎn)擊事件
width height borderRadius屬性為可選項(xiàng)，不需要帶上"px"或"pt"等單位字眼Widget.getResult(id,t)方法:
該方法用于獲取綁定控件的對(duì)象上面的值
如果placeholder設(shè)為onlytips則返回的值為空字符串
如果t為空則放回一個(gè)對(duì)象{value:"某個(gè)value",type:"某個(gè)type"}
如果t為value就直接返回value
如果t為type就直接返回type,type有五種，分別是Option MultipleOption Calendar Input Textarea Widget.setValue(id,v)方法：
該方法用于對(duì)已經(jīng)綁定控件的目標(biāo)元素設(shè)置一個(gè)值，目標(biāo)對(duì)象是否設(shè)置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元素的子對(duì)象或?qū)O，孫孫孫……對(duì)象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控件無(wú)法綁定到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升級(jí)，每次都把整個(gè)scroller重置，這樣可以避免存在多個(gè)scroll域時(shí)只對(duì)一個(gè)域綁定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){ //此處會(huì)做判斷，如果已經(jīng)綁了就不會(huì)綁第二次了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控件無(wú)法綁定到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控件無(wú)法綁定到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; //天數(shù)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")+"控件無(wú)法綁定到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 "數(shù)字":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控件無(wú)法綁定到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;">這個(gè)將綁定按鈕</div><button onclick='ZZSButton("s",function(){alert(1)},{text:"按鈕",width:40,height:40,borderRadius:6})'>點(diǎn)擊綁定按鈕控件到上方</button><button onclick='alert(ZZSWidget.getResult("f","value"))'>點(diǎn)擊獲取輸入框控件的值</button><br/><br/><br/><br/><br/><br/><div id="a" style="background-color:#eee;">這個(gè)將綁定單選</div><button onclick='ZZSOption("a",[1,2,3,4,5],{offsetHeight:20,placeholder:"這是提示，請(qǐng)選擇單選值",onlytips:true})'>點(diǎn)擊綁定單選控件到上方</button><button onclick='alert(ZZSWidget.getResult("a","value"))'>點(diǎn)擊獲取單選控件的值</button><br/><br/><br/><br/><br/><br/><div id="b" style="background-color:#eee;">這個(gè)將綁定多選</div><button onclick='ZZSMultipleOption("b",[1,2,3,4,5],{offsetHeight:20,placeholder:"這是提示，請(qǐng)選擇多選值",onlytips:true})'>點(diǎn)擊綁定多選控件到上方</button><div id="c" style="background-color:#eee;">這個(gè)將綁定日歷</div><button onclick='alert(ZZSWidget.getResult("b","value"))'>點(diǎn)擊獲取多選控件的值</button><br/><br/><br/><br/><br/><br/><button onclick='ZZSCalendar("c",{offsetHeight:20,placeholder:"__today__",onlytips:false})'>點(diǎn)擊綁定日歷控件到上方</button><button onclick='alert(ZZSWidget.getResult("c","value"))'>點(diǎn)擊獲取日歷控件的值</button><br/><br/><br/><br/><br/><br/><div id="d" style="background-color:#eee;">這個(gè)將綁定日歷</div><button onclick='ZZSCalendar("d",{offsetHeight:20,placeholder:"請(qǐng)選擇日期",onlytips:true})'>點(diǎn)擊綁定日歷控件到上方</button><button onclick='alert(ZZSWidget.getResult("d","value"))'>點(diǎn)擊獲取日歷控件的值</button><br/><br/><br/><br/><br/><br/><div id="e" style="background-color:#eee;">這個(gè)將綁定中文文本框</div><button onclick='ZZSTextarea("e",{placeholder:"請(qǐng)輸入中文",minusWidth:4,minusHeight:-20,onlyinput:"Chinese"})'>點(diǎn)擊綁定文本域控件到上方</button><button onclick='alert(ZZSWidget.getResult("e","value"))'>點(diǎn)擊獲取文本域控件的值</button><br/><br/><br/><br/><br/><br/><div id="f" style="background-color:#eee;">這個(gè)將綁定英文輸入框</div><button onclick='ZZSInput("f",{placeholder:"請(qǐng)輸入英文",minusWidth:4,minusHeight:2,onlyinput:"letter"})'>點(diǎn)擊綁定輸入框控件到上方</button><button onclick='alert(ZZSWidget.getResult("f","value"))'>點(diǎn)擊獲取輸入框控件的值</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>該控件庫(kù)是我在項(xiàng)目中設(shè)計(jì)的，可以單獨(dú)使用，不依賴其他庫(kù)
總結(jié)
以上是生活随笔為你收集整理的自制单选多选日历文本框文本域控件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： tomcat屏蔽ip
- 下一篇： WAF果真是个好东西