JavaScript DHTML/Ajax Layer/Layer Events

Материал из Web эксперт
Перейти к: навигация, поиск

Layer: On Content Change Event

   <source lang="html4strict">

http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI Examples - On Content Change Event</title> <script language="Javascript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript">

</script> <script language="Javascript">

</script> </head> <body bgcolor="#FFFFFF">


Conten #1: <a href="javascript:lyr.setHTML("Cool Layer")">Cool Layer</a>
Conten #2: <a href="javascript:lyr.setHTML("Blueprint - Layers in overdrive!")">Blueprint - Layers in overdrive!</a>
Conten #3: <a href="javascript:lyr.setHTML("DynAPI is ccool!")">DynAPI is ccool!</a>

</body> </html> 

      </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>


Layer: On Location Change Event

   <source lang="html4strict">

http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI Examples - On Location Change Event</title> <script language="Javascript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript">

</script> <script language="Javascript">

</script> </head> <body bgcolor="#FFFFFF">


<a href="javascript:;" onclick="lyr.slideTo(parseInt(Math.random()*450),parseInt(Math.random()*200));return false;">Change Location</a>

</body> </html> 

      </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>


Relative Layers : Events example

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML> <HEAD> <TITLE>RelativeLayers : Events 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">

</SCRIPT> </HEAD> <BODY BGCOLOR="#2F4078"> 

    Layer 1.

   <A HREF="javascript:layer1.visibleResizeBy(0,"-10")">Shorter</A>
   <A HREF="javascript:layer1.visibleResizeBy(0,"10")">Longer</A>


    Layer 2.

   <A HREF="javascript:layer2.visibleResizeBy(0,"-10");">Shorter</A>
   <A HREF="javascript:layer2.visibleResizeBy(0,"10");">Longer</A>


    Layer 3.

   <A HREF="javascript:layer3.visibleResizeBy(0,"-10")">Shorter</A>
   <A HREF="javascript:layer3.visibleResizeBy(0,"10")">Longer</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>


Subclassing events

   <source lang="html4strict">

http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI Examples - Subclassing Events</title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> 

 dynapi.library.setPath("./dynapisrc/");
 dynapi.library.include("dynapi.api");
 // note: this library is NOT necessary for subclassing
 dynapi.library.include("dynapi.functions");

</script> <script language="Javascript"> 

 var l1,l2;
l1=new DynLayer("


L1

",50,50,100,100,"yellow"); 
 l2=new DynLayer(null,250,50,100,100,"green");
 l3=new DynLayer(null,250,200,100,100,"blue");
 // note: click event added to l1
 l1.addEventListener({
   onclick:function(e){
     var o=e.getSource();
     o.setBgColor(dynapi.functions.getRandomColor());
   }
 });
 // note: click event added to l2
 l2.addEventListener({
   onclick:function(e){
     var o=e.getSource();
     o.setHTML("You can\"t read this message");
   }
 });
 dynapi.functions.subClassEvent("click",l1,sbl1);
 dynapi.functions.subClassEvent("click",l2,sbl2);
 // callback functions
 function sbl1(e,args){
l2.setHTML("


I am L2 and I\"m in control of L1

"); 
   e.src=l2; // the click event on l1 is now controlled by l2
 };
 function sbl2(e,args){
var t="


I am L3 and I\"m in control of L2
" +"X:"+e.x+" Y:"+e.y+"

" 
   l3.setHTML(t);
   // stop the event from been passed to l2
   return false;
 }
 dynapi.document.addChild(l1)
 dynapi.document.addChild(l2)
 dynapi.document.addChild(l3)

</script> </head> <body> Click on the Yellow Layer labeled L1 then click layer labeled L2 </body> </html> 


      </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>

Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ajax_Layer/Layer_Events&oldid=1729»