JavaScript DHTML/Ajax Layer/Layer Events — различия между версиями

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

Текущая версия на 07:16, 26 мая 2010

Layer: On Content Change Event

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">
<!--
  dynapi.library.setPath("./dynapisrc/");
  dynapi.library.include("dynapi.api");
//-->
</script>
<script language="Javascript">
<!--
dynapi.onLoad(function() {
  lyr = new DynLayer("Hello",300,50,100,100,"yellow");
  lyr.addEventListener ({
    oncontentchange : function(e) {
      var me = e.getSource();
      alert("Content Change to : ""+me.getHTML()+""");
    }
  });
  dynapi.document.addChild(lyr);
});
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<table bgcolor="#ffffff" border=0><tr><td>
<br>Conten #1: <a href="javascript:lyr.setHTML("Cool Layer")">Cool Layer</a>
<br>Conten #2: <a href="javascript:lyr.setHTML("Blueprint - Layers in overdrive!")">Blueprint - Layers in overdrive!</a>
<br>Conten #3: <a href="javascript:lyr.setHTML("DynAPI is ccool!")">DynAPI is ccool!</a>
</td></tr></table>
</body>
</html>


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


Layer: On Location Change Event

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">
<!--
  dynapi.library.setPath("./dynapisrc/");
  dynapi.library.include("dynapi.api");
//-->
</script>
<script language="Javascript">
<!--
dynapi.onLoad(function() {
  lyr = new DynLayer("Hello",300,50,100,100,"yellow");
  lyr.addEventListener ({
    onlocationchange : function(e) {
      var me = e.getSource();
      me.setHTML("Location Change to:<br> x="+me.getX()+", y="+me.getY());
    }
  });
  dynapi.document.addChild(lyr);
});
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<table bgcolor="#ffffff" border=0><tr><td>
<br><a href="javascript:;" onclick="lyr.slideTo(parseInt(Math.random()*450),parseInt(Math.random()*200));return false;">Change Location</a>
</td></tr></table>
</body>
</html>


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


Relative Layers : Events example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--
// RelativeLayers 0.9.7
// 
// $Id: example6.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>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">
<!--
layer1 = new RelativeLayer(
"layer1Div", "layer2Div", "layer2Div",
"30%","20%",LEFT,"0",TOP,"0","-50%","50%",
"100%","100%",LEFT,"50%",TOP,"50%","0","0",
"#dddddd");
layer1.setVisible(true);
layer1.addEventListener("visibleresizeby", layer1Resize);
layer2 = new RelativeLayer(
"layer2Div", "layer3Div", "layer3Div",
"30%","60%",LEFT,"0",TOP,"0","-50%","50%",
"100%","100%",LEFT,"50%",TOP,"50%","0","0",
"#99dd99");
layer2.setVisible(true);
layer2.addEventListener("visibleresizeby", layer2Resize);
layer3 = new RelativeLayer(
"layer3Div", "", "",
"30%","20%",LEFT,"50%",BOTTOM,"0","0","50%",
"100%","100%",LEFT,"50%",TOP,"50%","0","0",
"#dd9999");
layer3.setVisible(true);
layer3.addEventListener("visibleresizeby", layer3Resize);
function layer1Resize(event)
{
  layer2.visibleResizeBy(0, event.heightdiff*-1, false);
};
function layer2Resize(event)
{
  layer1.visibleResizeBy(0, (event.heightdiff*-1)/2, false);
  layer3.visibleResizeBy(0, (event.heightdiff*-1)/2, false);
};
function layer3Resize(event)
{
  layer2.visibleResizeBy(0, event.heightdiff*-1, false);
};
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#2F4078">
<DIV ID="layer1Div">
     Layer 1.<BR>
    <A HREF="javascript:layer1.visibleResizeBy(0,"-10")">Shorter</A>
    <A HREF="javascript:layer1.visibleResizeBy(0,"10")">Longer</A><BR>
</DIV>
<DIV ID="layer2Div">
     Layer 2.<BR>
    <A HREF="javascript:layer2.visibleResizeBy(0,"-10");">Shorter</A>
    <A HREF="javascript:layer2.visibleResizeBy(0,"10");">Longer</A><BR>
</DIV>
<DIV ID="layer3Div">
     Layer 3.<BR>
    <A HREF="javascript:layer3.visibleResizeBy(0,"-10")">Shorter</A>
    <A HREF="javascript:layer3.visibleResizeBy(0,"10")">Longer</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>


Subclassing events

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("<p align="center"><br>L1</p>",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("<p align="center"><font size="2" face="arial"><br>I am L2 and I\"m in control of L1</font></p>");
    e.src=l2; // the click event on l1 is now controlled by l2
  };
  function sbl2(e,args){
    var t="<p align="center"><font size="2" face="arial" color="white"><br>I am L3 and I\"m in control of L2<br>"
    +"X:"+e.x+" Y:"+e.y+"</font></p>"
    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>


<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»