aboutsummaryrefslogtreecommitdiff
path: root/contexts/data/lib/closure-library/closure/goog/demos/drag.html
diff options
context:
space:
mode:
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.html191
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.
--->