JavaScript DHTML/Ajax Layer/Layer Anchor
Содержание
Layer anchor 2: set anchor position
<source lang="html4strict">
http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI Examples - DynLayer Anchor II</title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath("./dynapisrc/"); dynapi.library.include("dynapi.api"); </script> <script language="Javascript">
var parentLayer = dynapi.document.addChild(new DynLayer(null,200,10,50,50,"#999999"));
var greenLayer = parentLayer.addChild(new DynLayer(null,0,0,8,8,"green"));
greenLayer.setAnchor({right:0,bottom:0});
var redLayer = parentLayer.addChild(new DynLayer(null,0,0,8,8,"red"));
redLayer.setAnchor({top:0,left:0});
var blueLayer = parentLayer.addChild(new DynLayer(null,0,0,8,8,"blue"));
blueLayer.setAnchor({top:0,right:0});
var yellowLayer = parentLayer.addChild(new DynLayer(null,0,0,8,8,"yellow"));
yellowLayer.setAnchor({bottom:0,left:0});
dynapi.document.addChild(parentLayer);
</script>
</head>
<body>
| Green Layer <a href="#" onClick="greenLayer.setWidth(16)">set the green layer"s width to 16</a>the green layer"s height to 1</a> |
Red Layer <a href="#" onClick="redLayer.setWidth(16)">set the red layer"s width to 16</a>the red layer"s height to 1</a> |
| Blue Layer <a href="#" onClick="blueLayer.setWidth(16)">set the blue layer"s width to 16</a>the blue layer"s height to 1</a> |
Yellow Layer <a href="#" onClick="yellowLayer.setWidth(16)">set the yellow layer"s width to 16</a>the yellow layer"s height to 1</a> |
<script>
dynapi.document.insertAllChildren();
</script>
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Layer Anchor Demo
<source lang="html4strict">
http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI Examples - DynLayer Anchor</title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath("./dynapisrc/"); dynapi.library.include("dynapi.debug"); dynapi.library.include("dynapi.library"); dynapi.library.include("dynapi.api"); dynapi.library.include("DragEvent"); </script> <script language="Javascript"> var bb = new DynLayer(); bb.setBgColor("black"); bb.setAnchor({left:1,right:1,top:1,bottom:1}); var main = new DynLayer(); main.setBgColor("#999999"); main.setAnchor({left:1,right:1,top:1,bottom:1}); bb.addChild(main); var anchorlayer = new DynLayer(); anchorlayer.setBgColor("black"); anchorlayer.setSize(200,100); anchorlayer.setLocation(100,100); var nw = anchorlayer.addChild( new DynLayer() ); nw.setBgColor("yellow"); nw.setSize(15,15); nw.setAnchor({left:0,top:0}); var ne = anchorlayer.addChild( new DynLayer() ); ne.setBgColor("yellow"); ne.setSize(15,15); ne.setAnchor({right:0,top:0, bottom:0}); var sw = anchorlayer.addChild( new DynLayer() ); sw.setBgColor("yellow"); sw.setSize(15,15); sw.setAnchor({left:0,bottom:0}); var se = anchorlayer.addChild( new DynLayer() ); se.setBgColor("yellow"); se.setSize(15,15); se.setAnchor({right:0,bottom:0}); var n = anchorlayer.addChild( new DynLayer() ); n.setHeight(5); n.setBgColor("green"); n.setAnchor({left:20,top:5,right:20}); var s = anchorlayer.addChild( new DynLayer() ); s.setHeight(5); s.setBgColor("green"); s.setAnchor({left:20,bottom:5,right:20}); var e = anchorlayer.addChild( new DynLayer() ); e.setWidth(5); e.setBgColor("green"); e.setAnchor({right:5,top:20,bottom:20}); var w = anchorlayer.addChild( new DynLayer() ); w.setWidth(5); w.setBgColor("green"); w.setAnchor({left:5,top:20,bottom:20}); var cn = anchorlayer.addChild( new DynLayer() ); cn.setSize(20,10); cn.setBgColor("red"); cn.setAnchor({top:15,centerH:0}); var cn = anchorlayer.addChild( new DynLayer() ); cn.setSize(20,10); cn.setBgColor("red"); cn.setAnchor({top:15,centerH:0}); var cs = anchorlayer.addChild( new DynLayer() ); cs.setSize(20,10); cs.setBgColor("red"); cs.setAnchor({bottom:15,centerH:0}); var ce = anchorlayer.addChild( new DynLayer() ); ce.setSize(10,20); ce.setBgColor("red"); ce.setAnchor({right:15,centerV:0}); var cw = anchorlayer.addChild( new DynLayer() ); cw.setSize(10,20); cw.setBgColor("red"); cw.setAnchor({left:15,centerV:0}); var chv = anchorlayer.addChild( new DynLayer() ); chv.setSize(20,20); chv.setBgColor("blue"); chv.setAnchor({centerH:0,centerV:0});
var box = new DynLayer(); box.setBgColor("white"); box.setSize(100,100); box.setAnchor({right:10,bottom:10}); var bluesquare = new DynLayer(); bluesquare.setBgColor("blue"); bluesquare.setSize(10,10); bluesquare.setAnchor({left:0,top:0}); box.addChild(bluesquare); main.addChild(box); main.addChild(anchorlayer) dynapi.document.addChild(bb); dynapi.onLoad(init); function init() {
str = "// Try these tests:\n\n"+
"anchorlayer.setLocation(50,50);\n"+
"anchorlayer.setSize(300,200);\n"+
"//anchorlayer.setAnchor({left:0,right:0,top:0,bottom:0});\n\n"+
"bluesquare.setSize(10,10); // must reset size if it is no longer 10x10\n\n"+
"// Align:\n"+
"bluesquare.setAnchor({right:0,bottom:0});\n"+
"//bluesquare.setAnchor({right:0,top:0});\n"+
"//bluesquare.setAnchor({left:0,top:0});\n"+
"//bluesquare.setAnchor({left:0,bottom:0});\n"+
"// Strech:\n"+
"//bluesquare.setAnchor({left:0,right:0,bottom:0});\n"+
"//bluesquare.setAnchor({left:0,right:0,top:0});\n"+
"//bluesquare.setAnchor({left:0,top:0,bottom:0});\n"+
"//bluesquare.setAnchor({right:0,top:0,bottom:0});\n"+
"// Center:\n"+
"//bluesquare.setAnchor({centerV:0,centerH:0});\n";
dynapi.debug.setEvaluate(str);
} </script> </head> <body bgcolor="white"> <script> dynapi.document.insertAllChildren(); </script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Layer Anchoring and Docking
<source lang="html4strict">
http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI Examples - DynLayer Anchor - Anchoring</title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath("./dynapisrc/"); dynapi.library.include("dynapi.api"); </script> <script language="Javascript"> cnt=0; w = new DynLayer(" ",-10,-10,20,18); // use negative x,y to hide layer during ns4 resize (or reload) w.setAnchor({topA:"c",leftA:"c",stretchH:120,stretchV:28}); w.__a=w.addChild(new DynLayer(null,null,null,null,null,"#000000")); w.__b=w.addChild(new DynLayer(null,null,null,null,null,"#000000")); w.__c=w.addChild(new DynLayer(null,null,null,null,null,"#000000")); w.__d=w.addChild(new DynLayer(null,null,null,null,null,"#000000")); w.__a.setAnchor({stretchH:"100%",stretchV:2,top:0}) w.__b.setAnchor({stretchH:2,stretchV:"100%",right:0}) w.__c.setAnchor({stretchH:"100%",stretchV:2,bottom:0}) w.__d.setAnchor({stretchH:2,stretchV:"100%",left:0}) window.setTimeout("setColor()",200); dynapi.document.addChild(w); function setColor() {
var color="#ffcc00";
cnt++
if (cnt>4)cnt=1;
if(cnt==1) w.__a.setBgColor(color);
else w.__a.setBgColor("#000000");
if(cnt==2) w.__b.setBgColor(color);
else w.__b.setBgColor("#000000");
if(cnt==3) w.__c.setBgColor(color);
else w.__c.setBgColor("#000000");
if(cnt==4) w.__d.setBgColor(color);
else w.__d.setBgColor("#000000");
window.setTimeout("setColor()",300);
} function setAnchor(t){
if(t=="a") w.setAnchor({topA:"a",leftA:"a",stretchH:90,stretchV:18});
if(t=="b") w.setAnchor({topA:"b",leftA:"b",stretchH:100,stretchV:18});
if(t=="c") w.setAnchor({topA:"c",leftA:"c",stretchH:120,stretchV:28});
if(t=="d") w.setAnchor({topA:"d",leftA:"d",stretchH:120,stretchV:35});
if(t=="e") w.setAnchor({topA:"e",leftA:"e",stretchH:80,stretchV:18});
if(t=="f") w.setAnchor({topA:"f1",leftA:"f1",bottomA:"f3",rightA:"f2",stretchH:"*",stretchV:"*"});
} </script> </head> <body bgcolor="#FFFFFF"> <script> dynapi.document.insertAllChildren(); </script>
Anchoring/Docking
Change Anchor
Location <a href="javascript:setAnchor("a")">Anchor A</a> <a href="javascript:setAnchor("b")">Anchor B</a> <a href="javascript:setAnchor("c")">Anchor C</a> <a href="javascript:setAnchor("d")">Anchor D</a> <a href="javascript:setAnchor("e")">Anchor E</a> <a href="javascript:setAnchor("f")">Anchor F</a> Resize the browser to see the changes
<p align="center">
topA |
<p>A example of an anchor
: <a name="myname"
id="myname"> </a>
<p>Some text here,
some more text here some text here, some more text here. some more text here
some text here, some more text here.
<a id="a" name="a">AnchorHere</a>
some more text here some text here, some more text here. some more text
here some text here, some more text here. some more text here some text
here, some more text here.
<a id="b" name="b">AnchorHere</a><p>And more text here some text here, some
more text here. some more text here some text here, some more text here.
some more text here some text here, some more text here. some more text
here some text here, some more text here. some more text here some text here, some more text here.
some more text here
<a id="c" name="c">MoreText</a> some text here, some more text here.some more text here some text here, some more text here.some more text here some text here, some more text here.some more text here some text here, some more text here.some more text here some text here, some more text here.some more text here some text here, some more text here.some more text here some text here, some more text here. |
|||||||||||||
|
||||||||||||||
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Layer Anchor - Stretching: Resize your browser to stretch the layers below
<source lang="html4strict">
http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI Examples - DynLayer Anchor - Stretching</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"); </script> <script language="Javascript"> var back=new DynLayer(null,null,null,null,null,"#eeeeee"); back.setAnchor({left:"10%",top:"10%",stretchH:"80%",stretchV:"80%"}) var nw = back.addChild(new DynLayer(null,null,null,null,null,"blue")) nw.setAnchor({left:"1%",top:"1%",stretchH:"5%",stretchV:"5%"}); var ne = back.addChild(new DynLayer(null,null,null,null,null,"blue")) ne.setAnchor({right:"1%",top:"1%",stretchH:"5%",stretchV:"5%"}); var se = back.addChild(new DynLayer(null,null,null,null,null,"blue")) se.setAnchor({right:"1%",bottom:"1%",stretchH:"5%",stretchV:"5%"}); var sw = back.addChild(new DynLayer(null,null,null,null,null,"blue")) sw.setAnchor({left:"1%",bottom:"1%",stretchH:"5%",stretchV:"5%"}); var b1 = back.addChild(new DynLayer(null,null,null,null,null,"yellow")) b1.setAnchor({left:"20%",top:"40%",stretchH:"15%",stretchV:"40%"}); var b2 = back.addChild(new DynLayer(null,null,null,null,null,"red")) b2.setAnchor({left:"36%",top:"30%",stretchH:"15%",stretchV:"50%"}); var b3 = back.addChild(new DynLayer(null,null,null,null,null,"navy")) b3.setAnchor({left:"52%",top:"20%",stretchH:"15%",stretchV:"60%"}); var b4 = back.addChild(new DynLayer(null,null,null,null,null,"lime")) b4.setAnchor({left:"68%",top:"10%",stretchH:"15%",stretchV:"70%"}); var b5 = back.addChild(new DynLayer(null,null,null,null,null,"black")) b5.setAnchor({left:"15%",top:"81%",stretchH:"75%",stretchV:1}); dynapi.document.addChild(back); </script> </head> <body bgcolor="white"> Resize your browser to stretch the layers below: <script> dynapi.document.insertAllChildren(); </script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
