jack
/
cocorobolx


			
				
					
						
						
							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>