Subversion Repositories Applications.papyrus

Compare Revisions

Ignore whitespace Rev 2149 → Rev 2150

/trunk/api/js/dojo1.0/dojox/fx/tests/test_animateClass.html
New file
0,0 → 1,222
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dojox.fx.style - animatated CSS functions | The Dojo Toolkit</title>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script>
<script type="text/javascript" src="../style.js"></script><!-- debugging -->
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/dijit.css";
@import "../../../dijit/themes/tundra/tundra.css";
@import "../../../dijit/tests/css/dijitTests.css";
@import "_animation.css"; /* external stylesheets to enhance readability in this test */
</style>
<script type="text/javascript">
dojo.require("dojox.fx.style");
dojo.require("dijit.form.Button");
</script>
</head>
<body class="tundra">
 
<h1 class="testTitle">dojox.fx.style tests</h1>
 
<p id="fontTest">
dojox.fx.style provides a few methods to animate the changes that would occur
when adding or removing a class from a domNode.
</p>
<ul class="testUl" id="test1">
<li class="baseFont">dojox.fx.addClass(/* Object */)args); // Returns dojo._Animation</li>
<li class="baseFont">dojox.fx.removeClass(/* Object */args); // Returns dojo._Animation</li>
<li class="baseFont">dojox.fx.toggleClass(/* DomNode */node, /* String */cssClass,/* Boolean */force)</li>
</ul>
 
<button dojoType="dijit.form.Button">
spacing test
<script type="dojo/method" event="onClick">
var _anims = [];
// until dojox.fx.NodeList-fx is ready:
dojo.query("li.baseFont").forEach(function(node){
_anims.push(dojox.fx.toggleClass(node,"spacedHorizontal"));
})
dojo.fx.combine(_anims).play(5);
</script>
</button>
 
<button dojoType="dijit.form.Button">
line-height test
<script type="dojo/method" event="onClick">
var _anims = [];
// until dojox.fx.NodeList-fx is ready:
dojo.query("li.baseFont").forEach(function(node){
_anims.push(dojox.fx.toggleClass(node,"spacedVertical"));
})
dojo.fx.combine(_anims).play(5);
</script>
</button>
 
<button dojoType="dijit.form.Button">
font-size test
<script type="dojo/method" event="onClick">
var _anims = [];
// until dojox.fx.NodeList-fx is ready:
dojo.query("li.baseFont").forEach(function(node){
_anims.push(dojox.fx.toggleClass(node,"fontSizeTest"));
})
dojo.fx.combine(_anims).play(5);
</script>
</button>
 
<h2>testing sizes</h2>
 
<button dojoType="dijit.form.Button" id="addTall">
add .tall
<script type="dojo/method" event="onClick">
var delay = 500;
var _anims = [];
dojo.query("#colorTest > .testBox").forEach(function(n){
_anims.push(dojox.fx.addClass({
node:n,
cssClass:"tall",
delay: delay
}));
delay+=200;
});
this.setDisabled(true);
dijit.byId('removeTall').setDisabled(false);
dojo.fx.combine(_anims).play();
</script>
</button>
<button dojoType="dijit.form.Button" id="removeTall" disabled="true">
remove .tall
<script type="dojo/method" event="onClick">
var delay = 500;
var _anims = [];
dojo.query("#colorTest > .testBox").forEach(function(n){
_anims.push(dojox.fx.removeClass({
node:n,
cssClass:"tall",
delay: delay
}));
delay+=200;
});
this.setDisabled(true);
dijit.byId('addTall').setDisabled(false);
dojo.fx.combine(_anims).play();
</script>
</button>
<button dojoType="dijit.form.Button" id="addWide">
add .wide
<script type="dojo/method" event="onClick">
var delay = 500;
var _anims = [];
dojo.query("#colorTest > .testBox").forEach(function(n){
_anims.push(dojox.fx.addClass({
node:n,
cssClass:"wide",
delay: delay
}));
delay+=200;
});
this.setDisabled(true);
dijit.byId('removeWide').setDisabled(false);
dojo.fx.combine(_anims).play();
</script>
</button>
<button dojoType="dijit.form.Button" id="removeWide" disabled="true">
remove .wide
<script type="dojo/method" event="onClick">
var delay = 500;
var _anims = [];
dojo.query("#colorTest > .testBox").forEach(function(n){
_anims.push(dojox.fx.removeClass({
node:n,
cssClass:"wide",
delay: delay
}));
delay+=200;
});
this.setDisabled(true);
dijit.byId('addWide').setDisabled(false);
dojo.fx.combine(_anims).play();
</script>
</button>
<button dojoType="dijit.form.Button">
toggle .tiny
<script type="dojo/method" event="onClick">
var _anims = [];
// until dojox.fx.NodeList-fx is ready:
dojo.query("#colorTest > .testBox").forEach(function(node){
_anims.push(dojox.fx.toggleClass(node,"tiny"));
})
dojo.fx.combine(_anims).play(5);
</script>
</button>
<div id="colorTest">
<div id="colorTest1" class="floating testBox white"></div>
<div id="colorTest2" class="floating testBox black"></div>
<div id="colorTest3" class="floating testBox green"></div>
</div>
 
