JS面向对象之多选框实现

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

本文实例为大家分享了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自定义多选框效果的实例代码
用原生JS实现简单的多选框功能
AngularJS 单选框及多选框的双向动态绑定
html+javascript+bootstrap实现层级多选框全层全选和多选功能
AngularJS单选框及多选框实现双向动态绑定
JavaScript判断表单中多选框checkbox选中个数的方法
JS 实现列表与多选框选择附预览动画
ExtJS 下拉多选框lovcombo
ExtJS Grid使用SimpleStore、多选框的方法
用 Javascript 验证表单(form)中多选框(checkbox)值
javascript 单选框，多选框美化代码
兼容ie和firefox版本的js反选 全选 多选框
JSP+Ajax 添加、删除多选框