
    function 图片列表框(name,coloumn,functionName){  
        this.名称 = name;
        this.列数 = coloumn;
        this.标题颜色 = "";
        
        this.置可视 = function (value){
            if(value==true){
                var div = document.getElementById(this.名称).parentNode;
                div.style.display="";	                
            }else{
                var div = document.getElementById(this.名称).parentNode;
                div.style.display="none"; //不占位               
            }
        } 

        this.置可视2 = function (value){
            if(value==true){
                var div = document.getElementById(this.名称).parentNode;
                div.style.visibility="visible";	                
            }else{
                var div = document.getElementById(this.名称).parentNode;
                div.style.visibility="hidden"; //占位               
            }
        } 
        
        this.添加项目 = function (img,title,tag){
            var table = document.getElementById(this.名称);
            var li = document.createElement('li');
            var temp;
            if(this.标题颜色 != ""){
                temp = '<div class="mui-media-body" style="color: '+this.标题颜色+'">'+title+'</div>';
            }else{
                temp = '<div class="mui-media-body">'+title+'</div>';
            }
            temp = '<img class="mui-media-object" src='+img+'>'+temp;
            if(this.列数==1){
                li.className = 'mui-table-view-cell mui-media mui-col-xs-12';
            }else if(this.列数==2){
                li.className = 'mui-table-view-cell mui-media mui-col-xs-6';
            }else if(this.列数==3){
                li.className = 'mui-table-view-cell mui-media mui-col-xs-4';
            }else if(this.列数==4){
                li.className = 'mui-table-view-cell mui-media mui-col-xs-3';
            }else{
                li.className = 'mui-table-view-cell mui-media mui-col-xs-12';
            }            
            li.setAttribute("tag",tag); //设置项目标记           
            li.innerHTML = temp; 
            var index = table.getElementsByTagName("li").length;
            li.index = index;//设置项目索引
            table.appendChild(li);
            return index;
        }

        this.插入项目 = function (index,img,title,tag){
            var table = document.getElementById(this.名称);
            var li = document.createElement('li');
            var temp;
            if(this.标题颜色 != ""){
                temp = '<div class="mui-media-body" style="color: '+this.标题颜色+'">'+title+'</div>';
            }else{
                temp = '<div class="mui-media-body">'+title+'</div>';
            }
            temp = '<img class="mui-media-object" src='+img+'>'+temp;
            if(this.列数==1){
                li.className = 'mui-table-view-cell mui-media mui-col-xs-12';
            }else if(this.列数==2){
                li.className = 'mui-table-view-cell mui-media mui-col-xs-6';
            }else if(this.列数==3){
                li.className = 'mui-table-view-cell mui-media mui-col-xs-4';
            }else if(this.列数==4){
                li.className = 'mui-table-view-cell mui-media mui-col-xs-3';
            }else{
                li.className = 'mui-table-view-cell mui-media mui-col-xs-12';
            }            
            li.setAttribute("tag",tag); //设置项目标记           
            li.innerHTML = temp; 
            var len = table.getElementsByTagName("li").length;
            var result = index;
            if(index<1){
                result = 0;
                table.insertBefore(li,table.childNodes[0]);
            }else if(index > len){
                result = len;
                table.appendChild(li);
            }else{
                result = index;
                table.insertBefore(li,table.childNodes[result+1]);
            }
            var li2 = document.getElementById(this.名称).getElementsByTagName("li");
            for(var i = 0;i < li2.length; i++){
                li2[i].index=i;//刷新全部项目索引
            }            
            return result;
        }

        this.添加项目2 = function (img,title,tag){
            var table = document.getElementById(this.名称);
            var li = document.createElement('li');
            var temp;
            if(this.标题颜色 != ""){
                temp = '<div class="mui-media-body" style="color: '+this.标题颜色+'">'+title+'</div>';
            }else{
                temp = '<div class="mui-media-body">'+title+'</div>';
            }
            temp = '<div class="mui-card" style="margin:6px;padding:0px">\n'+'<img class="mui-media-object" src='+img+'>\n'+temp+'\n</div>';
            if(this.列数==1){
                li.className = 'mui-table-view-cell mui-media mui-col-xs-12';
            }else if(this.列数==2){
                li.className = 'mui-table-view-cell mui-media mui-col-xs-6';
            }else if(this.列数==3){
                li.className = 'mui-table-view-cell mui-media mui-col-xs-4';
            }else if(this.列数==4){
                li.className = 'mui-table-view-cell mui-media mui-col-xs-3';
            }else{
                li.className = 'mui-table-view-cell mui-media mui-col-xs-12';
            }            
            li.setAttribute("tag",tag); //设置项目标记           
            li.innerHTML = temp; 
            var index = table.getElementsByTagName("li").length;
            li.index = index;//设置项目索引
            table.appendChild(li);
            return index;
        }


        this.插入项目2 = function (index,img,title,tag){
            var table = document.getElementById(this.名称);
            var li = document.createElement('li');
            var temp;
            if(this.标题颜色 != ""){
                temp = '<div class="mui-media-body" style="color: '+this.标题颜色+'">'+title+'</div>';
            }else{
                temp = '<div class="mui-media-body">'+title+'</div>';
            }
            temp = '<div class="mui-card" style="margin:6px;padding:0px">\n'+'<img class="mui-media-object" src='+img+'>\n'+temp+'\n</div>';
            if(this.列数==1){
                li.className = 'mui-table-view-cell mui-media mui-col-xs-12';
            }else if(this.列数==2){
                li.className = 'mui-table-view-cell mui-media mui-col-xs-6';
            }else if(this.列数==3){
                li.className = 'mui-table-view-cell mui-media mui-col-xs-4';
            }else if(this.列数==4){
                li.className = 'mui-table-view-cell mui-media mui-col-xs-3';
            }else{
                li.className = 'mui-table-view-cell mui-media mui-col-xs-12';
            }            
            li.setAttribute("tag",tag); //设置项目标记           
            li.innerHTML = temp; 
            var len = table.getElementsByTagName("li").length;
            var result = index;
            if(index<1){
                result = 0;
                table.insertBefore(li,table.childNodes[0]);
            }else if(index > len){
                result = len;
                table.appendChild(li);
            }else{
                result = index;
                table.insertBefore(li,table.childNodes[result+1]);
            }
            var li2 = document.getElementById(this.名称).getElementsByTagName("li");
            for(var i = 0;i < li2.length; i++){
                li2[i].index=i;//刷新全部项目索引
            }            
            return result;
        }
        
        this.删除项目 = function (index){
            /*var table = document.getElementById(this.名称);
            var li = table.childNodes;
            console.log(li.length);
            console.log(li[index].nodeName);
            if(index<li.length){
                table.removeChild(li[index]);
            }*/
            var li = document.getElementById(this.名称).getElementsByTagName("li");
            //console.log(li.length);
            if(index<li.length){
                var table = li[index].parentNode;
                table.removeChild(li[index]);
                var li2 = document.getElementById(this.名称).getElementsByTagName("li");
                for(var i = 0;i < li2.length; i++){
                    li2[i].index=i;//刷新全部项目索引
                }
            }
        }

        this.清空项目 = function (){
            var table = document.getElementById(this.名称);
            while(table.hasChildNodes()){
                table.removeChild(table.firstChild);
            }
        }

        this.置项目图片 = function (index,image){
            var li = document.getElementById(this.名称).getElementsByTagName("li");
            if(li==null){
                return;
            }
            if(li.length<=index){
                return;
            }
            var img = li[index].getElementsByTagName("img")[0];                     
            img.setAttribute("src",image); 
        }
        
        this.取项目图片 = function (index){
            var li = document.getElementById(this.名称).getElementsByTagName("li");
            if(li==null){
                return "";
            }
            if(li.length<=index){
                return "";
            }
            var img = li[index].getElementsByTagName("img")[0]; 
            var image = img.getAttribute("src"); 
            if(image == null){
                image = "";
            }           
            return image;
        }
        
        this.置项目标题 = function (index,title){
            var li = document.getElementById(this.名称).getElementsByTagName("li");
            if(li==null){
                return;
            }
            if(li.length<=index){
                return;
            }         
            var item = li[index].getElementsByClassName("mui-media-body")[0];
            //item.innerHTML = '<div class="mui-media-body">' + title + '</div>';   
            item.innerText=title;      
        }
        
        this.取项目标题 = function (index){
            var li = document.getElementById(this.名称).getElementsByTagName("li");
            if(li==null){
                return "";
            }
            if(li.length<=index){
                return "";
            }         
            var item = li[index].getElementsByClassName("mui-media-body")[0];
            var title = item.innerText;
            title = title.replace(/(^\n*)|(\n*$)/g, ""); //去掉首尾的换行符
            return title;
        }

        this.置项目标记 = function (index,tag){
            var li = document.getElementById(this.名称).getElementsByTagName("li");
            if(li==null){
                return;
            }
            if(li.length<=index){
                return;
            }          
            li[index].setAttribute("tag",tag); 
        }
        
        this.取项目标记 = function (index){
            var li = document.getElementById(this.名称).getElementsByTagName("li");
            if(li==null){
                return "";
            }
            if(li.length<=index){
                return "";
            }          
            return li[index].getAttribute("tag");
        }

        this.取项目总数 = function (){
            return document.getElementById(this.名称).getElementsByTagName("li").length;
        }

        this.置背景颜色 = function (r,g,b,a){
			var div = document.getElementById(this.名称);	
			div.style.setProperty("background-color", "rgba(" + r + "," + g + "," + b + "," + a + ")");			
		}

        this.置标题颜色 = function (value){
            this.标题颜色 = value;
            var li = document.getElementById(this.名称).getElementsByTagName("li");
            if(li==null){
                return;
            }
            for(var i = 0;i < li.length; i++){
                var div = li[i].getElementsByClassName("mui-media-body")[0];
                div.style.setProperty("color", value);
            }          	
		}
       
        if(functionName!=null){
            mui('#'+this.名称).on('tap', 'li', function() {
                var title = this.innerText;
                title = title.replace(/(^\n*)|(\n*$)/g, ""); //去掉首尾的换行符
                var img = this.getElementsByTagName("img")[0];
                var image = img.getAttribute("src");
                functionName(Number(this.index),image,title,this.getAttribute("tag"));//表项被单击事件，返回项目索引、项目图片、项目标题、项目标记
            });       	
        }
    }  


 