From: Raymond I. <xw...@us...> - 2003-03-05 04:36:23
|
Update of /cvsroot/dynapi/dynapi3x/examples In directory sc8-pr-cvs1:/tmp/cvs-serv30194/examples Modified Files: dynapi.api.ext.inline.html dynapi.fx.circleanim.html Added Files: dynapi.api.ext.inline-widget.html dynapi.fx.fader.html Log Message: uploaded by raymond (with changes made by Benoit) --- NEW FILE --- <html> <head> <title>DynAPI Examples - Inline Widget</title> <script language="JavaScript" src="../src/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath('../src/'); dynapi.library.include('dynapi.library'); dynapi.library.include('dynapi.debug'); dynapi.library.include('dynapi.api'); dynapi.library.include('DynLayerInline'); dynapi.library.include('DragEvent'); </script> <script language="Javascript"> var mylayer = dynapi.document.addChild(new DynLayer(),null,'mylayer'); mylayer.addChild(new DynLayer(),'lyrBox1','box1'); mylayer.addChild(new DynLayer(),'lyrBox2','box2'); mylayer.addChild(new DynLayer(),'lyrBox3','box3'); mylayer.addChild(new DynLayer(),'lyrBox4','box4'); DragEvent.enableDragEvents( mylayer, mylayer.lyrBox1, mylayer.lyrBox2, mylayer.lyrBox3, mylayer.lyrBox4 ); var el = { onmousedown : function(e) { dynapi.debug.print('mousedown on '+e.getSource().id) e.preventBubble(); } } mylayer.addEventListener(el); </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;} #box1 {position:absolute; left:0px; top:0px; width:20px; height:20px; background-color:yellow; z-index:5; layer-background-color:yellow;} #box2 {position:absolute; left:180px; top:0px; width:20px; height:20px; background-color:blue; z-index:5; layer-background-color:blue;} #box3 {position:absolute; left:180px; top:180px; width:20px; height:20px; background-color:silver; z-index:5; layer-background-color:silver;} #box4 {position:absolute; left:0px; top:180px; width:20px; height:20px; background-color:green; z-index:5; layer-background-color:green;} --> </style> </head> <body bgcolor="#FFFFFF"> <div id="mylayer"> <table border="0" height="200" width="200"><tr><td align="center"><font color="#ffffff">My Inline Widget<br>Drag Me</font></td></tr></table> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div> <div id="box4"></div> </div> </body> </html> --- NEW FILE --- <html> <head> <title>DynAPI Examples - Fader</title> <script language="JavaScript" src="../src/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath('../src/'); dynapi.library.include('dynapi.api'); dynapi.library.include('Fader'); </script> <script language="Javascript"> var lyr1=new DynLayer('<h1><font color="blue">This</font></h1>',0,0,100,100); var lyr2=new DynLayer('<h1><font color="green">Is</font></h1>',300,200,100,100); var lyr3=new DynLayer('<h1><font color="red">Not</font></h1>',0,50,100,100); var lyr4=new DynLayer('<h1><font color="navy">Flash!</font></h1>',400,250,100,100); var lyr5=new DynLayer('<h1><font color="navy"><b>DynAPI <font color="green">3.0</font> Rulez!</b></font></h1>',100,300,300,100); var lyr6=new DynLayer('<h1><font color="black"><b>Got DynAPI?</b></font></h1>',400,100,200,100); dynapi.document.addChild(lyr1); dynapi.document.addChild(lyr2); dynapi.document.addChild(lyr3); dynapi.document.addChild(lyr4); dynapi.document.addChild(lyr5); dynapi.document.addChild(lyr6); lyr2.setVisible(false); lyr3.setVisible(false); lyr4.setVisible(false); lyr5.setVisible(false); lyr6.setVisible(false); dynapi.onLoad(function(){ lyr1.fadeIn(); lyr1.slideTo(100,100); lyr1.addEventListener({ onfadein:function(e){ lyr2.fadeIn(); lyr2.slideTo(170,100); } }); lyr2.addEventListener({ onfadein:function(e){ lyr3.fadeIn(); lyr3.slideTo(200,100); } }); lyr3.addEventListener({ onfadein:function(e){ lyr4.fadeIn();lyr4.slideTo(260,100); } }); lyr4.addEventListener({ onfadein:function(e){ lyr1.fadeOut(); lyr2.fadeOut(); lyr3.fadeOut(); lyr4.fadeOut(); }, onfadeout:function(e){ window.setTimeout('lyr5.fadeIn();lyr5.slideTo(null,100);',600); } }); lyr5.addEventListener({ onfadein:function(e){ window.setTimeout('lyr5.fadeOut();lyr5.slideTo(400,100);',600); }, onfadeout:function(e){ window.setTimeout('lyr6.fadeIn();lyr6.slideTo(150,100);',100); } }); }); </script> </head> <body> <script> dynapi.document.insertAllChildren(); </script> </body> </html> Index: dynapi.api.ext.inline.html =================================================================== RCS file: /cvsroot/dynapi/dynapi3x/examples/dynapi.api.ext.inline.html,v retrieving revision 1.1.1.1 retrieving revision 1.2 diff -C2 -r1.1.1.1 -r1.2 *** dynapi.api.ext.inline.html 10 Feb 2003 22:35:40 -0000 1.1.1.1 --- dynapi.api.ext.inline.html 5 Mar 2003 04:36:16 -0000 1.2 *************** *** 1 **** ! <html> <head> <title>DynAPI Examples - DynLyaer [Inline]</title> <script language="JavaScript" src="../src/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath('../src/'); dynapi.library.include('dynapi.library'); dynapi.library.include('dynapi.debug'); dynapi.library.include('dynapi.api.DynEvent'); dynapi.library.include('dynapi.api.DynDocument'); dynapi.library.include('dynapi.api.DynLayer'); dynapi.library.include('dynapi.api.ext.DynLayer_inline'); </script> <script language="JavaScript" src="../src/dynapi/api/mouse_ns4.js"></script> <script language="Javascript"> dynapi.onLoad(init); function init() { mylayer = DynLayer.getInline("mylayer"); mychild = DynLayer.getInline("mychild", mylayer); var el = { onmousedown : function(e) { dynapi.debug.print('mousedown on '+e.getSource().id) e.preventBubble(); } } mylayer.addEventListener(el); mychild.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");} --> </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> <div id="mylayer"> mylayer is inline <div id="mychild"> mychild is inline </div> </div> </body> </html> \ No newline at end of file --- 1 ---- ! <html> <head> <title>DynAPI Examples - DynLyaer [Inline]</title> <script language="JavaScript" src="../src/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath('../src/'); 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> \ No newline at end of file Index: dynapi.fx.circleanim.html =================================================================== RCS file: /cvsroot/dynapi/dynapi3x/examples/dynapi.fx.circleanim.html,v retrieving revision 1.1 retrieving revision 1.2 diff -C2 -r1.1 -r1.2 *** dynapi.fx.circleanim.html 19 Feb 2003 03:37:57 -0000 1.1 --- dynapi.fx.circleanim.html 5 Mar 2003 04:36:16 -0000 1.2 *************** *** 50,53 **** --- 50,56 ---- <body bgcolor="#ffffff"> + <script> + dynapi.document.insertAllChildren(); + </script> <p>Circle *************** *** 57,61 **** <br>angle increment: <a href="javascript:circle.setAngleIncrement(10)">10</a> | <a href="javascript:circle.setAngleIncrement(5)">5</a> <br>sleep: <a href="javascript:circle.sleep(20)">20</a> | <a href="javascript:circle.sleep(40)">40</a> - </body> </html> --- 60,63 ---- |