<html>
<head>
<title>Four Exciting Ways to Use the Popup Object</title>
<LINK REL="stylesheet" HREF="../../../samples.css" TYPE="text/css">
<script>
var oPopup = window.createPopup();
function richDropDown()
{
oPopup.document.body.innerHTML = oContextHTML.innerHTML;
oPopup.show(0, 28, 305, 100, dropdowno);
}
function richToolTip()
{
var lefter = event.offsetY+0;
var topper = event.offsetX+15;
oPopup.document.body.innerHTML = oToolTip.innerHTML;
oPopup.show(topper, lefter, 170, 120, ttip);
}
function richDialog()
{
oPopup.document.body.innerHTML = oDialog.innerHTML;
oPopup.show(100, 50, 400, 300);
}
function richContext()
{
var lefter2 = event.offsetY+0;
var topper2 = event.offsetX+15;
oPopup.document.body.innerHTML = oContext2.innerHTML;
oPopup.show(topper2, lefter2, 210, 88, contextobox);
}
</script>
</head>
<body>
<h1>Four Exciting Uses of the Popup Object</h1>
<BR>
<b style="margin-top:15px;">1. Custom Context Menus</b><br><br>
<div style="">Context menus are accessed by clicking the right mouse button. Usually this displays a default context menu. Now you can create a customized context menu with the popup object.</div>
<br>
<span id="contextobox" style=" cursor:hand; margin-left:5px; margin-right:10px; background:#e4e4e4; width:300; height:40; padding:20px;" oncontextmenu="richContext(); return false" >Right-click inside this box.</span>
<BR><BR>
<hr size="1">
<BR>
<b style="width:550px">2. Custom Menus</b>
<br>
<div style="">Creating custom menus is easy with the popup object. In the following example, the drop-down menu uses a gradient filter on each option and has a color scroll bar. Click the drop-down menu and then move the cursor over the options to see these effects.</div>
<br>
<div id="dropdowno" style="background:#3366CC; padding:5px; border-bottom:1px solid black; border-top:1px solid #99CCFF; font:bold 10pt tahoma; color:white; width:300px" ><span style="cursor:hand; margin-left:5px; margin-right:10px;" onmousedown="richDropDown()" >Click here for a custom drop-down <img src="../../../../graphics/UI_droparrow.gif" align="absmiddle" style=""></span></div>
<BR>
<hr size="1">
<b style="margin-top:15px; width:550px">3. Custom Message Boxes</b>
<br>
<div style="">All types of interactive message boxes can be easily created with the popup object. Click the button below.</div><br>
<Button style="cursor:hand; margin-left:5px; margin-right:10px;" onmousedown="richDialog()" > Click Me</button><br>
<BR>
<hr size="1">
<b style="margin-top:15px; width:550px">4. Custom ToolTips</b>
<br>
<div style="">Using the popup object, web pages can now have ToolTips that are as dynamic as the pages themselves. In the following example, the popup object's position depends on where the mouse pointer is when the ToolTip is activated. Move the cursor over the green text to display a ToolTip.</div><br>
Using <span id="ttip" style="width:120;color:green; cursor:hand; font-weight:bold" onmouseover="richToolTip()" onmouseout="oPopup.hide()" >Custom ToolTips</span> enhance the web experience.
<br>
<br>
<br>
<br>
<DIV ID="oContextHTML" STYLE="display:none;">
<div style="position:absolute; top:0; left:0; overflow:scroll; overflow-x:hidden; width:300; height:100; scrollbar-base-color:#3366CC; border-bottom:2px solid black; SCROLLBAR-HIGHLIGHT-COLOR: #99CCFF; SCROLLBAR-ARROW-COLOR: white;" >
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#99ccff, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; filter:;">
<SPAN ONCLICK="parent.location.href='http://msdn.microsoft.com'">
Custom Drop-Down Item 1</SPAN>
</DIV>
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=yellowgreen, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
<SPAN ONCLICK="parent.location.href='http://search.microsoft.com'">
Custom Drop-Down Item 2</SPAN>
</DIV>
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
<SPAN ONCLICK="parent.location.href='http://search.microsoft.com'">
Custom Drop-Down Item 3</SPAN>
</DIV>
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=violet, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
<SPAN ONCLICK="parent.location.href='http://search.microsoft.com'">
Custom Drop-Down Item 4</SPAN>
</DIV>
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#99ccff, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
<SPAN ONCLICK="parent.location.href='http://search.microsoft.com'">
Custom Drop-Down Item 5</SPAN>
</DIV>
</div>
</DIV>
<DIV ID="oDialog" STYLE="display:none;">
<div id="myid" style="position:absolute; top:0; left:0; width:100%; height:100%; background:#cccccc; border:1px solid black; border-top:1px solid white; border-left:1px solid white; padding:10px; font:normal 10pt tahoma; padding-left:18px "> <b>Rich Message Boxes</b><hr size="1" style="border:1px solid black;"><div style="width:220px; font-family:tahoma; font-size:80%; line-height:1.5em"><br>
This message box is written entirely in Dynamic HTML (DHTML) using Cascading Style Sheets (CSS). You can dynamically change properties of this message box. For instance, click the button below to change the color of the popup object.
<br>
<br>
<br>
<button style="background:#cccccc" onclick="myid.style.backgroundColor='#3366CC';" tabindex="-1">Change Color</button>
</div>
<br>
<br>
<button tabindex="-1" onclick="parent.oPopup.hide();" style="border:1px solid black; border-left:1px solid white; border-top:1px solid white; background:#cccccc ">Close Message</button>
</DIV>
<div style="position: absolute; top:50; left:250px; width:125px; height:200px; border:1px solid black; border-bottom:1px solid white; border-right:1px solid white; font:normal 10pt tahoma; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF); padding:10px" >
<b>DHTML Content</b><hr size="1" style="border:1px solid black;">It's easy to put content in a custom message box
</div></div>
</DIV>
<DIV ID="oToolTip" STYLE="display:none;">
<div style="position: absolute; top:0; left:0; width:100%; height:100%; border:2px solid black; font:normal 10pt tahoma; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF); padding:10px" >
<b>Custom ToolTips</b><hr size="1" style="border:1px solid black;">Now you can create ToolTips that are enhanced by DHTML.
</div>
</DIV>
<DIV ID="oContext" STYLE="display:none;">
<div style="position: absolute; top:0; left:0; width:100%; height:100%; border:2px solid black; font:normal 10pt tahoma; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF); padding:10px" >
<b>Custom ToolTips</b><hr size="1" style="border:1px solid black;">Now you can create ToolTips that are enhanced by DHTML.
</div>
</DIV>
<DIV ID="oContext2" STYLE="display:none">
<DIV STYLE="position:relative; top:0; left:0; border:2px solid black; border-top:2px solid #cccccc; border-left:2px solid #cccccc; background:#666666; height:110px; width:207px;">
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.oIframe.location.href='iframe4popup.htm';">
<IMG SRC="img/home.gif" ALIGN="absmiddle"> Home</DIV>
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.oIframe.location.href='http://search.microsoft.com';">
<IMG SRC="img/search.gif" ALIGN="absmiddle"> Search</DIV>
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.oIframe.location.href='http://www.microsoft.com/ie';">
<IMG SRC="img/ielogo.gif" ALIGN="absmiddle"> Intenet Explorer</DIV>
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.oIframe.location.href='http://www.microsoft.com/info/cpyright.htm';">
©2001 Microsoft Corporation</DIV>
</DIV>
</body>
</html>
<head>
<title>Four Exciting Ways to Use the Popup Object</title>
<LINK REL="stylesheet" HREF="../../../samples.css" TYPE="text/css">
<script>
var oPopup = window.createPopup();
function richDropDown()
{
oPopup.document.body.innerHTML = oContextHTML.innerHTML;
oPopup.show(0, 28, 305, 100, dropdowno);
}
function richToolTip()
{
var lefter = event.offsetY+0;
var topper = event.offsetX+15;
oPopup.document.body.innerHTML = oToolTip.innerHTML;
oPopup.show(topper, lefter, 170, 120, ttip);
}
function richDialog()
{
oPopup.document.body.innerHTML = oDialog.innerHTML;
oPopup.show(100, 50, 400, 300);
}
function richContext()
{
var lefter2 = event.offsetY+0;
var topper2 = event.offsetX+15;
oPopup.document.body.innerHTML = oContext2.innerHTML;
oPopup.show(topper2, lefter2, 210, 88, contextobox);
}
</script>
</head>
<body>
<h1>Four Exciting Uses of the Popup Object</h1>
<BR>
<b style="margin-top:15px;">1. Custom Context Menus</b><br><br>
<div style="">Context menus are accessed by clicking the right mouse button. Usually this displays a default context menu. Now you can create a customized context menu with the popup object.</div>
<br>
<span id="contextobox" style=" cursor:hand; margin-left:5px; margin-right:10px; background:#e4e4e4; width:300; height:40; padding:20px;" oncontextmenu="richContext(); return false" >Right-click inside this box.</span>
<BR><BR>
<hr size="1">
<BR>
<b style="width:550px">2. Custom Menus</b>
<br>
<div style="">Creating custom menus is easy with the popup object. In the following example, the drop-down menu uses a gradient filter on each option and has a color scroll bar. Click the drop-down menu and then move the cursor over the options to see these effects.</div>
<br>
<div id="dropdowno" style="background:#3366CC; padding:5px; border-bottom:1px solid black; border-top:1px solid #99CCFF; font:bold 10pt tahoma; color:white; width:300px" ><span style="cursor:hand; margin-left:5px; margin-right:10px;" onmousedown="richDropDown()" >Click here for a custom drop-down <img src="../../../../graphics/UI_droparrow.gif" align="absmiddle" style=""></span></div>
<BR>
<hr size="1">
<b style="margin-top:15px; width:550px">3. Custom Message Boxes</b>
<br>
<div style="">All types of interactive message boxes can be easily created with the popup object. Click the button below.</div><br>
<Button style="cursor:hand; margin-left:5px; margin-right:10px;" onmousedown="richDialog()" > Click Me</button><br>
<BR>
<hr size="1">
<b style="margin-top:15px; width:550px">4. Custom ToolTips</b>
<br>
<div style="">Using the popup object, web pages can now have ToolTips that are as dynamic as the pages themselves. In the following example, the popup object's position depends on where the mouse pointer is when the ToolTip is activated. Move the cursor over the green text to display a ToolTip.</div><br>
Using <span id="ttip" style="width:120;color:green; cursor:hand; font-weight:bold" onmouseover="richToolTip()" onmouseout="oPopup.hide()" >Custom ToolTips</span> enhance the web experience.
<br>
<br>
<br>
<br>
<DIV ID="oContextHTML" STYLE="display:none;">
<div style="position:absolute; top:0; left:0; overflow:scroll; overflow-x:hidden; width:300; height:100; scrollbar-base-color:#3366CC; border-bottom:2px solid black; SCROLLBAR-HIGHLIGHT-COLOR: #99CCFF; SCROLLBAR-ARROW-COLOR: white;" >
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#99ccff, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; filter:;">
<SPAN ONCLICK="parent.location.href='http://msdn.microsoft.com'">
Custom Drop-Down Item 1</SPAN>
</DIV>
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=yellowgreen, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
<SPAN ONCLICK="parent.location.href='http://search.microsoft.com'">
Custom Drop-Down Item 2</SPAN>
</DIV>
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
<SPAN ONCLICK="parent.location.href='http://search.microsoft.com'">
Custom Drop-Down Item 3</SPAN>
</DIV>
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=violet, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
<SPAN ONCLICK="parent.location.href='http://search.microsoft.com'">
Custom Drop-Down Item 4</SPAN>
</DIV>
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#99ccff, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
<SPAN ONCLICK="parent.location.href='http://search.microsoft.com'">
Custom Drop-Down Item 5</SPAN>
</DIV>
</div>
</DIV>
<DIV ID="oDialog" STYLE="display:none;">
<div id="myid" style="position:absolute; top:0; left:0; width:100%; height:100%; background:#cccccc; border:1px solid black; border-top:1px solid white; border-left:1px solid white; padding:10px; font:normal 10pt tahoma; padding-left:18px "> <b>Rich Message Boxes</b><hr size="1" style="border:1px solid black;"><div style="width:220px; font-family:tahoma; font-size:80%; line-height:1.5em"><br>
This message box is written entirely in Dynamic HTML (DHTML) using Cascading Style Sheets (CSS). You can dynamically change properties of this message box. For instance, click the button below to change the color of the popup object.
<br>
<br>
<br>
<button style="background:#cccccc" onclick="myid.style.backgroundColor='#3366CC';" tabindex="-1">Change Color</button>
</div>
<br>
<br>
<button tabindex="-1" onclick="parent.oPopup.hide();" style="border:1px solid black; border-left:1px solid white; border-top:1px solid white; background:#cccccc ">Close Message</button>
</DIV>
<div style="position: absolute; top:50; left:250px; width:125px; height:200px; border:1px solid black; border-bottom:1px solid white; border-right:1px solid white; font:normal 10pt tahoma; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF); padding:10px" >
<b>DHTML Content</b><hr size="1" style="border:1px solid black;">It's easy to put content in a custom message box
</div></div>
</DIV>
<DIV ID="oToolTip" STYLE="display:none;">
<div style="position: absolute; top:0; left:0; width:100%; height:100%; border:2px solid black; font:normal 10pt tahoma; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF); padding:10px" >
<b>Custom ToolTips</b><hr size="1" style="border:1px solid black;">Now you can create ToolTips that are enhanced by DHTML.
</div>
</DIV>
<DIV ID="oContext" STYLE="display:none;">
<div style="position: absolute; top:0; left:0; width:100%; height:100%; border:2px solid black; font:normal 10pt tahoma; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF); padding:10px" >
<b>Custom ToolTips</b><hr size="1" style="border:1px solid black;">Now you can create ToolTips that are enhanced by DHTML.
</div>
</DIV>
<DIV ID="oContext2" STYLE="display:none">
<DIV STYLE="position:relative; top:0; left:0; border:2px solid black; border-top:2px solid #cccccc; border-left:2px solid #cccccc; background:#666666; height:110px; width:207px;">
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.oIframe.location.href='iframe4popup.htm';">
<IMG SRC="img/home.gif" ALIGN="absmiddle"> Home</DIV>
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.oIframe.location.href='http://search.microsoft.com';">
<IMG SRC="img/search.gif" ALIGN="absmiddle"> Search</DIV>
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.oIframe.location.href='http://www.microsoft.com/ie';">
<IMG SRC="img/ielogo.gif" ALIGN="absmiddle"> Intenet Explorer</DIV>
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.oIframe.location.href='http://www.microsoft.com/info/cpyright.htm';">
©2001 Microsoft Corporation</DIV>
</DIV>
</body>
</html>
댓글 0
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 18 | 스크롤바를 따라다니는 메뉴판 | 박상현 | 2003.12.04 | 1575 |
| 17 | 스크롤바를 따라다니는 이미지 | 박상현 | 2003.12.04 | 1684 |
| 16 | 이벤트 종류알기 및 좌표 읽기 | 박상현 | 2003.12.03 | 1989 |
| 15 | 문서크기에 맞게 아이프레임폭 자동으로 조정하기 | 박상현 | 2003.11.17 | 1928 |
| 14 | 목록에서 선택된 라인에만 색칠하고 다른것은 이전색으로 변경하기 | 박상현 | 2003.11.13 | 1705 |
| 13 | 목록에서 다중 선택된 항목을 표시(특정색상)하고 체크박스를 선택해주는 스크립트 | 박상현 | 2003.11.07 | 2837 |
| 12 | 여러가지의 색으로 롤오버 효과및 항목을 선택시 선택된 색을 고정시키는 예제 | 박상현 | 2003.11.07 | 2212 |
| 11 | event.keyCode의 숫자표 | 박상현 | 2003.10.20 | 1863 |
| 10 | jsp페이지에서 popup창의 depth에 따른 메인 복귀 방법 달리하기... | 박상현 | 2003.10.14 | 3496 |
| 9 | 색상표 | 박상현 | 2003.10.10 | 1771 |
| 8 | [javascript]textarea의 내용을 클립보드에 담아 처리하기 | 박상현 | 2003.10.09 | 3679 |
| 7 | 자바스크립트사용시 주의점 | 운영자 | 2003.10.06 | 1899 |
| 6 | excel로 자료 출력 | 운영자 | 2003.10.06 | 2387 |
| 5 | 테두리및 가로줄, 세로줄이 1px인 테이블 만들기 | 운영자 | 2003.10.01 | 2531 |
| 4 | table 외곽에 테두리만 1pixel로 만들기 | 운영자 | 2003.10.01 | 2249 |
| 3 | BB설명 | 운영자 | 2003.09.26 | 2159 |
| 2 | 창닫기 전에 물어보기 | 운영자 | 2003.09.26 | 2574 |
| » | popup창 띄우는 4가지 방법 | 운영자 | 2003.09.24 | 4004 |