123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 |
- <!DOCTYPE html>
- <html>
- <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() {
-
- var box1 = new goog.demos.SampleComponent();
- box1.render(goog.dom.getElement('target1'));
-
- var box2 = new goog.demos.SampleComponent();
- box2.decorate(goog.dom.getElement('target2'));
-
- 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>
-
- <div id="target1">
- <p>Click on this big, colored box:</p>
- </div>
- <hr />
- <div>
- <p>Or this box:</p>
-
- <div style="width: 50%" id="target2">Label from decorated DIV.</div>
- </div>
- <hr />
- <p>This box's label keeps changing:</p>
-
- <div style="width: 50%; float: right;" id="target3"></div>
- </body>
- </html>
|