dial.html revision 41a8874f3c14857a5a311a43eaf30a123f376771
<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;}
</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>
</body>
</html>
<script>
YUI({lang:'es', filter:'raw'}).use("dial", function(Y) {
var dial = new Y.Dial({
min:-220,
max:220,
stepsPerRev:100,
value: 80,
diameter: 100
});
dial.render("#dial_container");
var dialBig = new Y.Dial({
min:-220,
max:220,
stepsPerRev:100,
value: 0,
diameter: 439
});
dialBig.set('strings',{'label':'Change labels before render'});
dialBig.render("#dial_container_big");
var dialSmall = new Y.Dial({
min:-220,
max:220,
stepsPerRev:100,
value: 80,
diameter: 37,
strings: {label: 'My small pre-render label', resetStr: 'Reset Long', tooltipHandle: 'Drag small handle to set value'}
});
dialSmall.render("#dial_container_small");
// dialBig._setLabelString('Label after render:'); // These are deprecated
// dialBig._setTooltipString('Tooltip after render');
// dialBig._setResetString('Reset Me');
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'));
Y.log('dial._angle: ' + dial._angle);
});
});
</script>