| <!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> |
