diff options
Diffstat (limited to 'contexts/data/lib/closure-library/closure/goog/demos/drag.html')
-rw-r--r-- | contexts/data/lib/closure-library/closure/goog/demos/drag.html | 191 |
1 files changed, 0 insertions, 191 deletions
diff --git a/contexts/data/lib/closure-library/closure/goog/demos/drag.html b/contexts/data/lib/closure-library/closure/goog/demos/drag.html deleted file mode 100644 index 8d4b549..0000000 --- a/contexts/data/lib/closure-library/closure/goog/demos/drag.html +++ /dev/null @@ -1,191 +0,0 @@ -<!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. ---> |