JavaScript DHTML/Ajax Layer/Nested Layer — различия между версиями

Материал из Web эксперт
Перейти к: навигация, поиск
м (1 версия)
 
(нет различий)

Версия 09:58, 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 &lt;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>

Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ajax_Layer/Nested_Layer&oldid=1664»