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