팝업미리보기&선택한것 합쳐서보기
페이지 정보
조회
22,464
본문
http://moremusic.co.kr
도움 많이주신 사장님께서 필요하다고 하셔서 만들었다가.
초보용으로 쓰면 좋을 것 같아 올립니다.
고수분들이 보면 그다지 어려울건 없겠지만 초보때는 이런거... 없어서 못썼죠^^;
아래의 소스를 주욱 긁어서 html파일을 만들어 시험해봐도 됩니다.
--------------------------------------------------------------------------------
<pre>
//폼을 쓰지 않습니다. 다만 체크박스에 onClick이벤트를 통하여 만약 체크가 된것이라면
//해당 내용을 check_list 에 저장하고 미리보기 버튼을 클릭하면 check_list에 해당하는
//이미지파일들을 조합하여 popup을 만듭니다.
<script language='JavaScript'>
//해당 페이지에 다음을 삽입
//이미지 파일들 저장하는 변수
var check_list='';
</script>
//체크박스를 다음과 같이 교체
//만약 체크되었다면 체크리스트에 "http://가 붙은"이미지 파일을 맨 뒤에 추가하고
//만약 체크를 푼다면 체크리스트에서 "http://가 붙은" 이미지 파일을 검색하여 삭제한다.
<input type=checkbox onClick='if(this.checked==true){ mcl("insert","http://aaaa.jpg"); }else{ mcl("delete","http://aaaa.jpg"); }'>
<input type=checkbox onClick='if(this.checked==true){ mcl("insert","http://bbbb.jpg"); }else{ mcl("delete","http://bbbb.jpg"); }'>
<input type=checkbox onClick='if(this.checked==true){ mcl("insert","http://cccc.jpg"); }else{ mcl("delete","http://cccc.jpg"); }'>
<script>
//이미지 추가 및 등록기
function mcl(how,item){
//만약
switch(how){
//추가라면
case "insert":
//check_list의 맨 뒤에 item을 추가한다. 구분자 | 로
replaced=check_list+item+"|";
break;
//삭제라면
case "delete":
//check_list에서 item과 같은것을 없애버린다
replaced=check_list.replace(item+"|",'');
break;
default: break;
}
//체크리스트에 적용한다.
check_list=replaced;
}
//프리뷰 팝업창
function view_preview(){
//리스트뷰를 우선 check_list를 | 로 잘라 넣는다.
var list_view=check_list.split("|");
//팝업의 내용으로 들어가는 곳이다. 엔터가 있어선 안된다. 차후에 멋지게 추가해도 됨.
var innerhtml_source="<html><head><title>엘렐레 - 미리보기</title><body topmargin=0 leftmargin=0>";
//리스트뷰의 배열갯수대로 돌린다.
for(i=0;i<=(list_view.length-1);i++){
//빈것이 아닐때만
if(list_view[i]!='' && list_view[i]!='undefined'){
//에러대비
try{
//팝업의 내용에 이미지 태그들을 심어 넣는다.
innerhtml_source+="<img src="+list_view[i]+">";
//에러표기없음
}catch(e){}
}
}
//팝업을 열고
open_preview=window.open('','preview','width=820,height=600');
//에러대비
try{
//해당 팝업에 내용을 넣는다.
open_preview.document.write(innerhtml_source);
//에러표기없음
}catch(e){}
}
</script>
//미리보기 버튼
<input type=button value='미리보기' onClick='view_preview();' style='cursor:hand'>
관련자료
-
링크
등록된 댓글이 없습니다.
