JavaScript DHTML/Ajax Layer/Nested Layer — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
Admin (обсуждение | вклад) м (1 версия) |
(нет различий)
| |
Текущая версия на 07:15, 26 мая 2010
Dynlayers are nested 10 deep
<html>
<head>
<title>Return false test</title>
<style>
.testClass{
color: red;
}
</style>
<script language="Javascript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.include("dynapi.debug");
dynapi.library.include("dynapi.api");
dynapi.library.include("DragEvent");
</script>
<script language="Javascript">
myHtml="<a style="color:green;" href="http://www.cnn.ru" onclick="alert(\"hi\");return false;">Return false</a><br /><a class="testClass" href="http://www.cnn.ru" onclick="alert(\"hi\");return true;">Return true</a>"
function make10(){
myLayers=[]
myLayers[0] = new DynLayer(myHtml,100,200,500,500,"#AA0000")
for(i=1;i<11;i++){
c="#BB"+(i-1)+"A"+(i-1)+"A"
myLayers[i] = new DynLayer(myHtml,30,40,500,500,c)
myLayers[i-1].addChild(myLayers[i])
if(i==10)dynapi.document.addChild(myLayers[0])
}
for(i=0;i<11;i++){
DragEvent.enableDragEvents(myLayers[i])
}
}
</script>
</head>
<body >
<a class="testClass" href="#" onclick="make10()">make 10 nested layers</a><br />
<b>Issue</b><br />
This is a test where Dynlayers are nested 10 deep, and each one contains one link with:<br />
style="color="green""<br />
and one with:
class="testClass"<br />
"testClass" has been defined in the <style> tags at the top of the page.<br /><br />
This would mainly affect NS4.<br />
P.s. Only te second link should navigate to CNN each time.
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Panel Stacker in JavaScript
<html>
<head>
<style>
BODY
{
FONT-SIZE: 10px;
COLOR: white;
FONT-FAMILY: Verdana;
TEXT-DECORATION: none
}
.csscontent
{
BACKGROUND-COLOR: #326597;
BORDER-RIGHT: #000000 1px solid;
BORDER-LEFT: #000000 1px solid;
BORDER-BOTTOM: #000000 1px solid;
FONT-SIZE: 10px;
FONT-FAMILY: Verdana;
TEXT-DECORATION: none
}
.cssmenu
{
BACKGROUND-COLOR: #30557A;
BORDER-TOP: #000000 1px solid;
BORDER-RIGHT: #000000 1px solid;
BORDER-LEFT: #000000 1px solid;
BORDER-BOTTOM: #000000 1px solid;
FONT-SIZE: 10px;
FONT-FAMILY: Verdana;
TEXT-DECORATION: none
}
td
{
FONT-SIZE: 10px;
FONT-FAMILY: Verdana;
TEXT-DECORATION: none
}
</style>
<title>DynAPI Examples - PanelBar & Stacker</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.include("dynapi.library");
dynapi.library.include("dynapi.api");
dynapi.library.include("dynapi.gui.PanelBar");
dynapi.library.include("dynapi.gui.Stacker");
dynapi.library.include("dynapi.functions.Image");
dynapi.library.include("DragEvent");
</script>
<script language="JavaScript">
f=dynapi.functions;
var imgmin=f.getImage("./dynapiexamples/images/win_min.gif",15,16);
var imgmax=f.getImage("./dynapiexamples/images/win_max.gif",15,16);
var lyrMenu = new DynLayer();
lyrMenu.setClass ("cssmenu");
lyrMenu.setHTML("<table width=100% border=0 ceppadding=0 cellspacing=0><tr><td>My Menu #1</td><td align=right>{@min}</td></tr></table>")
var lyrContent = new DynLayer("This PanelBar and the two under are in the stacker, the stacker reacts on sizechanges and moves the layers when the size changes.");
lyrContent.setClass ("csscontent");
var lyrPanelBar = new PanelBar(lyrMenu,lyrContent,20,50,50,200,100,false);
lyrPanelBar.setMinMaxImg(imgmin,imgmax);
var lyrMenu1 = new DynLayer();
lyrMenu.setClass ("cssmenu");
lyrMenu1.setClass ("cssmenu");
lyrMenu1.setHTML("<table width=100% border=0 ceppadding=0 cellspacing=0><tr><td>My Menu #2</td><td align=right>{@min}</td></tr></table>")
var lyrContent1 = new DynLayer("This PanelBar has been created using a layer for the menu and one for the content.");
lyrContent1.setClass ("csscontent");
var lyrPanelBar1 = new PanelBar(lyrMenu1,lyrContent1,20,250,50,200,100,true);
lyrPanelBar1.setMinMaxImg(imgmin,imgmax);
// Create a PanelBar with HTML instead of layers
var lyrPanelBar2 = new PanelBar(
"<table width=100% border=0 ceppadding=0 cellspacing=0><tr><td>My Menu #3</td><td align=right>{@min}</td></tr></table>",
"This PanelBar has been created using simply html-text instead of two layers.",
20,250,50,200,100,false);
lyrPanelBar2.setMinMaxImg(imgmin,imgmax);
// Manipulate the menu- and contentlayer
lyrPanelBar2.getContentLayer().setClass ("csscontent");
lyrPanelBar2.getMenuLayer().setClass ("cssmenu");
// Just test the empty constructor
// This is important for subclassing
var constructorTest = new PanelBar();
dynapi.document.addChild(lyrPanelBar);
dynapi.document.addChild(lyrPanelBar1);
dynapi.document.addChild(lyrPanelBar2);
var objStacker = new Stacker()
objStacker.add(lyrPanelBar);
objStacker.add(lyrPanelBar1);
objStacker.add(lyrPanelBar2);
</script>
</head>
<body>
<script>
dynapi.document.insertAllChildren();
</script>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Relative Layers : Nested layers example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--
// RelativeLayers 0.9.7
//
// $Id: example3.html 1.7 04/02/02 21:22:32+01:00 gbevin@willow.uwyn.office $
//
// Library for creating dynamic designs that adapt themselves to the user"s
// browser environment.
//
// Copyright (C) 1998-2004, Geert Bevin
// Distributed under the terms of the GNU Lesser General Public, v2.1 or later
//
// gbevin[remove] at uwyn dot com
// http://www.uwyn.ru/projects/relativelayers
-->
<HTML>
<HEAD>
<TITLE>Relative Layers : Nested layers example</TITLE>
<SCRIPT LANGUAGE="JavaScript" SRC="rl_error_stripped.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="rl_browser_stripped.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_utility_stripped.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_window_stripped.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_layer_stripped.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
layer1 = new RelativeLayer(
"layer1Div", "", "",
"80%","100%",LEFT,"50%",TOP,"50%","0","0",
"100%","100%",LEFT,"50%",TOP,"50%","0","0",
"#dddddd");
layer1.setVisible(true);
layer2 = new RelativeLayer(
"layer2Div", "", "",
"100%","60%",LEFT,"50%",TOP,"50%","0","0",
"100%","100%",LEFT,"50%",TOP,"50%","0","0",
"#ff6666");
layer2.setVisible(true);
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#2F4078">
<DIV ID="layer1Div">
This is the parent layer.<BR>
<DIV ID="layer2Div">
This is the child layer.<BR>
</DIV>
</DIV>
</BODY>
</HTML>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/relativelayers-0.9.7.zip">relativelayers-0.9.7.zip( 74 k)</a>
