<!DOCTYPE html>
<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.
-->
<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>
Codebase Browser
chromium