| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>goog.fx.Dragger</title> |
| <meta charset="utf-8"> |
| <link rel="stylesheet" href="css/demo.css"> |
| <script src="../base.js"></script> |
| <script> |
| goog.require('goog.fx.Dragger'); |
| goog.require('goog.dom'); |
| goog.require('goog.style'); |
| </script> |
| <style> |
| #frame { |
| position: absolute; |
| left: 99px; |
| top: 99px; |
| width: 802px; |
| height: 502px; |
| border: 1px solid #999; |
| background-color: #F0F0F0; |
| } |
| |
| .window { |
| position:absolute; |
| left: 150px; |
| top: 110px; |
| width: 300px; |
| height: 100px; |
| background-color: rgb(200,200,250); |
| border: 1px solid #99F; |
| font: bold 11px/18px arial; |
| text-indent: 10px; |
| color: #FFF; |
| } |
| |
| #win2 { |
| top:250px; |
| background-color: rgb(250,200,200); |
| border: 1px solid #F99; |
| } |
| |
| #win3 { |
| left:500px; |
| background-color: rgb(150,200,150); |
| border: 1px solid #6A6; |
| } |
| |
| .bar { |
| position:absolute; |
| left: 0px; |
| top: 0px; |
| width: 300px; |
| height: 20px; |
| background-color: #99F; |
| cursor: default; |
| } |
| #win2 .bar { background-color: #F99; } |
| #win3 .bar { background-color: #6A6; } |
| |
| #sliderback { |
| position: absolute; |
| left: 50px; |
| top: 98px; |
| height: 505px; |
| width: 1px; |
| font-size: 1px; |
| background-color: #999; |
| } |
| |
| #slider { |
| position: absolute; |
| left: 35px; |
| top: 98px; |
| width: 30px; |
| height: 13px; |
| font: normal 10px verdana; |
| background-color: #EEE; |
| color: #000; |
| text-align:center; |
| border: 1px solid #999; |
| cursor: default; |
| } |
| |
| #ghostbox { |
| position: absolute; |
| left: 100px; |
| top: 625px; |
| width: 600px; |
| height: 20px; |
| } |
| |
| .block { |
| position: absolute; |
| left: 0px; |
| top: 0px; |
| width: 125px; |
| height: 20px; |
| font: bold 11px/18px arial; |
| background-color: #AAA; |
| color: #EEE; |
| text-align: center; |
| border: 1px solid #666; |
| } |
| |
| .ghost0 { left: 0px; } |
| .ghost1 { left: 130px; } |
| .ghost2 { left: 260px; } |
| .ghost3 { left: 390px; } |
| |
| </style> |
| </head> |
| <body> |
| <h1>goog.fx.Dragger</h1> |
| <p><strong>Demonstrations of the drag utiities</strong>.</p> |
| |
| <div id="frame"></div> |
| |
| <div id="win1" class="window"><div class="bar">Drag Me...</div></div> |
| <div id="win2" class="window"><div class="bar">Drag Me...</div></div> |
| <div id="win3" class="window"><div class="bar">Drag Me...</div></div> |
| |
| <div id="sliderback"></div> |
| <div id="slider">0</div> |
| |
| |
| <script> |
| |
| var $ = goog.dom.getElement; |
| |
| // WINDOW EXAMPLE |
| //================ |
| |
| var Z = 5; |
| |
| var limits = new goog.math.Rect(100, 100, 500, 400) ; |
| |
| var window1 = new goog.fx.Dragger($('win1'), $('win1').firstChild, limits); |
| var window2 = new goog.fx.Dragger($('win2'), $('win2').firstChild, limits); |
| var window3 = new goog.fx.Dragger($('win3'), $('win3').firstChild); |
| |
| window3.setHysteresis(6); |
| |
| function setZ(e) { |
| this.target.style.zIndex = Z++; |
| goog.style.setOpacity(this.target, 0.50); |
| } |
| |
| function end(e) { |
| goog.style.setOpacity(this.target, 1); |
| } |
| |
| goog.events.listen(window1, 'start', setZ); |
| goog.events.listen(window2, 'start', setZ); |
| goog.events.listen(window3, 'start', setZ); |
| |
| goog.events.listen(window1, 'end', end); |
| goog.events.listen(window2, 'end', end); |
| goog.events.listen(window3, 'end', end); |
| |
| |
| // SLIDER EXAMPLE |
| //================ |
| |
| var slider1 = new goog.fx.Dragger($('slider'), null, |
| new goog.math.Rect(35, 98, 0, 490)); |
| |
| goog.events.listen(slider1, 'drag', function(e) { |
| var percent = Math.round(100 * (e.top - e.dragger.limits.top) / |
| e.dragger.limits.height); |
| $('slider').innerHTML = percent; |
| }); |
| |
| |
| goog.events.listen(window, 'unload', function(e) { |
| window1.dispose(); |
| window2.dispose(); |
| window3.dispose(); |
| |
| slider1.dispose(); |
| }); |
| |
| </script> |
| </body> |
| </html> |
| <!-- |
| Copyright 2010 The Closure Library Authors. All Rights Reserved. |
| |
| Use of this source code is governed by the Apache License, Version 2.0. |
| See the COPYING file for details. |
| --> |
