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