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