大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍JS面向对象之单选框的实现方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
为巴青等地区用户提供了全套网页设计制作服务,及巴青网站建设行业解决方案。主营业务为做网站、网站制作、巴青网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!
本文实例为大家分享了JS面向对象之单选框实现代码,供大家参考,具体内容如下
描述:
JS面向对象——单选框的实现
效果:
实现:
Utile.js
(function () { Object.prototype.addProto=function (sourceObj) { var names=Object.getOwnPropertyNames(sourceObj); for(var i=0;i0){ fileName+=key+".png"; break; } } if(arr.length===0){ return false; }else{ return { file:fileName, w:arr[0].frame.w, h:arr[0].frame.h, x:arr[0].frame.x, y:arr[0].frame.y }; } }, getNameXMLData:function (name) { var fileName=RES.basePath; for(var key in list){ var elem=list[key].querySelector("[n="+name+"]"); if(elem){ fileName+=list[key].getAttribute("imagePath"); break; } } if(!elem) return false; return { file:fileName, w:elem.getAttribute("w"), h:elem.getAttribute("h"), x:elem.getAttribute("x"), y:elem.getAttribute("y") } }, getImage:function (name) { var obj; if(RES.type==="json"){ obj=RES.getNameJSONData(name); }else if(RES.type==="xml"){ obj=RES.getNameXMLData(name) } if(!obj)return; var div=document.createElement("div"); Object.assign(div.style,{ width:obj.w+"px", height:obj.h+"px", backgroundImage:"url("+obj.file+")", backgroundPositionX:-obj.x+"px", backgroundPositionY:-obj.y+"px", position:"absolute" }); return div; }, changeImg:function (elem,name) { var obj; if(RES.type==="json"){ obj=RES.getNameJSONData(name); }else if(RES.type==="xml"){ obj=RES.getNameXMLData(name) } if(!obj)return; Object.assign(elem.style,{ width:obj.w+"px", height:obj.h+"px", backgroundImage:"url("+obj.file+")", backgroundPositionX:-obj.x+"px", backgroundPositionY:-obj.y+"px", position:"absolute" }); } } })();
UIComponent.js
var CheckBox=(function () { function CheckBox(parent) { this.checkView=this.init(parent); } /* //ES5 单例 CheckBox.getInstance=function () { if(!CheckBox._instance){ CheckBox._instance=new CheckBox(); } return CheckBox._instance; };*/ CheckBox.prototype.addProto({ _label:"", _checked:false, init:function (parent) { if(this.checkView) return this.checkView; var div=document.createElement("div"); var icon=RES.getImage("f-checkbox"); div.appendChild(icon); var label=document.createElement("span"); div.style.position=icon.style.position=label.style.position="relative"; icon.style.float=label.style.float="left"; label.textContent=""; Object.assign(label.style,{ fontSize:"16px", lineHeight:"20px", marginLeft:"5px", marginRight:"10px" }); var h=RES.getNameXMLData("f-checkbox").h; icon.style.top=(20-h)/2+"px"; div.appendChild(label); parent.appendChild(div); this.clickHandlerBind=this.clickHandler.bind(this); div.addEventListener("click",this.clickHandlerBind); return div; }, clickHandler:function (e) { this.checked=!this.checked; }, set label(value){ this._label=value; this.checkView.lastElementChild.textContent=value; }, get label(){ return this._label; }, set checked(value){ if(this._checked===value)return; this._checked=value; if(value){ RES.changeImg(this.checkView.firstElementChild,"f-checkbox-active"); }else{ RES.changeImg(this.checkView.firstElementChild,"f-checkbox"); } this.checkView.firstElementChild.style.position="relative"; this.dispatchMessage(value); }, dispatchMessage:function (value) { var evt=new Event("change"); evt.checked=value; evt.elem=this; document.dispatchEvent(evt); }, get checked(){ return this._checked; } }); return CheckBox; })(); var Radio=(function () { function Radio(parent,groupName) { this.constructor.supClass.constructor.call(this,parent); this.groupName=groupName; this.checkView.self=this; this.checkView.setAttribute("groupName",groupName); } Radio.extendClass(CheckBox); Radio.prototype.addProto({ clickHandler:function (e) { // console.log(Model.instance.menuData); if(this.checked)return; var list=document.querySelectorAll("[groupName="+this.groupName+"]"); for(var i=0;ihtml
Title 以上是“JS面向对象之单选框的实现方法”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
文章题目:JS面向对象之单选框的实现方法
标题路径:http://dzwzjz.com/article/gsipii.html