JS面向对象之单选框实现

前端  /  管理员 发布于 7年前   476

本文实例为大家分享了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;i
html
       
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
您可能感兴趣的文章:
用js代码改变单选框选中状态的简单实例
javascript判断单选框或复选框是否选中方法集锦
使用AngularJS处理单选框和复选框的简单方法
AngularJS单选框及多选框实现双向动态绑定
js获取单选框或复选框值及操作
利用原生js和jQuery实现单选框的勾选和取消操作的方法
js和jquery分别验证单选框、复选框、下拉框
在js中单选框和复选框获取值的方式
JS获取文本框,下拉框,单选框的值的简单实例
javascript 单选框，多选框美化代码