basic.html revision 8047ca98fec9d6ef0332db9181173401bb9eeaa3
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala<!doctype html>
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala<html>
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala<head>
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala <title>Test Page</title>
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala <style type="text/css">
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala .markup {
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala margin: 10px 0 0 300px;
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala }
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala </style>
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala</head>
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala<body class="yui3-skin-sam">
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala<div class="markup">
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala <div id="slider"></div>
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala <p>
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala <input type="button" id="size" value="Change size">
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala <input type="button" id="val" value="Set Value">
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala <input type="button" id="disable" value="Disable">
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala <!--<input type="button" id="incr" value="incr">-->
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala </p>
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala <div id="report">0</div>
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala</div>
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala<script src="/build/yui/yui.js"></script>
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala<script>
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy TummalaYUI({
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala filter: 'raw'
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala}).use('slider',function (Y) {
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummalavar report = Y.one('#report');
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummalavar s = new Y.Slider({
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala //axis : 'y',
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala length: '350px',
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala min : -37,
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala max : 218,
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala value : 136,
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala// minorStep: 3,
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala after : {
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala valueChange: function (e) {
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala report.set('innerHTML',e.newVal);
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala }
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala }
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala});
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummalas.set('min', 10);
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummalas.render('#slider');
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummalas.on('railMouseDown', function (e) {
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala console.log(e);
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala});
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummalas.rail.on(['mousedown', 'mouseup', 'click'], function (e) {
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala e.type;
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala console.log(e);
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala});
c87dd6b73ce417a1c364f2b85436755e8e3ade21Rajkumar Sivaprakasam
c87dd6b73ce417a1c364f2b85436755e8e3ade21Rajkumar Sivaprakasamreport.set('innerHTML',s.get('value'));
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy TummalaY.one('#size').on('click',function () {
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala s.set('length','155px');
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala});
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy TummalaY.one('#val').on('click',function () {
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala s.set('value',s.get('value') === -92 ? 100 : -92);
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala});
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy TummalaY.one('#disable').on('click',function () {
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala var disabled = !s.get('disabled');
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala s.set('disabled',disabled);
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala this.set('value', disabled ? "Enable" : "Disable");
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala});
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala// Y.one('#incr').on('click',function () {
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala// s.set('value', 133);
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala// Y.log('myVal' + s.get('value'));
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala// s.set('value', 134);
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala// Y.log('myVal' + s.get('value'));
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala// });
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala});
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala</script>
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala</body>
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala</html>
1cfa752f4e24c34133009b0f6c139127a5c461deRamaswamy Tummala