You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
2.8 KiB
87 lines
2.8 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|
"http://www.w3.org/TR/html4/strict.dtd" |
|
> |
|
<html lang="en"> |
|
<head> |
|
<title>Test dojox.fx.ext-dojo.complex</title> |
|
<style> |
|
@import "../../../dijit/tests/css/dijitTests.css"; |
|
body{ |
|
font-family:sans-serif; |
|
font-size:14px; |
|
} |
|
#cnt{ |
|
width:300px; |
|
height:300px; |
|
border:1px solid #666; |
|
position:relative; |
|
} |
|
#words{ |
|
width:300px; |
|
height:300px; |
|
margin:0px; |
|
padding:5px; |
|
top:0px; |
|
position:absolute; |
|
border:1px solid #000; |
|
background:#0000ff; |
|
clip:rect(10px 30px 30px 10px); |
|
} |
|
code{ |
|
font-family:monospace; |
|
font-size:11px; |
|
white-space:nowrap; |
|
} |
|
</style> |
|
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad: true" ></script> |
|
<script> |
|
dojo.require("dojox.fx.ext-dojo.complex"); |
|
|
|
dojo.addOnLoad(function(){ |
|
var ani = dojo.animateProperty({ |
|
node:dojo.byId("words"), |
|
duration:800, |
|
properties:{ |
|
clip:{start:'rect(150px 150px 150px 150px)', end:'rect(0px 300px 300px 0px)'} |
|
} |
|
}).play(); |
|
}); |
|
|
|
</script> |
|
</head> |
|
<body> |
|
<h1>Test dojox.fx.ext-dojo.complex</h1> |
|
<p> |
|
The <em>dojox.fx.ext-dojo.complex</em> class is an extension of dojo.animateProperty which adds functionality |
|
that animates a "complex property". The primary example is the |
|
clip style: <code>rect(10px 30px 10px 50px)</code>. |
|
</p> |
|
<p> |
|
Frankly, the clip style is not very useful nor exciting. But the <em>dojox.fx.ext-dojo.complex</em> class |
|
will animate any property contained within parenthesis. So it can also be used with (and is actually intended for) |
|
CSS3 properties, such as transform: |
|
<code>transform: rotate(10deg) translateX(0px)</code> |
|
or even gradients (it would only affect the properties within the color-stops): |
|
<code>background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #ff0000),color-stop(1.0, #0000FF));</code> |
|
</p> |
|
<p> |
|
A few notes on the clip:rect() property. IE only accepts no commas - Firefox & Safari accepts both. So.... don't use commas! |
|
Also, the node must be set to position:absolute to work. |
|
</p> |
|
<div id="cnt"> |
|
<div id="words"> |
|
<p> |
|
Dojo saves you time, performs better, and scales to meet your needs. |
|
It's the toolkit that experienced designers and developers turn to for building great experiences. |
|
<br/><br/> |
|
Dojo is a set of integrated libraries that accelerate development from simple pages to the most sophisticated web applications. |
|
Great resources are available to help you take advantage of all that power. |
|
<br/><br/> |
|
Dojo Campus hosts the official documentation wiki, short how-to articles, and a rich set of examples |
|
to help you leverage the power and depth of Dojo. |
|
</p> |
|
</div> |
|
</div> |
|
|
|
</body> |
|
</html>
|
|
|