chao
/
mini_cocopi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
							<!DOCTYPE html>
<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.

-->
<head>
  <title>goog.ui.Component</title>
  <meta charset="utf-8">
  <script src="../base.js"></script>
  <script>

    goog.require('goog.ui.Component');

    goog.require('goog.Timer');

  </script>
  <script src="../demos/samplecomponent.js"></script>
  <script>

    function initPage() {

      // Shows default initial label

      var box1 = new goog.demos.SampleComponent();

      box1.render(goog.dom.getElement('target1'));


      // Shows label taken from DIV text

      var box2 = new goog.demos.SampleComponent();

      box2.decorate(goog.dom.getElement('target2'));


      // Shows initial Label + setting label

      var box3 = new goog.demos.SampleComponent('Counting...');

      box3.decorate(goog.dom.getElement('target3'));


      var t = new goog.Timer(2000);

      var value = 0;

      goog.events.listen(t, goog.Timer.TICK, function (e) {

          box3.setLabelText((++value).toString());

      });

      t.start();

    }

    goog.events.listen(window, goog.events.EventType.LOAD, initPage);

  </script>

  <link rel="stylesheet" href="css/demo.css">
  <style>

    .goog-sample-component {

      height: 1em;

      padding: 1em;

      color: white;

      text-align: center;

      font-size: 150%;

    }

  </style>
</head>
<body>
  <h1>goog.ui.Component</h1>

  <!-- This div will have a Sample Component added to its contents. -->
  <div id="target1">
    <p>Click on this big, colored box:</p>
  </div>

  <hr />

  <div>
    <p>Or this box:</p>
    <!-- This div will have its contents decorated by a Sample Component. -->
    <div style="width: 50%" id="target2">Label from decorated DIV.</div>
  </div>

  <hr />
  <p>This box's label keeps changing:</p>
  <!-- This div will also have its contents decorated by a Sample Component. -->
  <div style="width: 50%; float: right;" id="target3"></div>

</body>
</html>