dial_simple.html revision b6728820ae681622a056c2cd665139f59789c664
<html>
<head>
<title>Dial Widget Manual Test</title>
<!-- Source File and Seed for YUI3-->
<style>
.intro-sentence{
margin:3em;
}
body{
margin-top:30px;
}
.steps{
margin:20px;
}
.steps li{margin-bottom:1em;}
.steps li a {margin-right:2em; border:solid 1px #dddddd; background-color:#eeeeee; padding:3px 6px; cursor:pointer;}
#myOtherNode {margin-bottom: 1em;}
p{margin:40px;}
</style>
</head>
<body class="yui3-skin-sam">
<span id="dial_container">This is a Dial Widget. It supports keyboard input and screen readers.</span>
<ul class="steps">
<li><a class="xx d_min">-minor</a><a class="xx i_min">+minor</a></li>
<li><a class="xx d_maj">-major</a><a class="xx i_maj">+major</a></li>
<li><a class="xx min">min</a><a class="xx max">max</a></li>
<li><a class="xx orig">origin</a></li>
</ul>
<input id="myOtherNode" value="hello">
<br>
<span id="dial_container_big">test a larger size. <p>increment controls don't affect this one.</p></span>
<span id="dial_container_small">test a small size. </span>
<p>test min max _______________________</p>
<p>
<p></p>
</body>
</html>
<script>
YUI({lang:'es'}).use("dial", function(Y) { //, filter:'raw' this make it really hard to clear cache on iPad
var dial = new Y.Dial({
min:-220,
max:220,
stepsPerRevolution:100,
value: 5,
diameter: 300,
decimalPlaces:0
});
dial.render("#dial_container");
Y.on('click', function(e){
if(e.target.hasClass('i_min')){
dial._incrMinor();
}
if(e.target.hasClass('d_min')){
dial._decrMinor();
}
if(e.target.hasClass('i_maj')){
dial._incrMajor();
}
if(e.target.hasClass('d_maj')){
dial._decrMajor();
}
if(e.target.hasClass('min')){
dial._setToMin();
}
if(e.target.hasClass('max')){
dial._setToMax();
}
if(e.target.hasClass('orig')){
dial._resetDial();
}
}, '.xx');
// update value of the Dial from another object's value when it gets a keyup event
Y.on('keyup', function(e){
dial.set('value', e.target.get('value') - 0);
}, '#myOtherNode');
// update the value of another object when the Dial changes value
dial.after('valueChange', function(e){
// Y.one('#myOtherNode').set('value', e.target.get('value').toFixed(e.target.get('decimalPlaces')));
Y.one('#myOtherNode').set('value', e.target.get('value'));
// Y.log('dial._angle: ' + dial._angle + '... prevAng: ' + dial._prevAng + '...wrapping: ' + dial._timesWrapped);
});
});
</script>