この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
Closure Libraryに用意されている「goog.ui.ColorMenuButton」は、カラーパレットを備えた色選択用のボタンコンポーネントです。
デモ
ColorMenuButtonのサンプルです。比較の為にHTML5で導入されたinput要素の「type="color"」も表示しています。
#ff0000 | ColorMenuButtonを「描画(render)」したものです。 | |
#00ff00 | ColorMenuButtonを「装飾(decorate)」したもの | |
#0000ff | カスタムカラーパレットを設定したColorMenuButtonを「描画(render)」したものです。 | |
#ff0000 | HTML5のカラー入力コントロールです。 |
デモコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>goog.ui.ColorMenuButton</title>
<meta charset=utf-8>
<script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
<script>
goog.require('goog.ui.ColorMenuButton');
goog.require('goog.ui.CustomColorPalette');
goog.require('goog.ui.Component.EventType');
goog.require('goog.ui.Menu');
goog.require('goog.ui.MenuItem');
goog.require('goog.ui.Separator');
goog.require('goog.ui.decorate');
</script>
<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/common.css">
<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/menu.css">
<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/menuitem.css">
<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/menuseparator.css">
<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/menubutton.css">
<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/custombutton.css">
<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/palette.css">
<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/colorpalette.css">
<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/colormenubutton.css">
<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/toolbar.css">
</head>
<body>
<table>
<tbody>
<tr>
<td id="cmb1"></td>
<td id="cell1">#ff0000</td>
<td>ColorMenuButtonを「描画(render)」したものです。</td>
</tr>
<tr>
<td><div id="cmb2" class="goog-color-menu-button" title="カラーを選択してください">Color</div></td>
<td id="cell2">#00ff00</td>
<td>ColorMenuButtonを「装飾(decorate)」したもの</td>
</tr>
<tr>
<td id="cmb3"></td>
<td id="cell3">#0000ff</td>
<td>カスタムカラーパレットを設定したColorMenuButtonを「描画(render)」したものです。</td>
</tr>
<tr>
<td><input id="colorinput" type="color" value="#ff0000" /></td>
<td id="cell4">#ff0000</td>
<td>HTML5のカラー入力コントロールです。</td>
</tr>
</tbody>
</table>
<script>
var cmb1 = new goog.ui.ColorMenuButton('Color');
cmb1.setTooltip('カラーを選択してください');
cmb1.setSelectedColor('#FF0000');
cmb1.addEventListener(goog.ui.Component.EventType.ACTION, function(event) {
goog.dom.setTextContent(goog.dom.getElement('cell1'), event.target.getSelectedColor());
});
cmb1.render(goog.dom.getElement('cmb1'));
var cmb2 = goog.ui.decorate(goog.dom.getElement('cmb2'));
cmb2.setSelectedColor('#00FF00');
cmb2.addEventListener(goog.ui.Component.EventType.ACTION, function(event) {
goog.dom.setTextContent(goog.dom.getElement('cell2'), event.target.getSelectedColor());
});
var customColorPalette = new goog.ui.CustomColorPalette(['#F00', '#0F0', '#00F']);
customColorPalette.setSize(8);
var customColorMenu = new goog.ui.Menu();
customColorMenu.addItem(new goog.ui.MenuItem('なし', goog.ui.ColorMenuButton.NO_COLOR));
customColorMenu.addItem(new goog.ui.Separator());
customColorMenu.addItem(customColorPalette);
var cmb3 = new goog.ui.ColorMenuButton('Custom', customColorMenu);
cmb3.setTooltip('カスタムカラーを選択してください');
cmb3.setSelectedColor('#0000FF');
cmb3.addEventListener(goog.ui.Component.EventType.ACTION, function(event) {
goog.dom.setTextContent(goog.dom.getElement('cell3'), event.target.getSelectedColor());
});
cmb3.render(goog.dom.getElement('cmb3'));
goog.events.listen(goog.dom.getElement('colorinput'), 'change', function(event) {
goog.dom.setTextContent(goog.dom.getElement('cell4'), event.target.value);
});
</script>
</body>
</html>
解説
ColorMenuButtonインスタンスを生成し、対象要素へ「描画(render)」もしくは「装飾(decorate)」することで使用します。
Closure Libraryのロード
<script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
<script>
goog.require('goog.ui.ColorMenuButton');
goog.require('goog.ui.CustomColorPalette');
goog.require('goog.ui.Component.EventType');
goog.require('goog.ui.Menu');
goog.require('goog.ui.MenuItem');
goog.require('goog.ui.Separator');
goog.require('goog.ui.decorate');
</script>
- 6行目
- Closure Libraryのbase.jsをロードします。
(このbase.jsをロードした場合には多くのスクリプト群がロードされる為、リリースするWebアプリケーションではこの形式は取りません。通常はClosure Libraryによる依存性管理およびClosure Compilerによるスクリプトの統合が用いられます。) - 7~15行目
- 必要とするClosure Libraryを宣言します。ここで「require」したものがグローバル変数領域に展開されます。
標準スタイルのロード
<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/common.css">
<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/menu.css">
<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/menuitem.css">
<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/menuseparator.css">
<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/menubutton.css">
<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/custombutton.css">
<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/palette.css">
<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/colorpalette.css">
<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/colormenubutton.css">
<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/toolbar.css">
- 16~25行目
- 「common.css」にはコンポーネント共通のスタイル等が定義されているのでロードします。他、ColorMenuButtonのスタイル定義「colormenubutton.css」以外にも多くのスタイル定義をロードしていますが、これはColorMenuButtonが複数のコンポーネントを利用して作られている為です。表示がおかしい時は必要とされているCSSが全て読み込まれているか確認すると良いと思います。
画面要素
<tr>
<td id="cmb1"></td>
<td id="cell1">#ff0000</td>
<td>ColorMenuButtonを「描画(render)」したものです。</td>
</tr>
<tr>
<td><div id="cmb2" class="goog-color-menu-button" title="カラーを選択してください">Color</div></td>
<td id="cell2">#00ff00</td>
<td>ColorMenuButtonを「装飾(decorate)」したもの</td>
</tr>
<tr>
<td id="cmb3"></td>
<td id="cell3">#0000ff</td>
<td>カスタムカラーパレットを設定したColorMenuButtonを「描画(render)」したものです。</td>
</tr>
<tr>
<td><input id="colorinput" type="color" value="#ff0000" /></td>
<td id="cell4">#ff0000</td>
<td>HTML5のカラー入力コントロールです。</td>
</tr>
- 31行目
- ColorMenuButtonを「描画(render)」する対象のtd要素です。描画により、ColorMenuButtonを構成する要素はこのtd要素の子要素として生成されます。
- 36行目
- ColorMenuButtonを「装飾(decorate)」する対象のdiv要素です。装飾時にColorMenuButtonコンポーネントであることを示す為にクラス名「goog-color-menu-button」を指定しています。装飾により、ColorMenuButtonを構成する要素はこのdiv要素をルートとして構築されます。
- 41行目
- カスタムカラーパレットを持ったColorMenuButtonを「描画(render)」する対象のtd要素です。描画により、ColorMenuButtonを構成する要素はこのtd要素の子要素として生成されます。
ColorMenuButtonの生成および描画
var cmb1 = new goog.ui.ColorMenuButton('Color');
cmb1.setTooltip('カラーを選択してください');
cmb1.setSelectedColor('#FF0000');
cmb1.addEventListener(goog.ui.Component.EventType.ACTION, function(event) {
goog.dom.setTextContent(goog.dom.getElement('cell1'), event.target.getSelectedColor());
});
cmb1.render(goog.dom.getElement('cmb1'));
- 53行目
- ColorMenuButtonコンポーネントのインスタンスを生成しています。引数にはボタンのラベル文字列「Color」を指定しています。
- 54行目
- ツールチップに表示する文字列を設定しています。
- 55行目
- 選択色の初期値として「#FF0000」を設定しています。
- 56~58行目
- ColorMenuButtonの選択色が変更された時の処理をイベントリスナに追加しています。ハンドラ内ではイベントターゲット(ColorMenuButton)が選択している色(16進数表記の文字列)をテーブル上に表示する処理を行なっています。
- 59行目
- ColorMenuButtonコンポーネントを対象要素へ描画しています。
var cmb2 = goog.ui.decorate(goog.dom.getElement('cmb2'));
cmb2.setSelectedColor('#00FF00');
cmb2.addEventListener(goog.ui.Component.EventType.ACTION, function(event) {
goog.dom.setTextContent(goog.dom.getElement('cell2'), event.target.getSelectedColor());
});
- 61行目
- 対象要素をColorMenuButtonとして装飾し、そのインスタンスを取得しています。
- 62行目
- 選択色の初期値として「#00FF00」を設定しています。
- 63~65行目
- ColorMenuButtonの選択色が変更された時の処理をイベントリスナに追加しています。ハンドラ内ではイベントターゲット(ColorMenuButton)が選択している色(16進数表記の文字列)をテーブル上に表示する処理を行なっています。
var customColorPalette = new goog.ui.CustomColorPalette(['#F00', '#0F0', '#00F']);
customColorPalette.setSize(8);
var customColorMenu = new goog.ui.Menu();
customColorMenu.addItem(new goog.ui.MenuItem('なし', goog.ui.ColorMenuButton.NO_COLOR));
customColorMenu.addItem(new goog.ui.Separator());
customColorMenu.addItem(customColorPalette);
- 67行目
- カスタムカラーメニューに表示するCustomColorPaletteコンポーネントを生成しています。引数には標準で用意する色を配列で指定しています。
- 68行目
- 標準のパレットサイズを設定しています。
- 69行目
- ColorMenuButtonを押下した際に表示されるMenuコンポーネントを生成しています。
- 70~72行目
- カスタムカラーメニューを構築しています。一段目には「なし」、二段目にはセパレータ、三段目にはカスタムカラーパレットというように表示される事を想定しています。
var cmb3 = new goog.ui.ColorMenuButton('Custom', customColorMenu);
cmb3.setTooltip('カスタムカラーを選択してください');
cmb3.setSelectedColor('#0000FF');
cmb3.addEventListener(goog.ui.Component.EventType.ACTION, function(event) {
goog.dom.setTextContent(goog.dom.getElement('cell3'), event.target.getSelectedColor());
});
cmb3.render(goog.dom.getElement('cmb3'));
- 74行目
- ColorMenuButtonコンポーネントのインスタンスを生成しています。引数には、前段で作成したカスタムカラーメニューとボタンのラベル文字列「Custom」を指定しています。
- 75行目
- ツールチップに表示する文字列を設定しています。
- 76行目
- 選択色の初期値として「#0000FF」を設定しています。
- 77~79行目
- ColorMenuButtonの選択色が変更された時の処理をイベントリスナに追加しています。ハンドラ内ではイベントターゲット(ColorMenuButton)が選択している色(16進数表記の文字列)をテーブル上に表示する処理を行なっています。
- 80行目
- ColorMenuButtonコンポーネントを対象要素へ描画しています。
まとめ
HTML5のカラー入力コントロールと違い、ブラウザ描画内でシームレスに色選択が行えるのが良いですね。とはいえ、ColorMenuButtonコンポーネントはカラー入力コントロールを完全に置き換えるものではありませんので用途や局面によって上手に使い分けると良いのではないかなと思います。(^^)