<br style="clear:both">
<h2>testing position</h2>
<p>This is a div position:relative with a position:absolute div inside. testing various t/l/b/r combos.
normal css inheritance rules apply, so setting .foo .bar if .foo was defined last in the css text, .bar
will take precedent. the below position test shows the results of this:
</p>
<button dojoType="dijit.form.Button">
.offsetSome
<script type="dojo/method" event="onClick">
dojox.fx.toggleClass("positionTest","offsetSome").play();
</script>
</button>
<button dojoType="dijit.form.Button">
.topLeft
<script type="dojo/method" event="onClick">
dojox.fx.toggleClass("positionTest","topLeft").play();
</script>
</button>
<button dojoType="dijit.form.Button">
.bottomRight
<script type="dojo/method" event="onClick">
dojox.fx.toggleClass("positionTest","bottomRight").play();
</script>
</button>
<div style="position:relative; height:175px; width:500px; border:1px solid #666;" id="positionBlock">
<div class="testBox absolutely" id="positionTest"></div>
</div>
<button dojoType="dijit.form.Button">
toggle .green
<script type="dojo/method" event="onClick">
dojox.fx.toggleClass("positionTest","green").play();
</script>
</button>
<button dojoType="dijit.form.Button">
toggle .black
<script type="dojo/method" event="onClick">
dojox.fx.toggleClass("positionTest","black").play();
</script>
</button>
<button dojoType="dijit.form.Button">
toggle .blue
<script type="dojo/method" event="onClick">
dojox.fx.toggleClass("positionTest","blue").play();
</script>
</button>
 
<p>Some properties
cannot be modified (fontFace, and so on), so to ensure the results at the end
of the animation are applied correctly and fully, the class name is set on the node
via dojo.add/removeClass().
</p>
 
</body>
</html>
 
/trunk/api/js/dojo1.0/dojox/fx/tests/test_easing.html
New file
0,0 → 1,107
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dojox.fx.easing functions:</title>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/dijit.css";
@import "../../../dijit/themes/tundra/tundra.css";
@import "../../../dijit/tests/css/dijitTests.css";
 
