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