Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
70 lines (63 sloc) 2.64 KB
<html>
<head>
<title>Test XBL Bindings</title>
<style type="text/css">
html, body {font-size:12px;}
#target, #target2 {-moz-binding:url(Tweening.xml#TweeningElement); border:1px solid; background:#EEE; width:200px; height:300px; left:50px; top:50px; position:absolute; padding:.5em;}
p {margin:0 0 .5em; padding:0;}
.z {background:#FFF; border:1px solid #CCC; position:relative; margin-left:300px;}
</style>
<script type="text/javascript" src="XBL.js"></script>
</head>
<body>
<div id="target">
<p>X: <input type="text" id="inputX" size="3" value="100" /></p>
<p>Y: <input type="text" id="inputY" size="3" value="100" /></p>
<p>Z: <input type="text" id="inputZ" size="2" value="40" /></p>
<p>Width: <input type="text" id="inputW" size="3" value="300" /></p>
<p>Height: <input type="text" id="inputH" size="3" value="400" /></p>
<p>Frames: <input type="text" id="inputF" size="3" value="20" /></p>
<p>Framerate: <input type="text" id="inputFR" size="3" value="20" /></p>
<p>Position: <select onchange="document.getElementById('target').style.position = this.value;"><option>absolute</option><option>relative</option><option>fixed</option><option>static</option></select></p>
<p><input type="button" onclick="
var tgt = document.getElementById('target');
tgt.x = document.getElementById('inputX').value;
tgt.y = document.getElementById('inputY').value;
tgt.z = document.getElementById('inputZ').value;
tgt.width = document.getElementById('inputW').value;
tgt.height = document.getElementById('inputH').value;
tgt.frames = document.getElementById('inputF').value;
tgt.framerate = document.getElementById('inputFR').value;
tgt.tween();
" value="Tween!" />
</p>
</div>
<div id="target2" style="position:absolute; left:400px; top:100px; z-index:50;">
<p><input type="button" onclick="
var tgt = document.getElementById('target2');
tgt.x = 200;
tgt.y = 300;
tgt.z = 1;
tgt.width = 100;
tgt.height = 50;
tgt.frames = 50;
tgt.framerate = 20;
tgt.tween();
" value="Tween!" /></p>
</div>
<p class="z" style="z-index:2">...</p>
<p class="z" style="z-index:4">...</p>
<p class="z" style="z-index:6">...</p>
<p class="z" style="z-index:8">...</p>
<p class="z" style="z-index:10">...</p>
<p class="z" style="z-index:12">...</p>
<p class="z" style="z-index:14">...</p>
<p class="z" style="z-index:16">...</p>
<p class="z" style="z-index:18">...</p>
<p class="z" style="z-index:20">...</p>
<p class="z" style="z-index:22">...</p>
<p class="z" style="z-index:24">...</p>
<p class="z" style="z-index:26">...</p>
<p class="z" style="z-index:28">...</p>
<p class="z" style="z-index:30">...</p>
</body>