JavaScript DHTML/Ajax Layer/Layer Group
Grouping layers
<source lang="html4strict">
http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI Examples - GroupManager</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("GroupManager");
dynapi.library.include("DragEvent");
dynapi.library.include("Color");
</script> <script>
var gm=new GroupManager()
gm.addMethod("slideTo",DynLayer.prototype.slideTo);
gm.addMethod("slideStop",DynLayer.prototype.slideStop);
gm.addMethod("_slide",DynLayer.prototype._slide);
var a = gm.add(dynapi.document.addChild(new DynLayer(null,100,100,50,50,"red")))
var b = gm.add(dynapi.document.addChild(new DynLayer(null,210,0,50,50,"green")))
var e = dynapi.document.addChild(new DynLayer("E
",400,120,50,50,"#ffcc00"))var c = gm.add(dynapi.document.addChild(new DynLayer(null,320,100,50,50,"blue"))) var d = gm.add(dynapi.document.addChild(new DynLayer(null,430,0,50,50,"Yellow"))) gm.setLocation(210,50); gm.add(e,true,true) DragEvent.enableDragEvents(a,b,c,d,e)
</script>
</head>
<body>
Drag anyone of the colored layers to move the group
Move to:<a href="javascript:gm.setLocation(100,100)">(100,100)</a> |
<a href="javascript:gm.setLocation(300,200)">(300,200)</a>
<a href="javascript:gm.slideTo(Math.floor(500*Math.random()),Math.floor(300*Math.random()))">SlideTo</a> | <a href="javascript:gm.sendMessage("slideTo(Math.floor(600*Math.random()),Math.floor(300*Math.random()))")">SlideTo Random</a>
<a href="javascript:gm.sendMessage("setBgColor",dynapi.functions.getRandomColor());">Change Color</a>
<a href="javascript:gm.sendMessage("setBgColor(dynapi.functions.getRandomColor())");">Random Colors</a>
<a href="javascript:;" onclick="gm.setBoundary(0,dynapi.document.w,dynapi.document.h,0);">Set Boundary On</a>
<a href="javascript:;" onclick="gm.setBoundary(null);">Set Boundary Off</a>
<a href="javascript:;" onclick="gm.add(e);return false;">Add Layer E to Group</a>
<a href="javascript:;" onclick="gm.remove(e)">Remove Layer E from Group</a> /
<a href="javascript:;" onclick="e.setSize(Math.random()*200,Math.random()*200)">Resize E</a>
Unlock Layer E Coordunates:
X Coor: <a href="javascript:;" onclick="gm.unlockX(false,e);return false;">Lock</a> |
<a href="javascript:;" onclick="gm.unlockX(true,e);return false;">Unlock</a>
Y Coor: <a href="javascript:;" onclick="gm.unlockY(false,e);return false;">Lock</a> |
<a href="javascript:;" onclick="gm.unlockY(true,e);return false;">Unlock</a>
Unlock All Layers X & Y Coordunates:
X Coor: <a href="javascript:;" onclick="gm.unlockX(false);return false;">Lock</a> |
<a href="javascript:;" onclick="gm.unlockX(true);return false;">Unlock</a>
Y Coor: <a href="javascript:;" onclick="gm.unlockY(false);return false;">Lock</a> | <a href="javascript:;" onclick="gm.unlockY(true);return false;">Unlock</a>
<script>
dynapi.document.insertAllChildren();
</script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