.block {
width:200px;
height:100px;
background:#666;
border:1px solid #ccc;
display:block;
color:#fff;
text-align:center;
}
</style>
<script type="text/javascript">
dojo.require("dojo.fx"); // chain and combine should be in core :) (when they work)
dojo.require("dojox.fx.easing");
 
 
var allAnim = null;
dojo.addOnLoad(function(){
 
var easeInAnim = dojo.fx.chain([
dojo.fadeOut({
node: 'easeIn',
duration:2000,
easing: dojox.fx.easing.easeIn
}),
dojo.fadeIn({
node: 'easeIn',
duration:2000,
easing: dojox.fx.easing.easeIn
})
]);
 
 
var easeOutAnim = dojo.fx.chain([
dojo.fadeOut({
node: 'easeOut',
duration:2000,
easing: dojox.fx.easing.easeOut
}),
dojo.fadeIn({
node: 'easeOut',
duration:2000,
easing: dojox.fx.easing.easeOut
})
]);
 
var easeInOutAnim = dojo.fx.chain([
dojo.fadeOut({
node: 'easeInOut',
duration:2000,
easing: dojox.fx.easing.easeInOut
}),
dojo.fadeIn({
node: 'easeInOut',
duration:2000,
easing: dojox.fx.easing.easeInOut
})
]);
 
dojo.connect(dojo.byId('easeIn'),"onclick",easeInAnim,"play");
dojo.connect(dojo.byId('easeOut'),"onclick",easeOutAnim,"play");
dojo.connect(dojo.byId('easeInOut'),"onclick",easeInOutAnim,"play");
 
// argh! FIXME: combine and chain are destructive to the animations. :(
// allAnim = dojo.fx.combine([easeInAnim,easeOutAnim,easeInOutAnim]);
allAnim = { play: function(){
console.log("can't do this via fx.combine - destructive");
easeInAnim.play();
easeOutAnim.play();
easeInOutAnim.play();
}
};
 
}); // dojo.addOnLoad
</script>
</head>
<body class="tundra">
 
<h1 class="testTitle">dojox.fx.easing function tests:</h1>
 
(click block to play animation, or <a href="#" onclick="allAnim.play()">here to do all three</a>)
 
<div id="easeIn" class="block">dojox.fx.easing.easeIn</div>
<br><br>
<div id="easeOut" class="block">dojox.fx.easing.easeOut</div>
<br><br>
<div id="easeInOut" class="block">dojox.fx.easing.easeInOut</div>
<p>
dojox.fx.easing is stand-alone, and does not require the dojox.fx base files.
</p>
 
</body>
</html>
/trunk/api/js/dojo1.0/dojox/fx/tests/test_highlight.html
New file
0,0 → 1,41
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dojox.fx.highlight</title>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true"></script>
<script type="text/javascript">
dojo.require("dojox.fx");
</script>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/dijit.css";
@import "../../../dijit/themes/tundra/tundra.css";
@import "../../../dijit/tests/css/dijitTests.css";
</style>
</head>
<body class="tundra">
 
<h1 class="testTitle">dojox.fx.highlight tests</h1>
 
<div id="attention" style="position:absolute; left:300px; top:200px; padding:10px;" >
<h3>This is the default highlight</h3>
</div>
 
<div id="attention2" style="position:absolute; left:300px; top:80px; padding:10px;" >
<h3>BRING ATTENTION HERE!</h3>
</div>
 
<div id="attention3" style="position:absolute; left:350px; top:150px; padding:10px; background-color:#CCCCCC" >
<h3>Highlight me</h3>
</div>
 
<a href="javascript:void(0)" onClick="dojox.fx.highlight({node:'attention'}).play()">test #1 (default)</a>
<br>
<a href="javascript:void(0)" onClick="dojox.fx.highlight({node:'attention', repeat:1}).play()">test #2 (default - play twice)</a>
<br>
<a href="javascript:void(0)" onClick="dojox.fx.highlight({node:'attention2', color:'#0066FF', duration:800}).play()">test #3</a>
<br>
<a href="javascript:void(0)" onClick="dojox.fx.highlight({node:'attention3', color:'#0066FF', duration:800}).play()">test #4</a>
 
