JavaScript DHTML/Ajax Layer/Layer Anchor
Версия от 09:58, 26 мая 2010; (обсуждение)
Содержание
Layer anchor 2: set anchor position
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>
<br>
<Br>
<table width="100%" border="0">
<tr>
<td>Green Layer <br> <a href="#" onClick="greenLayer.setWidth(16)">set the
green layer"s width to 16</a><br> <a href="#" onClick="greenLayer.setWidth(8)">set
the green layer"s width to 8</a><br> <a href="#" onClick="greenLayer.setWidth(1)">set
the green layer"s width to 1</a><br> <a href="#" onClick="greenLayer.setHeight(16)">set
the green layer"s height to 16</a><br> <a href="#" onClick="greenLayer.setHeight(8)">set
the green layer"s height to 8</a><br> <a href="#" onClick="greenLayer.setHeight(1)">set
the green layer"s height to 1</a> </td>
<td>Red Layer <br> <a href="#" onClick="redLayer.setWidth(16)">set the red
layer"s width to 16</a><br> <a href="#" onClick="redLayer.setWidth(8)">set
the red layer"s width to 8</a><br> <a href="#" onClick="redLayer.setWidth(1)">set
the red layer"s width to 1</a><br> <a href="#" onClick="redLayer.setHeight(16)">set
the red layer"s height to 16</a><br> <a href="#" onClick="redLayer.setHeight(8)">set
the red layer"s height to 8</a><br> <a href="#" onClick="redLayer.setHeight(1)">set
the red layer"s height to 1</a></td>
</tr>
<tr>
<td>Blue Layer <br> <a href="#" onClick="blueLayer.setWidth(16)">set the blue
layer"s width to 16</a><br> <a href="#" onClick="blueLayer.setWidth(8)">set
the blue layer"s width to 8</a><br> <a href="#" onClick="blueLayer.setWidth(1)">set
the blue layer"s width to 1</a><br> <a href="#" onClick="blueLayer.setHeight(16)">set
the blue layer"s height to 16</a><br> <a href="#" onClick="blueLayer.setHeight(8)">set
the blue layer"s height to 8</a><br> <a href="#" onClick="blueLayer.setHeight(1)">set
the blue layer"s height to 1</a></td>
<td>Yellow Layer <br> <a href="#" onClick="yellowLayer.setWidth(16)">set the
yellow layer"s width to 16</a><br> <a href="#" onClick="yellowLayer.setWidth(8)">set
the yellow layer"s width to 8</a><br> <a href="#" onClick="yellowLayer.setWidth(1)">set
the yellow layer"s width to 1</a><br> <a href="#" onClick="yellowLayer.setHeight(16)">set
the yellow layer"s height to 16</a><br> <a href="#" onClick="yellowLayer.setHeight(8)">set
the yellow layer"s height to 8</a><br> <a href="#" onClick="yellowLayer.setHeight(1)">set
the yellow layer"s height to 1</a></td>
</tr>
</table>
<Br>
<Br>
<Br>
<Br>
<Br>
<Br>
<Br>
<script>
dynapi.document.insertAllChildren();
</script>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Layer Anchor Demo
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>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Layer Anchoring and Docking
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>
<p align="center"><b><u><font face="Arial" size="4"> Anchoring/Docking</font></u></b></p>
<table border="1" width="100%">
<tr>
<td width="16%" valign="top" align="center" rowspan="2"><font face="Arial" size="2"><b>Change Anchor
Location</b><br>
<br>
<a href="javascript:setAnchor("a")">Anchor A</a><br>
<a href="javascript:setAnchor("b")">Anchor B</a><br>
<a href="javascript:setAnchor("c")">Anchor C</a><br>
<a href="javascript:setAnchor("d")">Anchor D</a><br>
<a href="javascript:setAnchor("e")">Anchor E</a><br>
<a href="javascript:setAnchor("f")">Anchor F</a></font>
<p><font face="Arial" size="2"> Resize the browser to see the changes</font>
<p align="center"><font face="Arial" size="2" color="#000080">
topA<br>
rightA<br>
bottomA<br>
leftA<br>
</font></td>
<td width="84%" valign="top">
<p><font face="Arial" size="2">A example of an anchor
:</font> <font face="Arial" size="2"><a name="myname"
id="myname">&nbsp;</a></font>
<p><font face="Arial" size="2">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.<font color="#008000"> </font> </font>
<a id="a" name="a"><font color="#000080" size="3" face="Arial">AnchorHere</font></a>
<font face="Arial" size="2">
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. </font>
<a id="b" name="b"><font color="#000080" face="Arial" size="3"><b>AnchorHere</b></font></a><p><font face="Arial" size="2">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.
</font>some more text here </p>
<p align="center"><b><font size="5"><a id="c" name="c">MoreText</a></font></b></p>
<p><font face="Arial" size="2"> 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.</font></p>
</td>
</tr>
<tr>
<td width="84%" valign="top">
<table border="0" width="100%">
<tr>
<td width="50%" valign="top" colspan="2">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
<table border="0" width="100%" cellspacing="1">
<tr>
<td width="100%" valign="top">
<p align="center"><b><font size="6"><a id="d" name="d">Testing</a></font></b>
</p>
<p>
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</p>
</td>
</tr>
</table>
<p> 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..</p>
</td>
<td width="50%" valign="top" rowspan="3">some more text here some text here, some
more text here.some more text here some text here, some more text
here.
<p align="center"><a name="e" id="e"><font size="3" face="Arial" color="#000080">Anchor_here</font></a></p>
<p>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.
<p>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.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.</p>
</td>
</tr>
<tr>
<td width="156" valign="top">some more text here some text here, some
more text here.</td>
<td width="155" valign="middle" align="center">
<table border="0" width="100%" height="100%">
<tr>
<td width="50%"><a id="f1" name="f1">1</a></td>
<td width="50%" align="right"><a id="f2" name="f2">2</a></td>
</tr>
<tr>
<td width="50%" valign="bottom"> </td>
<td width="50%" align="right" valign="bottom"> </td>
</tr>
<tr>
<td width="50%" valign="bottom"> </td>
<td width="50%" align="right" valign="bottom"><a id="f3" name="f3">3</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="311" valign="top" colspan="2">some more text here some text
here, some more text here.some more text here some text here, some
more text here.</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<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
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">
<b>Resize your browser to stretch the layers below:</b>
<script>
dynapi.document.insertAllChildren();
</script>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
