зеркало из https://github.com/mozilla/pjs.git
140 строки
3.4 KiB
HTML
140 строки
3.4 KiB
HTML
<HTML>
|
|
<!-- Look in the function changeItem below for a good place
|
|
to test setting breakpoints and evaluating variables -->
|
|
<HEAD>
|
|
<TITLE>Layers Example</TITLE>
|
|
|
|
<SCRIPT>
|
|
|
|
// this function set the inital layer positions
|
|
function initLocations()
|
|
{
|
|
var layer_top = document.layers[0].top+document.layers[0].document.height;
|
|
|
|
document.layers["item1"].top = layer_top;
|
|
document.layers["item2"].top = layer_top;
|
|
document.layers["item3"].top = layer_top;
|
|
document.layers["item4"].top = layer_top;
|
|
}
|
|
// this function set the inital layer positions
|
|
// and shows layer 1
|
|
function init()
|
|
{
|
|
initLocations();
|
|
document.layers["item1"].visibility = "show";
|
|
}
|
|
|
|
// this function hides all the item layers
|
|
function hideAllitemLayers() {
|
|
document.layers["item1"].visibility = "hide";
|
|
document.layers["item2"].visibility = "hide";
|
|
document.layers["item3"].visibility = "hide";
|
|
document.layers["item4"].visibility = "hide";
|
|
}
|
|
|
|
|
|
// this function makes a single item layer visible
|
|
// We named the item layers so we
|
|
// can tell which one to show based on the
|
|
// selectedIndex of the menu plus one (see below)
|
|
function changeItem(n) {
|
|
|
|
hideAllitemLayers();
|
|
|
|
// We use "item" + (n + 1) to enable us to label
|
|
// the layers the same as their corresponding items
|
|
|
|
// Try placing a breakpoint (by clicking
|
|
// once in the left margin next to the following line
|
|
// and predicting the name of the layer to
|
|
// be displayed (select the text within the brackets:
|
|
// "item" + (n + 1)
|
|
// and right-click to add it to the console window)
|
|
document.layers["item" + (n + 1)].visibility = "inherit";
|
|
|
|
}
|
|
</SCRIPT>
|
|
</HEAD>
|
|
<BODY onload="init()" onresize="initLocations()">
|
|
|
|
<HR>
|
|
<H1 align="center">Welcome to the Layers Sample</H1>
|
|
<HR>
|
|
|
|
<P>
|
|
<!-- position the form layer -->
|
|
<! -- let the top value default to the natural position -->
|
|
|
|
<LAYER NAME="formlayer" LEFT=50 >
|
|
<H3>Select an item:</H3>
|
|
<FORM NAME=form1>
|
|
|
|
<SELECT name=menu1 onChange="changeItem(this.selectedIndex); return false;">
|
|
<OPTION SELECTED>Item1
|
|
<OPTION >Item2
|
|
<OPTION >Item3
|
|
<OPTION >Item4
|
|
|
|
</SELECT>
|
|
</FORM>
|
|
</LAYER>
|
|
|
|
|
|
<!-- We have four different layers -->
|
|
|
|
<!-- this layer is positioned layer below the form layer in the init function -->
|
|
<LAYER name="item1" LEFT=50
|
|
TOP=0
|
|
width=400 VISIBILITY="HIDE" BGCOLOR="#EEEEEE">
|
|
|
|
<HR>
|
|
<IMG src="images/item1.gif" align="LEFT" hspace=5 >
|
|
<H3 align="center">Item1</H3>
|
|
<BR>This is item 1
|
|
<BR CLEAR="ALL">
|
|
<HR>
|
|
|
|
</LAYER>
|
|
|
|
|
|
<LAYER name="item2" LEFT=50
|
|
TOP=0
|
|
width=400 VISIBILITY="HIDE" BGCOLOR="#DDDDDD">
|
|
|
|
<HR>
|
|
<IMG src="images/item2.gif" align="LEFT" hspace=5 >
|
|
<H3 align="center">Item2</H3>
|
|
<BR>This is item 2
|
|
<BR CLEAR="ALL">
|
|
<HR>
|
|
|
|
</LAYER>
|
|
|
|
<LAYER name="item3" LEFT=50
|
|
TOP=0
|
|
width=400 VISIBILITY="HIDE" BGCOLOR="#CCFFFF">
|
|
|
|
<HR>
|
|
<IMG src="images/item3.gif" align="LEFT" hspace=5>
|
|
<H3 align ="center">Item3</H3>
|
|
<BR>This is item 3
|
|
<BR CLEAR="ALL">
|
|
<HR>
|
|
|
|
</LAYER>
|
|
|
|
<LAYER name="item4" LEFT=50
|
|
TOP=0
|
|
width=400 VISIBILITY="HIDE" BGCOLOR="#FFCCCC">
|
|
<HR>
|
|
<IMG src="images/item4.gif" align="LEFT" hspace=5 >
|
|
<H3 align="center">Item4</H3>
|
|
<BR>This is item 4
|
|
<BR CLEAR="ALL">
|
|
<HR>
|
|
|
|
</LAYER>
|
|
</BODY>
|
|
</HTML>
|
|
|