</body></html>
/trunk/api/js/dojo1.0/dojox/fx/tests/test_crossFade.html
New file
0,0 → 1,145
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dojox.fx - animation sets to use!</title>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script>
<script type="text/javascript" src="../_base.js"></script>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/dijit.css";
@import "../../../dijit/themes/tundra/tundra.css";
@import "../../../dijit/tests/css/dijitTests.css";
#crossfade {
position:absolute;
top:0;
left:300px;
border:2px solid #ededed;
width:50px; height:50px;
background:#fff;
text-align:center;
}
table tr { padding:5px; margin:5px; border:1px solid #ccc; }
 
.box {
width:75px; height:75px; float:left;
border:1px solid #ededed;
padding:20px;
background-color:#fee;
}
.two { background-color:#c7bedd; }
.nopad { padding:0 !important;
width:100px; height:100px; border:0;
}
.hidden {
opacity:0;
}
</style>
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.require("dijit.TitlePane");
function basicXfade(){
dojox.fx.crossFade({
nodes: [dojo.byId('node1'),dojo.byId('node2')],
duration: 1000
}).play();
};
 
function absoluteXfade(){
dojox.fx.crossFade({
nodes: ["node3","node4"],
duration:1000
}).play();
};
 
var _anim;
function simpleLoop(){
dojo.byId('button').disabled = "disabled";
_anim = dojox.fx.crossFade({
nodes: ["node5","node6"],
duration:1000
});
dojo.connect(_anim,"onEnd","simpleLoop");
_anim.play(500);
};
function stopLoop(){ _anim.stop(); }
 
function buttonExample(){
dojox.fx.crossFade({
nodes: [
// FIXME: fails in ie6?!?
dijit.byId('node7').domNode,
dijit.byId('node8').domNode
],
duration: 350
}).play();
}
 
dojo.addOnLoad(function(){
// this is a hack to make nodes with class="hidden" hidden
// because ie6 is a horrible wretched beast
dojo.query(".hidden").forEach(function(node){
dojo.style(node,"opacity","0");
});
 
 
});
 
</script>
</head>
<body class="tundra">
<h1 class="testTitle">dojox.fx.crossFade test</h1>
 
<h3>a simple demonstration of two nodes fading simultaneously</h3>
<div>
<input type="button" onclick="basicXfade()" value="run" />
<div style="padding:20px">
<div id="node1" style="display:inline;" class="box hidden">box1</div>
<div id="node2" class="box">box2</div>
</div>
<br style="clear:both">
</div>
 
<h3>two nodes with position:relative in a container with position:absolute, crossfading together.</h3>
<input type="button" onclick="absoluteXfade()" value="run" />
<div>
<div style="width:100px; height:100px; position:relative; border:1px solid #666; ">
<div id="node3" style="position:absolute; top:0; left:0;" class="box nopad hidden">box one</div>
<div id="node4" style="position:absolute; top:0; left:0;" class="box two nopad">box two</div>
</div>
<br style="clear:both">
</div>
 
<h3>simple looping crossfade</h3>
<input type="button" onclick="simpleLoop()" value="run" id="button" />
<div>
<div style="padding:20px;">
<div id="node5" class="box nopad">box one</div>
<div id="node6" class="box two nopad hidden">box two</div>
</div>
<br style="clear:both">
</div>
 
<!-- FIXME: acting oddly, only in IE though
<h3>An example of cross-fading a dijit.form.Button</h3>
<input type="button" onclick="buttonExample()" value="run" id="button" />
<div>
<div style="position:relative;">
<div dojoType="dijit.TitlePane" id="node7"
style="position:absolute; top:0; left:0;">Lorem content two</div>
<div dojoTYpe="dijit.TitlePane" id="node8" class="hidden"
style="position:absolute; top:0; left:0;">Lorem content one</div>
</div>
<br style="clear:both;">
</div>
-->
 
<h3>that's all, folks...</h3>
 
</body>
</html>
/trunk/api/js/dojo1.0/dojox/fx/tests/test_slideBy.html
New file
0,0 → 1,58
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dojox.fx - animation sets to use!</title>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script>
<script type="text/javascript" src="../_base.js"></script>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/dijit.css";
@import "../../../dijit/themes/tundra/tundra.css";
@import "../../../dijit/tests/css/dijitTests.css";
 
#sizeToTest {
position:absolute;
top:0;
left:300px;
border:2px solid #ededed;
width:50px; height:50px;
background:#fff;
text-align:center;
}
 
</style>
<script type="text/javascript">
function chainTest(){
// FIXME: not recalculating mixin in init? or not re-mixing, rather.
// happens to a lot of propertyAnimations, actually when chaining, with a
// fixed 'start' property in the mixin. see _base/fx.js:slideBy()
dojo.fx.chain([
dojox.fx.slideBy({ node: 'sizeToTest', top:50, left:50, duration:400 }),
dojox.fx.slideBy({ node: 'sizeToTest', top:25, left:-25, duration:400 })
]).play();
}
</script>
</head>
<body class="tundra">
<h1 class="testTitle">dojox.fx.slideBy test</h1>
 
<a href="#" onclick="javascript:dojox.fx.slideBy({node:'sizeToTest', top:50, left:50, duration:200 }).play()">top: 50, left:50</a>
<a href="#" onclick="javascript:dojox.fx.slideBy({node:'sizeToTest', top:-50, left:50, duration:400 }).play()">top:-50, left:50</a>
<a href="#" onclick="javascript:dojox.fx.slideBy({node:'sizeToTest', top:-50, left:-50, duration:400 }).play()">top:-50, left:-50</a>
<a href="#" onclick="javascript:dojox.fx.slideBy({node:'sizeToTest', top:50, left:-50, duration:400 }).play()">top:50, left:-50</a>
<a href="#" onclick="javascript:chainTest()">chainTest</a>
 
<div id="sizeToTest">
lorem. ipsum.
</div>
HTML AFTER
<br>
 
 
 
</body>
</html>
/trunk/api/js/dojo1.0/dojox/fx/tests/test_sizeTo.html
New file
0,0 → 1,140
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dojox.fx.sizeTo | experimental fx add-ons for the Dojo Toolkit</title>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script>
<script type="text/javascript" src="../_base.js"></script>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/dijit.css";
@import "../../../dijit/themes/tundra/tundra.css";
@import "../../../dijit/tests/css/dijitTests.css";
.testBox {
position:absolute;
top:0; left:0;
width:50px;
height:50px;
background:#ededed;
border:1px solid #b7b7b7;
-moz-border-radius:6pt;
-webkit-border-radius:5pt;
overflow:hidden;
}
</style>
<script type="text/javascript">
var test1 = function(e){
// this is our click test,
dojox.fx.sizeTo({
node: e.target,
width: 120,
height:120,
duration:250
}).play(5);
};
var testundo = function(e){
dojox.fx.sizeTo({
node: e.target,
width:50,
height:50,
duration:320
}).play(5);
};
var test2 = function(e){
dojox.fx.sizeTo({
node: e.target,
width: 120,
height:120,
duration:120,
method:"combine"
}).play(5);
};
 
var noIdTest = function(){
var myNode = dojo.query(".noIdHere")[0]; // first one wins
if(myNode){
// mmm, fake events (all we're using is the target anyway ... )
(!dojo.hasClass(myNode,"testRun") ? test2 : testundo)({ target: myNode });
dojo.toggleClass(myNode,"testRun");
}
};
var init = function(){
// lets setup out connections, etc ...
dojo.connect(dojo.byId("sizer1"),"onmousedown","test1");
dojo.connect(dojo.byId("sizer1"),"onmouseup","testundo"); // generic resest
// did you know dojo normalizes onmouseenter onmouseleave!?!? neat. ie got _one_ thing right.
dojo.connect(dojo.byId("sizer2"),"onmouseenter","test2");
dojo.connect(dojo.byId("sizer2"),"onmouseout","testundo");
// example using dojo.query to get a couple of nodes and roll into one anim
var hasRun = false;
dojo.connect(dojo.byId("sizer3"),"onclick",function(e){
var _anims = [];
dojo.query(".testBox").forEach(function(n){
_anims.push(
dojox.fx.sizeTo({ node: n,
width: ( hasRun ? "50" : "150"),
height: ( hasRun ? "50" : "150"),
method:"chain",
duration:720
})
);
});
hasRun=!hasRun;
var anim = dojo.fx.combine(_anims);
anim.play();
});
};
dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">
<h1 class="testTitle">dojox.fx.sizeTo test</h1>
<p>quick sizeTo API overview:</p>
 
<pre>
dojox.fx.sizeTo({
// basic requirements:
node: "aDomNodeId", // or a domNode reference
width: 200, // measured in px
height: 200, // measured in px
method: "chain" // is default, or "combine"
});
</pre>
<p>
little test blocks (works in Opera, FF/win/mac:
</p>
 
<div style="position:relative; height:60px; width:600px; margin:0 auto;">
<div id="sizer1" class="testBox">
mouse down / mouse up
</div>
<div id="sizer2" class="testBox" style="left:60px;" >
hover / exit
</div>
<div class="testBox noIdHere" style="left:120px; ">
<a href="javascript:noIdTest()">noIdTest()</a>
</div>
<div class="testBox" id="sizer3" style="left:180px;">
all of em'
</div>
</div>
<br style="clear:both;">
(click the box labeled "all of em'" again to reset all nodes)
HTML AFTER
<br>
 
</body>
</html>
/trunk/api/js/dojo1.0/dojox/fx/tests/test_scroll.html
New file
0,0 → 1,93
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dojox.fx.scroll</title>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true"></script>
<!-- <script type="text/javascript" src="../scroll.js"></script> -->
<script type="text/javascript">
dojo.require("dojox.fx.easing");
dojo.require("dojox.fx.scroll");
 
function gotoName(name){
// summary; searches for a <a name=""></a> attrib, and scrolls to it
dojo.query('a[name="'+name+'"]').forEach(function(node){
// first one wins
var anim = dojox.fx.smoothScroll({
node: node,
win:window,
duration:300,
easing:dojox.fx.easing.easeOut
}).play();
return;
});
}
 
dojo.addOnLoad(function(){
/*dojo.connect(dojo.byId("goToHeader0"), "onclick", function (e) {
var h2s = dojo.html.iframeContentDocument(dojo.byId("embed0")).getElementsByTagName('h2');
var h2 = h2s[h2s.length-1];
var anm = new dojo.lfx.smoothScroll(h2,dojo.html.iframeContentWindow(dojo.byId("embed0")),null,500);
anm.play();
});
*/
 
dojo.connect(dojo.byId("goToHeader"), "onclick", function (e) {
var node = dojo.byId('targetHeader3');
var anim0 = dojox.fx.smoothScroll({ node: node, win: window, duration:500, easing:dojox.fx.easing.easeOut });
anim0.play();
});
 
dojo.connect(dojo.byId("goToHeader1"), "onclick", function(/* Event */e){
var node = dojo.byId('targetHeader1');
var anim0 = dojox.fx.smoothScroll({ node: node, win: window, duration:1000, easing:dojox.fx.easing.easeOut });
anim0.play();
});
});
</script>
</head>
<body class="tundra">
 
<a name="top"></a>
<h1 class="testTitle">dojox.fx.scroll tests</h1>
 
<div id="targetHeader3" style="position:absolute; left:0px; top:3000px; padding:100px;" ><h3>YOU FOUND ME!</h3>
<p>neat.</p>
</div>
 
<p>dojox.fx.scroll provides:</p>
<ul>
<li>dojox.fx.smoothScroll()</li>
</ul>
which will create and return a dojo._Animation to scroll
a window to a desired offset.
<p></p>
<h2><code>getScroll</code></h2>
<p>
Scroll top: <span id="scrollTop">0</span><br>
Scroll left: <span id="scrollLeft">0</span>
</p>
 
<table style="position:fixed;top:20px;right:20px;">
<tr><td>
<!-- <input type="button" id="goToHeader0" value="scroll only the iframe (to a node in iframe)"><br> -->
<input type="button" id="goToHeader" value="scroll to to far node"><br>
<input type="button" id="goToHeader1" value="scroll to a node in top window">
</td></tr>
</table>
 
<p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p>
 
 
<h2 id='targetHeader1'><code>getElementsByClass</code></h2>
 
<p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p>
 
<h3 id='targetHeader2'>ContainsAny</h3>
<input type="button" onclick="gotoName('top');" value="back to top">
<p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p>
 
 
</body></html>
/trunk/api/js/dojo1.0/dojox/fx/tests/_animation.css
New file
0,0 → 1,113
.testBox {
border:1px solid #333;
width:75px;
height:75px;
}
.absolutely { position:absolute;
top:0; left:0;
}
.floating {
float:left;
}
.wide {
width:200px;
}
.tall {
height:200px;
}
.tiny {
width:3px;
height:3px;
}
 
 
.black {
color:#fff;
background-color:#000;
}
 
.white {
color:#666;
background-color:#fff;
}
 
.green {
color:#000;
background-color:#eef;
}
.red {
color:#fff;
background-color:#ffe;
}
.blue {
color:#000;
background-color:#fef !important;
}
 
/* font sizes */
.baseFont {
line-height:14px;
font:12px Arial,sans-serif;
letter-spacing:0.1em;
}
 
.spacedVertical {
line-height:42px;
}
.spacedHorizontal {
letter-spacing:0.42em;
}
.fontSizeTest {
font:20px Arial,sans-serif;
}
 
/* margins */
.bigMargin {
margin:30px;
}
.noMargin {
margin:0;
}
.mediumMargin {
margin:15px;
}
.bigMarginLeft {
margin-left:150px;
}
 
/* padding */
.padded {
padding:3px;
}
.noPadding {
padding:0;
}
.topPadding {
padding-top:50px;
}
.bigPadding {
padding:30px;
}
 
/* positioning */
 
.offsetSome {
top:50px;
left:75px;
}
 
.topLeft {
top:0;
left:0;
}
.bottomRight {
bottom:0;
right:0;
}
 
.bothAxis {
top:10px;
left:10px;
right:10px;
bottom:10px;
}
/trunk/api/js/dojo1.0/dojox/fx/tests/example_Line.html
New file
0,0 → 1,82
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dojoClass detail information</title>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/tundra/tundra.css";
@import "../../../dijit/tests/css/dijitTests.css";
#node {
position:absolute;
top:100px; left:100px;
width:400px;
height:400px;
padding:12px;
-moz-border-radius:5pt;
overflow:hidden;
border:1px solid #333;
}
</style>
<script type="text/javascript"
djConfig="parseOnLoad: true"
src="../../../dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojox.fx.easing");
dojo.require("dojox.gfx");
 
