<!--클래스-->
<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>