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>');