JavaScript DHTML/Ajax Layer/Layer Creation
Содержание
Generate and destroy layers
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">
<p><a href="javascript:start()">Start generation</a><br>
<a href="javascript:stop()">Stop generation</a><br>
<a href="javascript:destroyAll()">Destroy all</a><br>
<form name="countform">
<input type=text name="counttext" size=5>
</form>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Layer Create/Remove/Delete
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><br>
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>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Layer Inline
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">
<!--
#mylayer {position:absolute; left:250px; top:50px; width:200px; height:200px; clip:rect(0px 200px 200px 0px); background-color:red; layer-background-color:red;}
#mychild {position:absolute; left:50px; top:50px; background-color:yellow; z-index:5; layer-background-color:yellow; layer-background-image:url("../src/dynapi/images/blank.gif");}
#mygrandchild {position:absolute; left:50px; top:100px; background-color:lime; z-index:5; layer-background-color:lime; layer-background-image:url("../src/dynapi/images/blank.gif");}
-->
</style>
</head>
<body bgcolor="#999999">
<p>Check Properties of:<br>
<a href="javascript:checkProperties(mylayer)">mylayer</a><br>
<a href="javascript:checkProperties(mychild)">mychild</a><br>
<a href="javascript:checkProperties(mygrandchild)">mygrandchild</a>
<div id="mylayer">
mylayer is inline
<div id="mychild">
mychild is inline
<div id="mygrandchild">
mygrandchild is inline
</div>
</div>
</div>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Relative Layers
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.</p>
<script>dynapi.document.insertChild(lyr1,"relative");</script>
<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.</p>
<script>dynapi.document.insertChild(lyr2,"relative");</script>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Relative Layers : Basic example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--
// RelativeLayers 0.9.7
//
// $Id: example1.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 : Basic example</TITLE>
<SCRIPT LANGUAGE="JavaScript" SRC="rl_error_stripped.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
function unsupportedBrowser()
{
window.location.href="http://www.uwyn.ru";
}
//-->
</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%","80%",LEFT,"50%",TOP,"50%","0","0",
"100%","100%",LEFT,"50%",TOP,"50%","0","0",
"#dddddd", "");
layer1.setVisible(true);
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#2F4078">
<DIV ID="layer1Div">
Your first relative layer !<BR>
</DIV>
</BODY>
</HTML>
<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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--
// RelativeLayers 0.9.7
//
// $Id: example10.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 : 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">
<!--
layer1 = new RelativeLayer(
"layer1Div", "", "",
"100%-20","AUTO",LEFT,"10",TOP,"10","-50%","-50%",
"100%","100%",LEFT,"50%",TOP,"50%","0","0",
"#dddddd");
layer1.setVisible(true);
function createSecondLayer()
{
var width = Math.floor(Math.random()*70)+10;
var height = Math.floor(Math.random()*70)+10;
var leftdistance = Math.floor(Math.random()*100);
var topdistance = Math.floor(Math.random()*100);
layer2 = new RelativeLayer(
"layer2Div", "", "",
width+"%",height+"%",LEFT,leftdistance+"%",TOP,topdistance+"%","-50%","-50%",
"100%","100%",LEFT,"50%",TOP,"50%","0","0",
"#ffffff");
layer2.addLimit(TOPEDGE, BELOW, "layer1Div", BOTTOM, 10);
layer2.addLimit(BOTTOMEDGE, ABOVE, "", BOTTOM, -10);
layer2.addLimit(LEFTEDGE, RIGHTSIDE, "", LEFT, 10);
layer2.addLimit(RIGHTEDGE, LEFTSIDE, "", RIGHT, -10);
layer2.addEventListener("create", writeLayer2Contents);
layer2.createLayer();
layer2.setVisible(true);
};
function writeLayer2Contents()
{
layer2.setHtml("<BR>\n<CENTER><B>This layer has been created dynamically.</B></CENTER><BR>");
};
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#2F4078">
<DIV ID="layer1Div">
<A HREF="javascript:createSecondLayer();">create layer</A><BR>
<A HREF="javascript:layer2.destroyLayer();">destroy layer</A><BR>
</DIV>
</BODY>
</HTML>
<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
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 <b>here Some Text</b> 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 <table> to force text-wrapping. The <layer> must always include a width and a height when using <table> with width="100%"
var html="<table border="1" width="100%"><tr><td>This is an inline layer that was created after page load</td></tr></table>";
if(dynapi.ua.ns4) dynapi.document.addHTML("<layer id="myid2" width="100" height="100" bgcolor="yellow">"+html+"</layer>");
else dynapi.document.addHTML("<div id="myid2" style="position:absolute;width:100px;height:100px;background-color:yellow;">"+html+"</div>");
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>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
