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.
Show Me
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 <HTML>
<HEAD>
<TITLE>Basic Popup Example</TITLE>
<SCRIPT LANGUAGE="JScript">
var oPopup = window.createPopup();
function openPopup()
{
var oPopBody = oPopup.document.body;
oPopBody.innerHTML = "<DIV>This is a popup.</DIV>"
oPopup.show(15, 150, 50, 50, document.body);
}
</SCRIPT>
</HEAD>
<BODY>
<TEXTAREA οnclick="openPopup();" ROWS="6" COLS="30" WRAP STYLE="width:100%">
Click in here to open a popup object.</TEXTAREA>
</BODY>
</HTML>
Show Me
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;
oPopup.show(0, 0, 300, 0);
var realHeight = popupBody.scrollHeight;
oPopup.hide();
oPopup.show(0, 15, 300, realHeight, event.srcElement);
}
</SCRIPT>
</HEAD>
<BODY>
The <SPAN ID="brasshat" οnclick="fnDef();">brass hat</SPAN>
was impressed by the grace of the dancer's
<SPAN ID="entrechat" οnclick="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>
Show Me
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>
function onDone(src){
oPopup.document.write(src);
}
function showPopup(){
oPopup.show(0, 0, 220, 30, editbutton);
}
var oPopup = window.createPopup();
dwn.startDownload("PopupHTML.htm",onDone);
</SCRIPT>
My Favorite Weather is:
<INPUT ID="inputid" TYPE="text" VALUE="Rain">
<INPUT ID="editbutton" TYPE="Button" οnclick="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" >
function clickPopup(){
if (event.srcElement.tagName == "IMG"){
parent.inputid.innerText = event.srcElement.id;
parent.oPopup.hide();
}
}
</SCRIPT>
</HEAD>
<BODY οnclick="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>
Show Me
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()
{
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 οncοntextmenu="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 οnmοuseοver="this.style.background='gold';"
οnmοuseοut="this.style.background='#e4e4e4';">
<SPAN οnclick="parent.location.href='http://msdn.microsoft.com'">
MSDN Web Workshop</SPAN>
</DIV>
<DIV οnmοuseοver="this.style.background='gold'"
οnmοuseοut="this.style.background='#e4e4e4'"
<SPAN οnclick="parent.location.href='http://search.microsoft.com'">
Search</SPAN>
</DIV>
</DIV>
</BODY>
</HTML>
Show Me
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 |
转载于:https://www.cnblogs.com/Elong/archive/2005/07/25/199505.html
扫一扫
146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
