레이블이 레이어인 게시물을 표시합니다. 모든 게시물 표시
레이블이 레이어인 게시물을 표시합니다. 모든 게시물 표시

2010년 3월 12일 금요일

[HTML/JAVASCRIPT] 레이어 팝업

<?
if('211.174.235' == substr($_SERVER['REMOTE_ADDR'],0,11))  { ?>

<HTML>
<HEAD>
<STYLE type=text/css>
BODY {FONT-SIZE: 9pt; BACKGROUND: #ffffff; COLOR: #787878; FONT-FAMILY: 굴림,tahoma}
</STYLE>
</HEAD>

<BODY>
<script language=javascript>

        var IE5=(document.getElementById && document.all)? true : false;
        var W3C=(document.getElementById)? true: false;
        var currIDb=null, currIDs=null, xoff=0, yoff=0; zctr=0; totz=0;

        function trackmouse(evt){
                if((currIDb!=null) && (currIDs!=null)){
                        var x=(IE5)? event.clientX+document.body.scrollLeft : evt.pageX;
                        var y=(IE5)? event.clientY+document.body.scrollTop : evt.pageY;
                                currIDb.style.left=x+xoff+'px';
                                currIDs.style.left=x+xoff+10+'px';
                                currIDb.style.top=y+yoff+'px';
                                currIDs.style.top=y+yoff+10+'px';
                        return false;
                }
        }

        function stopdrag(){
                currIDb=null;
                currIDs=null;
                NS6bugfix();
        }

        function grab_id(evt){
                xoff=parseInt(this.IDb.style.left)-((IE5)? event.clientX+document.body.scrollLeft : evt.pageX);
                yoff=parseInt(this.IDb.style.top)-((IE5)? event.clientY+document.body.scrollTop : evt.pageY);
                currIDb=this.IDb;
                currIDs=this.IDs;
        }

        function NS6bugfix(){
                if(!IE5){
                        self.resizeBy(0,1);
                        self.resizeBy(0,-1);
                }
        }

        function incrzindex(){
                zctr=zctr+2;
                this.subb.style.zIndex=zctr;
                this.subs.style.zIndex=zctr-1;
        }

        function createPopup(id, title, width, height, x , y , isdraggable, boxcolor, barcolor, shadowcolor, text, textcolor, textptsize, textfamily ){
                if(W3C){
                        zctr+=2;
                        totz=zctr;
                        var txt='';
                                txt+='<div id="'+id+'_s" style="position:absolute; left:'+(x+7)+'px; top:'+(y+7)+'px; width:'+width+'px; height:'+height+'px; background-color:'+shadowcolor+'; filter:alpha(opacity=50); visibility:visible"> </div>';
                                txt+='<div id="'+id+'_b" style="border:outset '+barcolor+' 2px; position:absolute; left:'+x+'px; top:'+y+'px; width:'+width+'px; overflow:hidden; height:'+height+'px; background-color:'+boxcolor+'; visibility:visible">';
                                txt+='<div style="width:'+width+'px; height:16px; background-color:'+barcolor+'; padding:0px; border:1px"><table cellpadding="0" cellspacing="0" border="0" width="'+(IE5? width-4 : width)+'"><tr><td width="'+(width-20)+'"><div id="'+id+'_h" style="width:'+(width-20)+'px; height:14px; font: bold 12px Tahoma; cursor:move; color:'+textcolor+'"> '+title+'</div></td><td align="right"><a onmousedown="document.getElementById(\''+id+'_s\').style.display=\'none\'; document.getElementById(\''+id+'_b\').style.display=\'none\';return false"><img src="http://www.blueb.co.kr/SRC/javascript/image/close.gif" border="0" height="15" width="15"></a></td></tr></table></div>';
                                txt+='<div id="'+id+'_ov" width:'+width+'px; style="margin:5px; color:'+textcolor+'; font:'+textptsize+'pt '+textfamily+';">'+text+'</div></div>';
                                document.write(txt);
                                this.IDh=document.getElementById(id+'_h');
                                this.IDh.IDb=document.getElementById(id+'_b');
                                this.IDh.IDs=document.getElementById(id+'_s');
                                this.IDh.IDb.subs=this.IDh.IDs;
                                this.IDh.IDb.subb=this.IDh.IDb;
                                this.IDh.IDb.IDov=document.getElementById(id+'_ov');
                                if(IE5){
                                        this.IDh.IDb.IDov.style.width=width-6;
                                        this.IDh.IDb.IDov.style.height=height-22;
                                        this.IDh.IDb.IDov.style.scrollbarBaseColor=boxcolor;
                                        this.IDh.IDb.IDov.style.overflow="auto";
                                }
                                else{
                                        this.IDh.IDs.style.MozOpacity=.5;
                                }
                                this.IDh.IDb.onmousedown=incrzindex;
                                if(isdraggable){
                                        this.IDh.onmousedown=grab_id;
                                        this.IDh.onmouseup=stopdrag;
                                }
                        }
                }

        if(W3C)document.onmousemove=trackmouse;
        if(!IE5 && W3C)window.onload=NS6bugfix;       
       
</script>

<script language=javascript>

        createPopup( 'popup1', 'popup 1' ,  300, 120, 50, 50, true, '#ebebeb' , '#787878' , '#cccccc' ,  '<font color="#787878">You can drag and drop these boxes by using the titlebar as the handle if dragging has been enabled.<br>Dragging has been disabled for this box.</font>' , '#ffffff' , 8 , 'Tahoma');

<!-- 이부분은 팝업창을 두개 이상할때를 보여주기 위한 부분입니다 -->
        createPopup( 'popup2', 'popup 2' ,  220, 130, 50, 250, true, '#c0c0c0' , '#555555' , '#c0c0c0' ,  'The HTML in these boxes will wrap if they need to. In NS6, any HTML past the bottom will get chopped off (because of some weird stuff NS6 does while dragging scrollable DIVs), while IE will display a scrollbar to scroll down.<br><br>' , '#f3f3f3' , 10 , 'Arial');


<!-- 이부분은 팝업창을 두개 이상할때를 보여주기 위한 부분입니다 -->
        createPopup( 'popup3', 'popup 3' ,  320, 130, 250, 80, true, '#c0c0c0' , '#555555' , '#c0c0c0' ,  '이곳에 팝업내용을 삽입하세요.        ' , '#f3f3f3' , 10 , 'Arial');

</script>
</P>

</BODY>
</HTML>


<?
}
?>

2009년 10월 6일 화요일

[자바스크립트] 레이어 드래그 & 드롭



# 20080127 수정
 : 드래그 엘리먼트를 따로 지정할 수 있음
 : Direction 코드값 변경


사용법 : new Drag(AttributeName , DragElement , DragAreaNode , DragDirection , ScalePercentageAttributeName);
 - AttributeName : Element 클릭시 Element.getAttribute(AttributeName) 의 값이 "true" 일 때 Element를 드래그
 - DragElement : 해당 Element에 설정시 eval(Element.getAttribute(DragElement)) 를  드래그엘리먼트로 인식
 - DragAreaNode : 해당 Element에 설정시 eval(Element.getAttribute(DragAreaNode)) 하위노드에서만 드래그 가능
 - DragDirection(드래그가능방향) : Element.getAttribute(DragDirection)=[0 - Both , 1 - Horizontal , 2 - Vertical], 설정안할경우 Both
 - ScalePercentageAttributeName : Element.getAttribute(ScalePercentageAttributeName) 가 설정된 드래그 객체에 한해 DragAreaNode 로부터 Element 의 드래그범위를 설정한 비율로 리턴받을수있음(Object.ScaleX , Object.ScaleY)

 * 사용자 편의를 고려해서 최대한 각 Element의 이벤트핸들러나 기본속성에 접근하지 않는 방법을 선택했습니다. 그러다보니 거의 대부분을 사용자 확장 태그값으로 컨트롤 했는데 혹시 이 방법이 어떤 다른 이유에서 안좋다거나 하신분들은 의견 바랍니다.




<span id="text1" style="font-size:12pt;">Drag&Drop</span>

<br>

<embed id="music1" src="http://cfs9.blog.daum.net/upload_control/download.blog?fhandle=MEhUd09AZnM5LmJsb2cuZGF1bS5uZXQ6L0lNQUdFLzAvMTAud21h&filename=10.wma&filename=%ED%8B%B0%28%EC%9C%A4%EB%AF%B8%EB%9E%98%29-%EC%8B%9C%EA%B0%84%EC%9D%B4%ED%9D%90%EB%A5%B8%EB%92%A4.wma" autostart="true"></embed>

<br>

<div style="width:300px; height:300px; background:#72C31B;" draggable="true">Drag : free</div>
<div style="width:200px; height:200px; background:#FFA500; position:absolute;" id="div1" draggable="true" dragarea="document.body">dragarea : body
<input type="text" id="GridPositionX">
</div>
<div style="width:100px; height:100px; background:#FF0000;" draggable="true" dragarea="document.getElementById('div1')">dragarea : div1</div>

<img id="gridX" src="http://sstatic.naver.com/search/mypocket/v3/btn_atcmp_on_op2.gif" draggable="true" dragarea="document.getElementById('div1')" dragdirection="1" scalepercent="10000" onmousedown="return false" onmousemove="return false" title="HORIZONTAL">
<img id="gridY" src="http://sstatic.naver.com/search/mypocket/v3/btn_atcmp_on_op2.gif" draggable="true" dragarea="document.getElementById('div1')" dragdirection="2" scalepercent="500" onmousedown="return false" onmousemove="return false" title="VERTICAL">

<div id="dd" style="background:#000000; width:100px; height:100px;"><br>
<div style="background:#FFFFFF; cursor:move;" draggable="true" dragelement="document.getElementById('dd')">dragelement : parent</div>
</div>

<script language="javascript" src="Drag.js"></script>
<script language="javascript">
//기본설정
var myDrag = new Drag("draggable","dragelement","dragarea","dragdirection","scalepercent");
//기본설정

//응용설정
myDrag.addEvent(document,"onmousemove",function () {
    document.getElementById("GridPositionX").value = myDrag.ScaleX + " : " + Math.ceil(myDrag.ScaleX / 100) + "%";
    document.getElementById("music1").volume = myDrag.ScaleX - Number(document.getElementById("gridX").getAttribute("scalepercent"));
    document.getElementById("text1").style.fontSize = ((myDrag.ScaleY <= 12) ? 12 : myDrag.ScaleY) + "px";
});
//응용설정
</script>