As+lightbox+js实现实时加载图片进度

lightbox+checkbox实现轻量级联动选择，可为1级的也可以为2级的checkbox选择。

此示例是基于lightbox自己写的轻量级的lightbox上的，可以查看下面的文章

美化alert，confirm，prompt并实现lightbox效果

查看效果请点击这里

完整实例下载

效果如下

下面贴出核心代码
Showbo.PopSel={ maxItem:6,//最多选择的项 itemNum:0,//已经选择了多少项 fs:null,//fieldset集合 ld:null,//legend集合 sel:null,//第一个lengend中的select对象 sp:null,//checkbox的容器 b:null,//大类数组 s:null,//小类数组 dpstr:null,//显示的内容 bobj:null,//接受大类值的hidden对象 sobj:null,//接受小类值的hidden对象 dpobj:null,//显示选择大类【如果未选择小类】或者小类的显示值 selv:0,//select初始化时的值 isOne:false,//是否为只有一级选择。 tmpHTML:'<div id="dvSelPop"><fieldset class="selpop"><legend><label></label><select οnchange="Showbo.PopSel.sm(this.value)"></select></legend><span></span><div class="clear"></div>' +'</fieldset><br/><br/><fieldset class="selpop"><legend></legend><span></span><div class="clear"></div></fieldset></div>',//mgbox的模板内容 setVal:function(){//设置内容 var cb=Showbo.$s(this.sp[1],'input'),sIds='',sStr='',bStr=this.isOne?'':this.sel.options[this.sel.selectedIndex].text; for(var i=0;i<cb.length;i++){ sIds+=(sIds==''?'':',')+cb[i].value; sStr+=(sStr==''?'':'，')+bStr+cb[i].nextSibling.data; } if(this.isOne)this.bobj.value=sIds; else{this.bobj.value=this.sel.value;this.sobj.value=sIds;} this.dpobj.value=sStr==''?bStr:sStr; }, pop:function(b,s,btl,stl,bobj,sobj,dpobj,binit){ this.b=b;this.s=s;this.bobj=bobj;this.sobj=sobj;this.dpobj=dpobj; this.isOne=s?false:true; Showbo.Msg.show({title:btl,msg:this.tmpHTML,buttons:{yes:'确定',no:'取消'},width:600,fn:function(btn){if(btn=='yes')Showbo.PopSel.setVal();}}); var dvp=Showbo.$('dvSelPop'); this.fs=Showbo.$s(dvp,'fieldset');this.ld=Showbo.$s(dvp,'legend');this.sel=Showbo.$s(this.ld[0],'select')[0];this.sp=Showbo.$s(dvp,'span'); if(/^/d+$/.test(bobj.value))binit=parseInt(bobj.value,10); this.selv=binit; if(this.isOne){this.sel.style.display='none';this.ld[0].firstChild.innerHTML='选项列表';} else{ Showbo.addOptions(this.sel,b,binit); this.sel.style.display='inline'; this.ld[0].firstChild.style.display='none'; } this.ld[1].innerHTML=stl; this.sm(binit,true); Showbo.Msg.onResize();//重新设定MsgBox的位置 }, CK:function(e,isSelected){ var cobj=e.srcElement||e.target; if(cobj.tagName=='LABEL'){ Showbo.cancelEvent(e); cobj=cobj.firstChild; cobj.checked=!cobj.checked; } if(cobj.checked){ if(this.itemNum<this.maxItem){ this.itemNum++; } else{ alert('最多能选择'+this.maxItem+'项！'); Showbo.cancelEvent(e); cobj.checked=false; return false; } } else this.itemNum--; var cb1=Showbo.$s(this.sp[0],'input'),cb2=Showbo.$s(this.sp[1],'input'); if(isSelected){ for(var i=0;i<cb1.length;i++)if(cb1[i].value==cobj.value){cb1[i].checked=false;break;} this.sp[1].removeChild(cobj.parentNode.parentNode); } else{ if(cobj.checked)this.sp[1].innerHTML+='<div><label οnclick="Showbo.PopSel.CK(event,true)"><input type="checkbox" value="'+cobj.value+'" checked/>'+cobj.nextSibling.data+'</label></div>'; else for(var i=0;i<cb2.length;i++)if(cb2[i].value==cobj.value){this.sp[1].removeChild(cb2[i].parentNode.parentNode);break;} } }, sm:function(v){ var obj=this.isOne?this.bobj:this.sobj; if(this.selv==v)this.itemNum=obj.value==''?0:obj.value.split(',').length; else this.itemNum=0; var arr=this.isOne?this.b:this.s['k'+v],html='',selHtml='',SV=','+obj.value+',',cked=''; for(var i=0;i<arr.length;i++){ cked=SV.indexOf(','+arr[i].v+',')!=-1?' checked':''; html+='<div><label οnclick="Showbo.PopSel.CK(event)"><input type="checkbox" value="'+arr[i].v+'"'+cked+'/>'+arr[i].t+'</label></div>'; if(cked!='')selHtml+='<div><label οnclick="Showbo.PopSel.CK(event,true)"><input type="checkbox" value="'+arr[i].v+'" checked/>'+arr[i].t+'</label></div>'; } this.sp[0].innerHTML=html; this.sp[1].innerHTML=selHtml; } }; //样式 document.write('<mce:style type="text/css"><!-- fieldset.selpop{width:95%;margin:0% auto;padding:0px;margin:0px;}' +'fieldset.selpop div{width:30%;float:left;line-height:25px;padding-left:10px;}' +'fieldset.selpop div.clear{clear:both;line-height:1px;overflow:hidden;height:auto !important;height:1px;} --></mce:style><style type="text/css" mce_bogus="1">fieldset.selpop{width:95%;margin:0% auto;padding:0px;margin:0px;}' +'fieldset.selpop div{width:30%;float:left;line-height:25px;padding-left:10px;}' +'fieldset.selpop div.clear{clear:both;line-height:1px;overflow:hidden;height:auto !important;height:1px;}</style>');