JavaScript DHTML/Ajax Layer/Layer Creation
Содержание
Generate and destroy layers
<source lang="html4strict">
http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI - DynLayer Destroy</title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath("./dynapisrc/"); dynapi.library.include("dynapi.api"); dynapi.library.include("dynapi.functions"); </script> <script language="Javascript"> dynapi.onLoad(init); function init() {
document.countform.counttext.value = 0;
}; var counter = 0; function generate(n) {
for (var i=0;i<n;i++) {
var d = new DynLayer();
d.setBgColor(dynapi.functions.getRandomColor());
d.setSize(10+80*Math.random(),10+80*Math.random());
d.setLocation(130+500*Math.random(),500*Math.random());
dynapi.document.addChild(d);
counter++;
document.countform.counttext.value = counter;
}
} var timer; function start() {
timer = setInterval("generate(10)",1);
} function stop() {
clearInterval(timer);
} function destroyAll() {
dynapi.document.destroyAllChildren(); document.countform.counttext.value = 0;
} </script> </head> <body bgcolor="#999999">
<a href="javascript:start()">Start generation</a>
<a href="javascript:stop()">Stop generation</a>
<a href="javascript:destroyAll()">Destroy all</a>
<form name="countform">
<input type=text name="counttext" size=5>
</form>
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Layer Create/Remove/Delete
<source lang="html4strict">
http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999
<html>
<head>
<title>DynAPI - DynLayer Create/Remove/Delete</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">
w = new DynLayer();
w.setBgColor("white");
w.setSize(130,130);
w.setLocation(250,50);
b = new DynLayer();
b.setBgColor("black");
b.setSize(100,100);
b.setLocation(400,50);
r = new DynLayer();
r.setBgColor("red");
r.setSize(50,50);
dynapi.document.addChild(w);
dynapi.document.addChild(b);
</script>
</head>
<body bgcolor="#999999">
<p>This is not working, and will be fixed in a next release:
<p>R: add to <a href="javascript://" onClick="w.addChild(r)">W</a>, <a href="javascript://" onClick="b.addChild(r)">B</a>
R: remove from <a href="javascript://" onClick="r.removeFromParent()">[parent]</a>, <a href="javascript://" onClick="w.removeChild(r)">W</a>, <a href="javascript://" onClick="b.removeChild(r)">B</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 Inline
<source lang="html4strict">
http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI Examples - DynLayer [Inline]</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.debug"); dynapi.library.include("dynapi.api"); dynapi.library.include("dynapi.api.ext.DynLayerInline"); </script> <script language="Javascript"> var mylayer, mychild, mygrandchild ; dynapi.onLoad(init); function init() {
mylayer = DynLayer.getInline("mylayer");
mychild = DynLayer.getInline("mychild", mylayer);
// new method
mygrandchild = new DynLayer(); // create layer
mygrandchild.setID("mygrandchild",true); // set inline id
mychild.addChild(mygrandchild); //make sure to add the child to it"s parent!
var el = {
onmousedown : function(e) {
dynapi.debug.print("mousedown on "+e.getSource().id)
e.preventBubble();
}
}
mylayer.addEventListener(el);
mychild.addEventListener(el);
mygrandchild.addEventListener(el);
}; function checkProperties(dlyr) {
var str = "id = "+dlyr.id+"\n"+ "parent id = "+dlyr.parent.id+"\n"+ "x = "+dlyr.x+"\n"+ "y = "+dlyr.y+"\n"+ "w = "+dlyr.w+"\n"+ "h = "+dlyr.h+"\n"+ "clip = "+dlyr.clip+"\n"+ "z = "+dlyr.z+"\n"+ "visible = "+dlyr.visible+"\n"+ "bgColor = "+dlyr.bgColor+"\n"+ "bgImage = "+dlyr.bgImage+"\n"+ "html = "+dlyr.html+"\n"; alert(str);
} </script> <style type="text/css">
</style>
</head>
<body bgcolor="#999999">
<p>Check Properties of:
<a href="javascript:checkProperties(mylayer)">mylayer</a>
<a href="javascript:checkProperties(mychild)">mychild</a>
<a href="javascript:checkProperties(mygrandchild)">mygrandchild</a>
mylayer is inline
mychild is inline
mygrandchild is inline
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Relative Layers
<source lang="html4strict">
http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynLayer Examples - Relative DynLayers</title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath("./dynapisrc/"); dynapi.library.include("dynapi.api.DynLayer"); </script> <script language="Javascript"> var lyr1=dynapi.document.addChild(new DynLayer("Hello",0,0,100,30,"yellow")) var lyr2=dynapi.document.addChild(new DynLayer("Everyone",0,0,100,30,"lime")) </script> </head> <body>
<p>Some html here, some more html here some html here, some more html here. some more html here some html here, some more html here. Some more html here some html here, some more html here. some more html here some html here, some more html here. some more html here some html here, some more html here.<script>dynapi.document.insertChild(lyr1,"relative");</script>
Some html here, some more html here some html here, some more html here. some more html here some html here, some more html here. Some more html here some html here, some more html here. some more html here some html here, some more html here. some more html here some html here, some more html here.
<script>dynapi.document.insertChild(lyr2,"relative");</script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Relative Layers : Basic example
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML> <HEAD> <TITLE>Relative Layers : Basic example</TITLE> <SCRIPT LANGUAGE="JavaScript" SRC="rl_error_stripped.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript">
</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">
</SCRIPT> </HEAD> <BODY BGCOLOR="#2F4078">
Your first relative layer !
</BODY> </HTML>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/ddi.1.5.2.all-in-one.zip">ddi.1.5.2.all-in-one.zip( 47 k)</a>
Relative Layers : Dynamic creation example
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML> <HEAD> <TITLE>Relative Layers : Dynamic creation 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" SRC="rl_limits_stripped.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript1.2">
</SCRIPT> </HEAD> <BODY BGCOLOR="#2F4078">
<A HREF="javascript:createSecondLayer();">create layer</A>
<A HREF="javascript:layer2.destroyLayer();">destroy layer</A>
</BODY> </HTML>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/relativelayers-0.9.7.zip">relativelayers-0.9.7.zip( 74 k)</a>
This is an inline layer that was created after page load
<source lang="html4strict">
http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI - DynDocument addHTML</title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath("./dynapisrc/"); dynapi.library.include("dynapi.api"); dynapi.library.include("DynLayerInline"); </script> <script language="Javascript"> // Before the page loads you can use addHTML to add regular html text to the document. // this will behave similar to the document.write() function in both ns4 and other browsers dynapi.document.addHTML("Some Text here Some Text here Some Text here Some Text here Some Text here Some Text here"); dynapi.onLoad(function(){
// After the page has been loaded the addHTML() function will behave differently in ns4 than in other browsers. // All HTML content added after the page has been loaded in ns4 will appear at location 0,0 // while in other browsers it will be appended to the end of the document. // It"s best to use the addHTML() to add inline layers to the document after a page load.// in ns4 you might have to use a
| This is an inline layer that was created after page load |
if(dynapi.ua.ns4) dynapi.document.addHTML("<layer id="myid2" width="100" height="100" bgcolor="yellow">"+html+"</layer>");
else dynapi.document.addHTML(" var lyr = new DynLayer();
lyr.setID("myid2",true);
dynapi.document.addChild(lyr);
lyr.setLocation(100,100);
lyr.setSize(150,100);
lyr.setHTML(html);
}); </script> </head> <body bgcolor="#FFFFFF"> <script>
dynapi.document.insertAllChildren();
</script> </body> </html>
</source><A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
