dial_simple.html revision e4f01a858850b47e385f5fa32c1b79fe457f9475
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl<html>
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl<head>
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl<title>Dial Widget Manual Test</title>
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl<!-- Source File and Seed for YUI3-->
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl<link rel="stylesheet" type="text/css" href="/build/cssreset/reset-min.css">
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl<link type="text/css" rel="stylesheet" href="/build/cssfonts/fonts-min.css">
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl<script src="/build/yui/yui.js"></script>
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl<style>
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl.intro-sentence{
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl margin:3em;
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl}
c3aaccf2d58cbd445efed832c4028787ac9f1542noodlbody{
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl margin-top:30px;
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl}
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl.steps{
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl margin:20px;
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl}
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl.steps li{margin-bottom:1em;}
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl.steps li a {margin-right:2em; border:solid 1px #dddddd; background-color:#eeeeee; padding:3px 6px; cursor:pointer;}
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl#myOtherNode {margin-bottom: 1em;}
c3aaccf2d58cbd445efed832c4028787ac9f1542noodlp{margin:40px;}
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl</style>
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl</head>
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl<body class="yui3-skin-sam">
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl <span id="dial_container">This is a Dial Widget. It supports keyboard input and screen readers.</span>
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl <ul class="steps">
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl <li><a class="xx d_min">-minor</a><a class="xx i_min">+minor</a></li>
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl <li><a class="xx d_maj">-major</a><a class="xx i_maj">+major</a></li>
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl <li><a class="xx min">min</a><a class="xx max">max</a></li>
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl <li><a class="xx orig">origin</a></li>
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl </ul>
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl <input id="myOtherNode" value="hello">
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl <br>
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl <span id="dial_container_big">test a larger size. <p>increment controls don't affect this one.</p></span>
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl <span id="dial_container_small">test a small size. </span>
ca33b922ae8ad1b24a8235b656b0ac6f82915355jim <p>test min max _______________________</p>
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl <p>
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl <p></p>
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl</body>
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl</html>
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl<script>
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl YUI({lang:'es', filter:'raw'}).use("dial", function(Y) { //, filter:'raw' this make it really hard to clear cache on iPad
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl var dial = new Y.Dial({
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl min:-2,
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl max:110,
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl stepsPerRevolution:100,
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl value: 5,
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl diameter: 200,
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl decimalPlaces:0
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl });
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl dial.render("#dial_container");
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl
ca33b922ae8ad1b24a8235b656b0ac6f82915355jim
ca33b922ae8ad1b24a8235b656b0ac6f82915355jim
ca33b922ae8ad1b24a8235b656b0ac6f82915355jim
ca33b922ae8ad1b24a8235b656b0ac6f82915355jim Y.on('click', function(e){
ca33b922ae8ad1b24a8235b656b0ac6f82915355jim if(e.target.hasClass('i_min')){
ca33b922ae8ad1b24a8235b656b0ac6f82915355jim dial._incrMinor();
ca33b922ae8ad1b24a8235b656b0ac6f82915355jim }
ca33b922ae8ad1b24a8235b656b0ac6f82915355jim if(e.target.hasClass('d_min')){
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl dial._decrMinor();
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl }
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl if(e.target.hasClass('i_maj')){
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl dial._incrMajor();
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl }
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl if(e.target.hasClass('d_maj')){
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl dial._decrMajor();
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl }
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl if(e.target.hasClass('min')){
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl dial._setToMin();
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl }
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl if(e.target.hasClass('max')){
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl dial._setToMax();
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl }
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl if(e.target.hasClass('orig')){
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl dial._resetDial();
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl }
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl }, '.xx');
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl // update value of the Dial from another object's value when it gets a keyup event
c3aaccf2d58cbd445efed832c4028787ac9f1542noodl 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>