Html & Script

팝업미리보기&선택한것 합쳐서보기

컨텐츠 정보

본문

글쓴이:Drapiece  [초보용] 그냥 아까워서... (팝업미리보기&선택한것 합쳐서보기) 조회수:105


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

 
 

관련자료

댓글 0
등록된 댓글이 없습니다.
Today's proverb
남보다 앞서는 사람은 자격증이 있는 사람이 아니라 관심이 있는 사람이다.