var surface, shape, line, node;
dojo.addOnLoad(function(){
// dojo._Line is just a simple class to hold some numbers, and return a given point
// on the line as a percentage, essentially
var _line = new dojo._Line(20,75); // a holder for the numbers 100..300
console.log(_line,_line.getValue(0.5 /* Float: 0..1 */)); // should return 200
 
node = dojo.byId('node');
 
surface = dojox.gfx.createSurface(node,400,400);
shape = surface.createCircle({ cx: 200, cy: 200, r: 20 })
.setFill([0,0,255])
.setStroke({ color:[128,128,128], width: 1});
// so we just make a raw _Animation
var _anim = new dojo._Animation({
// the id of the shape
node: node,
// some easing options
easing: dojox.fx.easing.easeInOut,
// our radius start and end values
curve:_line,
// call transform on the shape with the values
onAnimate: function(){
shape.setShape({ r: arguments[0] });
},
duration:1200 // ms
// rate:100 // ms, so duration/rate iterations
});
 
 
dojo.connect(_anim,"onEnd",function(){
dojo.animateProperty({
node: node,
duration:1000,
properties: {
left: { end: 300, unit:"px" }
},
onEnd: function(){
dojo.fadeOut({ node: node, duration:3000 }).play();
}
}).play(500);
});
_anim.play(2000);
});
</script>
</head>
<body class="tundra">
<h1>animateProperty for dojox.gfx</h1>
<div id="node"></div>
 
</body>
</html>