drag.html | Explore in Territory

<!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 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.
-->
chromium/third_party/google-closure-library/closure/goog/demos/drag.html
