<!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.CharPicker</title>
<meta charset=utf-8>
<!-- common css used by all closure demos; not required for char picker -->
<link rel="stylesheet" href="css/demo.css">
<!-- used only for button in this page; not required for char picker-->
<link rel="stylesheet" href="../css/menubutton.css">
<!-- only required css for char picker -->
<link rel="stylesheet" href="../css/charpicker.css">
<script src="../base.js"></script>
<script>
goog.require('goog.i18n.CharPickerData');
goog.require('goog.i18n.uChar.LocalNameFetcher');
goog.require('goog.ui.CharPicker');
</script>
<style>
#p1_value {
color: red;
font-weight: bold;
font-size: large;
}
p {
height: 2em;
}
</style>
</head>
<body>
<h1>goog.ui.CharPicker</h1>
<p>You have selected: <span id="p1_value">none</span>
<div id="char-picker"></div>
<script>
var picker = new goog.ui.CharPicker(new goog.i18n.CharPickerData(),
new goog.i18n.uChar.LocalNameFetcher(),
["\uD869\uDED6", "a", "b", "c"], 10, 1);
var el = goog.dom.getElement('char-picker');
picker.decorate(el);
// Action on selection
var selectionAction = function() {
goog.dom.setTextContent(goog.dom.getElement('p1_value'),
picker.getSelectedChar());
};
// Get selected locale from the char picker.
goog.events.listen(picker, 'action', function(e) { selectionAction(); });
</script>
<p>
<input type="button" value="Dispose" onclick="picker.dispose()">
</p>
</body>
</html>