[转]Using the Popup Object
The popup object enables you to create window objects that take full advantage of Dynamic HTML (DHTML). Click the Show Me button to see some of the exciting things that can be done using a popup. This article first outlines the important features of the popup object. Several of these features and the basic syntax to use with the popup object will then be demonstrated. Alternatives to the popup will be explored in the last section.
FeaturesBelow is a list of important features of the popup object. Many of these features make the popup object useful for creating custom menus and displaying quick reference information.
Syntax and FocusThe popup object is created by the createPopup method, displayed by the show method, and closed by the hide method. The following example shows how to use the basic syntax. It also shows how a user can type inside a text box while a popup is displayed because the popup object never has focus. Note For simplicity, the code for formatting has been omitted from some of the examples in this article. To view all of the code, view the source code inside of the Show Me examples.
Show Example Note Because the popup object never takes focus, focus related events such as onfocus and onblur are not applicable to the popup object.
Popup Glossary DefinitionsYou can use the popup object when you want to display quick reference information in an unobtrusive manner. The popup object closes when the user clicks away from it so the user can click on one popup object after another and then on the parent window without having to close numerous windows. This feature enables the popup object to act like a typical drop-down menu or a popup glossary definition. The following example shows how to use the popup object to create glossary definitions. Hide Example <HTML>
<HEAD>
<TITLE>Popup Glossary Definition Sample</TITLE>
<SCRIPT LANGUAGE="JScript">
var oPopup = window.createPopup();
function fnDef()
{
if (event.srcElement.id == "brasshat")
oPopup.document.body.innerHTML = oBrassHat.innerHTML;
else if (event.srcElement.id == "entrechat")
oPopup.document.body.innerHTML = oEntrechat.innerHTML;
var popupBody = oPopup.document.body;
// The following popup object is used only to detect what height the
// displayed popup object should be using the scrollHeight property.
// This is important because the size of the popup object varies
// depending on the length of the definition text. This first
// popup object is not seen by the user.
oPopup.show(0, 0, 300, 0);
var realHeight = popupBody.scrollHeight;
// Hides the dimension detector popup object.
oPopup.hide();
// Shows the actual popup object with correct height.
oPopup.show(0, 15, 300, realHeight, event.srcElement);
}
</SCRIPT>
</HEAD>
<BODY>
The <SPAN ID="brasshat" onclick="fnDef();">brass hat</SPAN>
was impressed by the grace of the dancer's
<SPAN ID="entrechat" onclick="fnDef();">entrechat</SPAN>.
<!-- Nested DIVS inside this hidden DIV store the code that populates the
popup object. -->
<DIV STYLE="display:none;">
<DIV ID="oBrassHat">
<DIV>
<B>brass hat:</B><BR>
A high-ranking official.
</DIV>
</DIV>
<DIV ID="oEntrechat">
<DIV>
<B>entrechat:</B><BR>
A jump in ballet during which the dancer crosses the legs a
number of times, alternatively back and forth.
</DIV>
</DIV>
</DIV>
</BODY>
</HTML>
Storing Popup Code in a Separate DocumentIn the preceding example, the HTML that populates the popup object is stored in a hidden div inside the document itself. The popup object can also access code from another document. You can treat this separate document as a normal HTML document. This is advantageous when you use imported style sheets, style blocks, and script tags for reasons including that the popup object is separate from the parent window and elements like style blocks in the parent are not available to the popup object. The following example shows how to populate a popup object by accessing DHTML from another document using the default download behavior. It also demonstrates how popup objects are useful for menu applications. With a popup object, it is easy to click one menu-activating element after another. The previous menu automatically closes when the next one opens because only one popup object can be open at a time. Hide Example <HTML>
<HEAD>
<TITLE>Popup Parent</TITLE>
</HEAD>
<BODY BGCOLOR=lightyellow>
<!-- The DOWNLOAD element is user-defined and used only to associate the
download default behavior with an identifier that is then associated with the
startDownload method later in the script. -->
<DOWNLOAD ID=dwn STYLE="behavior:url(#default#download)" />
<SCRIPT>
// Code file contents are passed to this function after it is downloaded.
function onDone(src){
oPopup.document.write(src);
}
function showPopup(){
oPopup.show(0, 0, 220, 30, editbutton);
}
var oPopup = window.createPopup();
// startDownload is a member of the download default behavior.
// The callback function pointer (second parameter) specifies a
// function. When a file downloads successfully, the file contents
// are passed as the parameter to onDone().
dwn.startDownload("PopupHTML.htm",onDone);
</SCRIPT>
My Favorite Weather is:
<INPUT ID="inputid" TYPE="text" VALUE="Rain">
<INPUT ID="editbutton" TYPE="Button" onclick="showPopup();" VALUE="Edit">
</BODY>
</HTML>
The following document contains the DHTML that populates the popup window. Hide Example <HTML>
<HEAD>
<TITLE>Popup Window</TITLE>
<SCRIPT LANGUAGE="JScript" >
// "inputid" identifies the text box in the parent window where popup
// input is displayed. The parent window is accessed from the popup by
// the "parent" property.
function clickPopup(){
if (event.srcElement.tagName == "IMG"){
parent.inputid.innerText = event.srcElement.id;
parent.oPopup.hide();
}
}
</SCRIPT>
</HEAD>
<BODY onclick="clickPopup();" style="border:solid 1;
background-color:darkblue; overflow:hidden; margin-top:2px; margin-right:2px;
margin-left: 2px; margin-bottom:2px">
<IMG src="Sunny.gif" id="Sunny">
<IMG src="Partly Cloudy.gif" id="Partly Cloudy">
<IMG src="Mostly Cloudy.gif" id="Mostly Cloudy">
<IMG src="Cloudy.gif" id="Cloudy">
<IMG src="Rain.gif" id="Rain">
<IMG src="Snow.gif" id="Snow">
</BODY>
</HTML>
Popup Navigation MenusAnother application of the popup object is custom browser navigation menus that render a URL in the parent window. The following example shows how to make custom navigation menus (activated by right-clicking the document) using the popup object. Hide Example <HTML>
<HEAD>
<TITLE>Popup Custom Navigation Menu Sample</TITLE>
<SCRIPT LANGUAGE="JScript">
var oPopup = window.createPopup();
function contextMenu()
{
// The variables "lefter" and "topper" store the X and Y coordinates
// to use as parameter values for the following show method. In this
// way, the popup displays near the location the user clicks.
var lefter = event.offsetX+10;
var topper = event.offsetY+10;
oPopup.document.body.innerHTML = oContextHTML.innerHTML;
oPopup.show(lefter, topper, 200, 65, document.body);
}
</SCRIPT>
</HEAD>
<BODY oncontextmenu="contextMenu(); return false;">
<h1>Creating Custom Context Menus with the Popup Object</h1>
Right-click anywhere on the document to see a customized popup navigation
menu.
<DIV ID="oContextHTML" STYLE="display:none;">
<DIV onmouseover="this.style.background='gold';"
onmouseout="this.style.background='#e4e4e4';">
<SPAN onclick="parent.location.href='http://msdn.microsoft.com'">
MSDN Web Workshop</SPAN>
</DIV>
<DIV onmouseover="this.style.background='gold'"
onmouseout="this.style.background='#e4e4e4'"
<SPAN onclick="parent.location.href='http://search.microsoft.com'">
Search</SPAN>
</DIV>
</DIV>
</BODY>
</HTML>
Alternatives to the Popup ObjectToolTips and dialog boxes are similar to popup objects and can be used for similar applications. However, there are a number of key differences which are discussed below. Popup Object vs. Dialog BoxesThe most important differences between popup objects and dialog boxes are the following:
For more information about dialog boxes and the many uses for dialog boxes, see The Importance of Good Dialog. Popup Object vs. ToolTipsYou can create applications similar to the glossary definition example earlier in this article using ToolTips created by the TITLE attribute or the ToolTip behavior. However, a ToolTip does not support full DHTML and does not have the flexibility of popup objects. ToolTips also close when the pointer moves away from the element that contains the ToolTip or after a time period if the cursor does not keep moving over the element. On the other hand, ToolTips are often simpler to use and can require less code. Also noteworthy is that ToolTips will automatically close when a popup is opened. Related Topics
|
