<!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.ColorPicker</title>
<script src="../base.js"></script>
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="../css/colorpicker-simplegrid.css">
<script>
goog.require('goog.ui.ColorPicker');
goog.require('goog.dom');
</script>
</head>
<body>
<h1>goog.ui.ColorPicker</h1>
<p>Simple Color Grid</p>
<div id="colorpicker02"></div>
<p id="picker02message"></p>
<script>
var picker02 = new goog.ui.ColorPicker.createSimpleColorGrid();
picker02.render(goog.dom.getElement('colorpicker02'));
goog.events.listen(picker02, goog.ui.ColorPicker.EventType.CHANGE,
function(event) {
var color = event.target.getSelectedColor() || '#000000';
var el = goog.dom.getElement('picker02message');
el.innerHTML = 'You selected: ' + color;
el.style.color = color;
});
</script>
</body>
</html>