最近、 JavaScript のプログラミングでは Closure Library を使うようになってきました。やはりこれひとつでほとんどの機能を賄えて、アプリケーションの構造化も素直に行えるのがいいですね。

Closure Library の機能を把握するには、豊富に用意されているサンプルデモを参照するのが一番の近道なのですが、リファレンスページにファイルのリストがあるだけで、自分が使いたい機能のサンプルがどれなのか、探すのに毎回苦労します。

そこで、この状況を少しでも改善するべく、サンプルをカテゴリ分けしてみました。それぞれの内容も簡単にコメントしてあるので、目的のサンプルを見つけるのがだいぶ楽になると思います。 Closure Library のお供に、ぜひご活用ください。

イベント

• events.html - イベントオブジェクトの内容表示など。
• eventtarget.html - カスタムイベントのデモ。
• event-propagation.html - DOM イベントが伝わる様子と stopPropagation() の挙動。
• stopevent.html - 上のデモの stopPropagation() を stop() に変えたもの。
• focushandler.html - テキストフィールドのフォーカスを監視。
• inputhandler.html - テキストフィールドの入力を監視。
• keyboardshortcuts.html - キーボード・ショートカットの実現。
• keyhandler.html - キー入力の監視、 TAB キーによるフォーカス移動の禁止。
• mousewheelhandler.html - マウスホイールの監視。
• pastehandler.html - テキストフィールドへのペーストの監視。

CSS

• inline_block_quirks.html - Quirks モードで inline-block。
• inline_block_standards.html - Standard モードで inline-block。

ブラウザとの連携

• useragent.html - goog.userAgent の内容を表示。
• history1.html - URL のハッシュを使ったヒストリ制御。
• history2.html - URL を変化させないヒストリ制御。
• history3.html - iframe 内で goog.History を使うデモ。
• offline.html - Gears のオフライン機能のデモ（だぶん deprecated）
• onlinehandler.html - online / offline を監視。

アニメーション

• effects.html - DOM 要素のアニメーション。
• animationqueue.html - アニメーション・キュー。
• cssspriteanimation.html - CSS スプライトを使って画像をアニメーション。
• zippy.html - コンテンツの折りたたみ。

ドラッグ＆ドロップ

• drag.html - DOM 要素のドラッグ＆ドロップ。
• dragdrop.html - ソース要素・ターゲット要素を指定したドラッグ＆ドロップ。
• draglistgroup.html - ドラッグ＆ドロップによる並べ替え・移動。
• dragger.html - ローレベルなドラッグ操作。

画面レイアウト

• container.html - 複数のコンポーネントを縦・横方向などに配置。
• popup.html - クリックするとポップアップするコンポーネント。
• scrollfloater.html - スクロールしても画面に残るコンテナ。
• splitpane.html - リサイズ可能な画面分割。
• roundedpanel.html - 丸角のパネル（現在バグっていて表示されない）。
• imagelessroundedcorner.html - 画像なしで丸角を実現。
• tabpane.html - タブで表示内容を切り替える。
• style_viewport.html - 要素の可視領域を算出するデモ？
• viewportsizemonitor.html - 表示領域のサイズを監視。

基本的なコントロール

• samplecomponent.html コンポーネント（コントロールをはじめ、ほとんどの UI 要素の基底クラス）のデモ。
• control.html - goog.ui.control （全コントロールの基底クラス）のデモ。
• button.html - 各種ボタン。
• css3button.html - CSS3 のグラデーションや丸角を使ったボタン。
• imagelessbutton.html - たぶん通常のボタンレンダラのデモ。
• checkbox.html - チェックボックス。
• combobox.html - コンボボックス。
• progressbar.html - プログレスバー。
• ratings.html - スターでレイティングするウィジェット。
• slider.html - スライダーコントロール。
• twothumbslider.html - 範囲を指定するスライダーコントロール。
• tabbar.html - タブコントロール。

テキストフィールド

