直播微信小程序是啥_JS面向对象之多选框完成

JS面向对象之多选框实现       这篇文章主要为大家详细介绍了JS面向对象之多选框实现,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JS面向对象之多选框实现代码,供大家参考,具体内容如下

描述:

JS面向对象——多选框的实现

效果:

实现:

Utile.js

(function () {
 Object.prototype.addProto=function (sourceObj) {
 var names=Object.getOwnPropertyNames(sourceObj);
 for(var i=0;i names.length;i++){
 var desc=Object.getOwnPropertyDescriptor(sourceObj,names[i]);
 if(typeof desc.value==="object" desc.value!==null){
 var obj=new desc.value.constructor();
 obj.addProto(desc.value);//把obj当成引用对象带入递归函数继续给obj赋值
 Object.defineProperty(this,names[i],{
 enumerable:desc.enumerable,
 writable:desc.writable,
 configurable:desc.configurable,
 value:obj
 continue;
 Object.defineProperty(this,names[i],desc);
 return this;
 Function.prototype.extend "data_finish_event",
 init:function (imgDataList,basePath,type) {
 if(imgDataList.length===0) return;
 if(!type) type="json";
 RES.imgDataList=imgDataList.reverse();
 RES.basePath=basePath;
 RES.type=type;
 RES.ajax(basePath+imgDataList.pop()+"."+type)
 ajax:function (path) {
 var xhr=new XMLHttpRequest();
 xhr.addEventListener("load",RES.loadHandler);
 xhr.open("GET",path);
 xhr.send();
 loadHandler:function (e) {
 this.removeEventListener("load",RES.loadHandler);
 var key,obj;
 if(RES.type==="json"){
 obj=JSON.parse(this.response);
 key=obj.meta.image.split(".png")[0];
 list[key]=obj.frames;
 }else if(RES.type==="xml"){
 obj=this.responseXML.children[0];
 key=obj.getAttribute("imagePath").split(".png")[0];
 list[key]=obj;
 if(RES.imgDataList.length===0){
 var evt=new Event(RES.DATA_FINISH_EVENT);
 evt.list=list;
 document.dispatchEvent(evt);
 // Model.instance.menuData=list;
 return;
 RES.ajax(RES.basePath+RES.imgDataList.pop()+"."+RES.type);
 getNameJSONData:function (name) {
 var fileName=RES.basePath;
 for(var key in list){
 var arr=list[key].filter(function (t) {
 return t.filename===name;
 if(arr.length 0){
 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 list.length;i++){
 list[i].self.checked=false;
 this.checked=true;
 dispatchMessage:function (value) {
 if(!value)return;
 this.constructor.supClass.dispatchMessage.call(this,value);
 return Radio;
})(); 

html

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title Title /title 
 script src="js/Utile.js" /script 
 script src="js/UIComponent.js" /script 
 /head 
 body 
 script 
 document.addEventListener(RES.DATA_FINISH_EVENT,init);
 RES.init(["new_icon"],"img/","xml");
 function init() {
 var elem=document.createDocumentFragment();
 document.addEventListener("change",changeHandler);
 var check=new CheckBox(elem);
 check.checked=true;
 check.label="男";
 var check1=new CheckBox(elem);
 check1.label="女";
 document.body.appendChild(elem);
 function changeHandler(e) {
 console.log(e);

相关阅读