<!--클래스-->
<script>
Layer = function() {
      this.Elem = document.createElement('div');
      this.Elem.id = 'Layer' + Layer.Count++;
      this.Elem.appendChild(document.createElement('div'));
      this.Elem.appendChild(document.createElement('div'));

      // Properties
      this.Id = this.Elem.id;
      this.Drag = true;
      this.Subject = 'Layer';
      this.Content = 'Content';
      this.Style = this.Elem.style;
      this.SubjectStyle = this.Elem.children[0].style;
      this.ContentStyle = this.Elem.children[1].style;
      //

      // Init
      with(this.Style) {
            position = 'absolute';
            border = '1px solid slategray';
            zIndex = Layer.ZIndex++;
      }
      with(this.SubjectStyle) {
            font = 'bold 9pt tahoma';
            backgroundColor = 'slategray';
            color = 'lightgrey';
            padding = '3px';
            cursor = 'default';
      }
      with(this.ContentStyle) {
            font = 'normal 9pt tahoma';
            backgroundColor = 'whitesmoke';
            color = 'slategray';
            padding = '3px';
      }
      //

      // Show Method
      this.Show = function() {
            document.body.appendChild(this.Elem);
            this.Refresh();
      }//

      // Refresh Method
      this.Refresh = function() {
            this.Elem.children[1].innerHTML = this.Content;
            with(this.Elem.children[0]) {
                  innerHTML = this.Subject;
                  onselectstart = function() { return false; }
                  style.width = Math.max(this.Elem.children[1].offsetWidth, offsetWidth);
                  ondblclick = function() {
                        with(this.parentElement.children[1].style) {
                              display = display ? '' : 'none';
                        }
                  }

                  // Drag Event
                  if(this.Drag) {
                        IsDrag = false;
                        var PadLeft = parseInt(style.paddingLeft);
                        var PadTop = parseInt(style.paddingTop);
                        onmousedown = function() {
                              IsDrag = true;
                              DragX = event.offsetX + PadLeft;
                              DragY = event.offsetY + PadTop;
                        }
                        onmouseup = function() { IsDrag = false; }
                        onmouseout = function() { IsDrag = false; }
                        onmousemove = function() {
                              if(IsDrag) {
                                    with(this.parentElement.style) {
                                          left = event.clientX - DragX;
                                          top = event.clientY - DragY;
                                    }
                              }
                        }
                  }
                  else {
                        IsDrag = DragX = DragY = null;
                        onmousedown = onmouseup = onmouseout = onmousemove = null;
                  }// End Drag Event
            }

      }// End Refresh()

      // Event z-index
      this.Elem.children[0].onclick = function() { this.parentElement.style.zIndex = Layer.ZIndex++; }
      this.Elem.children[1].onclick = function() { this.parentElement.style.zIndex = Layer.ZIndex++; }
}
Layer.Count = 0;
Layer.ZIndex = 100;
</script>
<!---->

<!--사용-->
<script>
window.onload = function() {
      with(document) {
            with(body) {
                  Layer1 = new Layer();
                  Layer1.Subject = '드래그 ON 레이어';
                  Layer1.Content = '나 보기가 역겨워 가실때에는<br>' +
                  '말 없이 고이 보내 드리오리다.<br>' +
                  '<img src=http://mypds.mireene.com/g4/_v1/img/mybanner05.jpg>';
                  Layer1.Show();

                  Layer2 = new Layer();
                  Layer2.Style.left = '200px';
                  Layer2.SubjectStyle.color = 'red';
                  Layer2.Drag = false;
                  Layer2.Subject = '드래그 OFF 레이어';
                  Layer2.Content = '드래그 되지 않는 레이어<br>타이틀을 더블클릭하면 창이 축소됩니다.';
                  Layer2.Show();
                  Layer2.ContentStyle.backgroundColor = 'ivory';
                  Layer2.Refresh(); // Show() 호출 후 속성이 변경되면 Refresh() 호출
            };
      }
}
</script>
<!----><div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 16:57:14 JavaScript에서 이동 됨]</div>