http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_DHTML%2FAjax_Layer%2FLayer_Events
JavaScript DHTML/Ajax Layer/Layer Events - История изменений
2026-04-04T23:11:23Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_DHTML/Ajax_Layer/Layer_Events&diff=1728&oldid=prev
в 09:58, 26 мая 2010
2010-05-26T09:58:48Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:58, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=JavaScript_DHTML/Ajax_Layer/Layer_Events&diff=1729&oldid=prev
Admin: 1 версия
2010-05-26T07:16:07Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Layer: On Content Change Event==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
http://dynapi.sourceforge.net/<br />
GNU LESSER GENERAL PUBLIC LICENSE<br />
Version 2.1, February 1999<br />
<html><br />
<head><br />
<title>DynAPI Examples - On Content Change Event</title><br />
<script language="Javascript" src="./dynapisrc/dynapi.js"></script><br />
<script language="Javascript"><br />
<!--<br />
dynapi.library.setPath("./dynapisrc/");<br />
dynapi.library.include("dynapi.api");<br />
//--><br />
</script><br />
<script language="Javascript"><br />
<!--<br />
dynapi.onLoad(function() {<br />
lyr = new DynLayer("Hello",300,50,100,100,"yellow");<br />
lyr.addEventListener ({<br />
oncontentchange : function(e) {<br />
var me = e.getSource();<br />
alert("Content Change to : ""+me.getHTML()+""");<br />
}<br />
});<br />
dynapi.document.addChild(lyr);<br />
});<br />
//--><br />
</script><br />
</head><br />
<body bgcolor="#FFFFFF"><br />
<table bgcolor="#ffffff" border=0><tr><td><br />
<br>Conten #1: <a href="javascript:lyr.setHTML("Cool Layer")">Cool Layer</a><br />
<br>Conten #2: <a href="javascript:lyr.setHTML("Blueprint - Layers in overdrive!")">Blueprint - Layers in overdrive!</a><br />
<br>Conten #3: <a href="javascript:lyr.setHTML("DynAPI is ccool!")">DynAPI is ccool!</a><br />
</td></tr></table><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a><br />
<br />
<br />
==Layer: On Location Change Event==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
http://dynapi.sourceforge.net/<br />
GNU LESSER GENERAL PUBLIC LICENSE<br />
Version 2.1, February 1999<br />
<html><br />
<head><br />
<title>DynAPI Examples - On Location Change Event</title><br />
<script language="Javascript" src="./dynapisrc/dynapi.js"></script><br />
<script language="Javascript"><br />
<!--<br />
dynapi.library.setPath("./dynapisrc/");<br />
dynapi.library.include("dynapi.api");<br />
//--><br />
</script><br />
<script language="Javascript"><br />
<!--<br />
dynapi.onLoad(function() {<br />
lyr = new DynLayer("Hello",300,50,100,100,"yellow");<br />
lyr.addEventListener ({<br />
onlocationchange : function(e) {<br />
var me = e.getSource();<br />
me.setHTML("Location Change to:<br> x="+me.getX()+", y="+me.getY());<br />
}<br />
});<br />
dynapi.document.addChild(lyr);<br />
});<br />
//--><br />
</script><br />
</head><br />
<body bgcolor="#FFFFFF"><br />
<table bgcolor="#ffffff" border=0><tr><td><br />
<br><a href="javascript:;" onclick="lyr.slideTo(parseInt(Math.random()*450),parseInt(Math.random()*200));return false;">Change Location</a><br />
</td></tr></table><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a><br />
<br />
<br />
==Relative Layers : Events example==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br />
<!--<br />
// RelativeLayers 0.9.7<br />
// <br />
// $Id: example6.html 1.7 04/02/02 21:22:32+01:00 gbevin@willow.uwyn.office $<br />
// <br />
// Library for creating dynamic designs that adapt themselves to the user"s<br />
// browser environment.<br />
// <br />
// Copyright (C) 1998-2004, Geert Bevin<br />
// Distributed under the terms of the GNU Lesser General Public, v2.1 or later<br />
// <br />
// gbevin[remove] at uwyn dot com<br />
// http://www.uwyn.ru/projects/relativelayers<br />
--><br />
<HTML><br />
<HEAD><br />
<TITLE>RelativeLayers : Events example</TITLE><br />
<SCRIPT LANGUAGE="JavaScript" SRC="rl_error_stripped.js"></SCRIPT><br />
<SCRIPT LANGUAGE="JavaScript" SRC="rl_browser_stripped.js"></SCRIPT><br />
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_utility_stripped.js"></SCRIPT><br />
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_window_stripped.js"></SCRIPT><br />
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_layer_stripped.js"></SCRIPT><br />
<SCRIPT LANGUAGE="JavaScript1.2"><br />
<!--<br />
layer1 = new RelativeLayer(<br />
"layer1Div", "layer2Div", "layer2Div",<br />
"30%","20%",LEFT,"0",TOP,"0","-50%","50%",<br />
"100%","100%",LEFT,"50%",TOP,"50%","0","0",<br />
"#dddddd");<br />
layer1.setVisible(true);<br />
layer1.addEventListener("visibleresizeby", layer1Resize);<br />
layer2 = new RelativeLayer(<br />
"layer2Div", "layer3Div", "layer3Div",<br />
"30%","60%",LEFT,"0",TOP,"0","-50%","50%",<br />
"100%","100%",LEFT,"50%",TOP,"50%","0","0",<br />
"#99dd99");<br />
layer2.setVisible(true);<br />
layer2.addEventListener("visibleresizeby", layer2Resize);<br />
layer3 = new RelativeLayer(<br />
"layer3Div", "", "",<br />
"30%","20%",LEFT,"50%",BOTTOM,"0","0","50%",<br />
"100%","100%",LEFT,"50%",TOP,"50%","0","0",<br />
"#dd9999");<br />
layer3.setVisible(true);<br />
layer3.addEventListener("visibleresizeby", layer3Resize);<br />
function layer1Resize(event)<br />
{<br />
layer2.visibleResizeBy(0, event.heightdiff*-1, false);<br />
};<br />
function layer2Resize(event)<br />
{<br />
layer1.visibleResizeBy(0, (event.heightdiff*-1)/2, false);<br />
layer3.visibleResizeBy(0, (event.heightdiff*-1)/2, false);<br />
};<br />
function layer3Resize(event)<br />
{<br />
layer2.visibleResizeBy(0, event.heightdiff*-1, false);<br />
};<br />
//--><br />
</SCRIPT><br />
</HEAD><br />
<BODY BGCOLOR="#2F4078"><br />
<DIV ID="layer1Div"><br />
Layer 1.<BR><br />
<A HREF="javascript:layer1.visibleResizeBy(0,"-10")">Shorter</A><br />
<A HREF="javascript:layer1.visibleResizeBy(0,"10")">Longer</A><BR><br />
</DIV><br />
<DIV ID="layer2Div"><br />
Layer 2.<BR><br />
<A HREF="javascript:layer2.visibleResizeBy(0,"-10");">Shorter</A><br />
<A HREF="javascript:layer2.visibleResizeBy(0,"10");">Longer</A><BR><br />
</DIV><br />
<DIV ID="layer3Div"><br />
Layer 3.<BR><br />
<A HREF="javascript:layer3.visibleResizeBy(0,"-10")">Shorter</A><br />
<A HREF="javascript:layer3.visibleResizeBy(0,"10")">Longer</A><BR><br />
</DIV><br />
</BODY><br />
</HTML><br />
<br />
<br />
</source><br />
<br />
<br />
<A href="http://www.wbex.ru/Code/JavaScriptDownload/relativelayers-0.9.7.zip">relativelayers-0.9.7.zip( 74 k)</a><br />
<br />
<br />
==Subclassing events==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
http://dynapi.sourceforge.net/<br />
GNU LESSER GENERAL PUBLIC LICENSE<br />
Version 2.1, February 1999 <br />
<html><br />
<head><br />
<title>DynAPI Examples - Subclassing Events</title><br />
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script><br />
<script language="Javascript"><br />
dynapi.library.setPath("./dynapisrc/");<br />
dynapi.library.include("dynapi.api");<br />
// note: this library is NOT necessary for subclassing<br />
dynapi.library.include("dynapi.functions");<br />
</script><br />
<script language="Javascript"><br />
var l1,l2;<br />
l1=new DynLayer("<p align="center"><br>L1</p>",50,50,100,100,"yellow");<br />
l2=new DynLayer(null,250,50,100,100,"green");<br />
l3=new DynLayer(null,250,200,100,100,"blue");<br />
// note: click event added to l1<br />
l1.addEventListener({<br />
onclick:function(e){<br />
var o=e.getSource();<br />
o.setBgColor(dynapi.functions.getRandomColor());<br />
}<br />
});<br />
// note: click event added to l2<br />
l2.addEventListener({<br />
onclick:function(e){<br />
var o=e.getSource();<br />
o.setHTML("You can\"t read this message");<br />
}<br />
});<br />
dynapi.functions.subClassEvent("click",l1,sbl1);<br />
dynapi.functions.subClassEvent("click",l2,sbl2);<br />
// callback functions<br />
function sbl1(e,args){<br />
l2.setHTML("<p align="center"><font size="2" face="arial"><br>I am L2 and I\"m in control of L1</font></p>");<br />
e.src=l2; // the click event on l1 is now controlled by l2<br />
};<br />
function sbl2(e,args){<br />
var t="<p align="center"><font size="2" face="arial" color="white"><br>I am L3 and I\"m in control of L2<br>"<br />
+"X:"+e.x+" Y:"+e.y+"</font></p>"<br />
l3.setHTML(t);<br />
// stop the event from been passed to l2<br />
return false;<br />
}<br />
dynapi.document.addChild(l1)<br />
dynapi.document.addChild(l2)<br />
dynapi.document.addChild(l3)<br />
</script><br />
</head><br />
<body><br />
Click on the Yellow Layer labeled L1 then click layer labeled L2<br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a></div>
Admin