• autocomplete-basic.html - サジェスト付きテキストフィールド。
• autocompleteremote.html - サーバーからサジェストデータを取得。
• autocompleterichremote.html - オートコンプリートして Google 画像検索。
• bidiinput.html - 内容によって自動的に RTL になるテキストフィールド。
• charcounter.html - 入力された文字数を表示。
• labelinput.html - 空でフォーカスがないときは薄くラベル文字列を表示。
• plaintextspellchecker.html - スペルチェッカ付きテキストフィールド。
• dom_selection.html - テキストフィールド内の選択位置と文字列を取得。

リッチテキスト

• editor/field_basic.html - 単純にエディタフィールドを表示するだけのサンプ。
• editor/editor.html - ツールバー付きの本格的なリッチテキストエディタ。
• editor/helloworld.html - ダイアログを表示するだけのリッチテキストエディタ・プラグイン。
• editor/seamlessfield.html - インライン編集できるリッチテキストエディタ。
• richtextspellchecker.html - スペルチェック付きリッチテキストエディタ。

複合ウィジェット

• colorpicker.html - 色選択ウィジェット。
• charpicker.html - 文字選択ウィジェット。
• datepicker.html - 日付選択ウィジェット。
• inputdatepicker.html - 日付選択ウィジェットを表示するテキストフィールド。
• dimensionpicker.html - マトリクスの縦横のサイズを指定するウィジェット。
• dimensionpicker_rtl.html - ↑の RTL バージョン。
• gauge.html - スピードメーターみたいなの。
• hsvpalette.html - 色選択ウィジェット。
• hsvapalette.html - ↑のアルファ付きバージョン。
• palette.html - マトリクス状に項目を表示するメニュー、および色選択メニュー。
• serverchart.html - Google Chart API を利用したグラフ表示。
• tablesorter.html - クリックした列でソートするテーブル。
• drilldownrow.html - ツリービューの原型？
• tree/demo.html - ツリービュー。
• toolbar.html - ツールバー。

メニュー

• menu.html - 最も基本的なメニュー。
• menus.html - いろいろな種類のメニュー。
• submenus.html - 階層メニューその 1 。
• submenus2.html - 階層メニューその 2 。
• filteredmenu.html - 検索機能を持ったメニュー。
• popupmenu.html - ポップアップメニュー。
• menubutton.html - クリックするとメニューがポップアップするボタン。
• select.html - 選択した項目を表示するメニューボタン。
• selectionmenubutton.html - チェックボックス付きのメニュー。
• popupcolorpicker.html - 色を選択するメニュー。
• colormenubutton.html - より実用的な色選択メニュー。現在は CSS が崩れている模様。
• popupdatepicker.html - 日付を選択するメニュー。
• popupemojipicker.html

フローティング UI

• tooltip.html - シンプルなツールチップ。
• advancedtooltip.html - リッチテキストを表示するツールチップ。
• bubble.html - Google Calendar などで使われているバブル UI 。
• hovercard.html - Gmail っぽいホバー表示。

ダイアログ

• dialog.html - 汎用的なダイアログ。
• prompt.html - window.prompt っぽいダイアログ。

グラフィック描画

• graphics/basicelements.html - さまざまな図形を描画。
• graphics/modifyelements.html - 図形の再配置。
• graphics/advancedcoordinates.html - 位置・サイズの絶対・相対指定の違い。
• graphics/advancedcoordinates2.html - キャンバスのサイズを % で指定。うまく動いていないような・・・＾＾；
• graphics/events.html - SVG イベント。
• graphics/tiger.html - 有名な虎の絵を表示。

その他

• jsonprettyprinter.html - JSON を読みやすく表示。
• debug.html - デバッグログの表示。
• tracer.html - パフォーマンスの計測。
• timers.html - goog.Delay, goog.Throttle, goog.Timer のデモ。
• quadtree.html - クァッドツリーのデモ。
• xpc/index.html