YUIの「DataTable Control: Nested Headers」へのリンク Nested Headerとは、入れ子になった見出しのこと。 こういったデータを扱うことはあまり多くはないが、この例のように、あるデータとサマリーが並んでいるようなケースでは確かに必要なフォーマット。…

YUIのExampe「DataTable Control: Conditional row coloring」へのリンク このExampleでは、Row Format（行のフォーマット）をカスタム・フォーマッターとして作成する。 先の例のカスタム・フォーマッターが、テーブルのエレメント（td）を修飾するものであ…

YUIの「DataTable Control: Custom Cell Formatting」へのリンク このExampleの目的は、 カスタムのフォーマッターを作ってみること（タイトルの通り）。 デフォルトのフォーマッターをoverrideしてみること（Javascriptの場合は、overrideというよりも、む…

YUIの「DataTable Control: Progressive Enhancement」へのリンク このExampleは、「DataTable Control: Basic Example」をやった後では以下の意味だけ持つものと考えていいと思う。 markupで記述したテーブル（tableタグ）から、下のようなテーブル表現を得…

YUIのExample「DataTable Control: Basic Example」へのリンク YUIのExampleのタイトルはBasic Exampleと書いてあるが、「（テーブル表示は）結構、これで（もう）いいんじゃないの？」というサンプルとなっている（ページングとかあるか。。。）。画面はサ…

YUIのExample「Calendar Control: Calendar inside a Container」へのリンク このExampleのページ（上のリンク）にこう書いてある。 The default Calendar/CalendarGroup controls do not provide positioning or dragdrop support natively, as the Contain…

YUIのExample「Layout Manager: Layout inside a resizable Panel」へのリンク 実は（わざわざもったいぶって言うことでもないのだが）、このLayout Panelというのは個人的には好きではない。 これは、かつて（随分前だけど）、dojoでひどい目にあったことが…

YUIのExample「Color Picker Control: Example of Color Picker Built in a Dialog via JavaScript」へのリンク YAHOO.widget.ColorPickerを、YAHOO.widget.Dialogをコンテナとして入れるExample。 ColorPickerは、先のButtonのところで出てきた（「Button C…

YUIのExample「Implementing Container Keyboard Shortcuts with KeyListener」へのリンク このExampleではキーボードのリスナー（キーボードが押されるというイベントに反応するリスナー）を作成している。 このためには、YAHOO.util.KeyListenerを利用する…

YUIのExample「Container Family: Using the Overlay Manager to Manage Multiple Panels」へのリンク このExampleでは、YAHOO.widget.OverlayManagerを紹介している。 以前のサンプル「Container Family: Simple Panel Example」で、2つ開けたPanelのz-inde…

YUIのExample「Container Family: Using ContainerEffect Transitions」へのリンク このExampleでは、YAHOO.widget.Overlayオブジェクトの現れ方が、3つのバリエーションで照会されている。 この3つとは Fade In / Out Slide In / Out Slide with Fading In …

YUIのExample「Container Family: SimpleDialog Quickstart Example」へのリンク。 YAHOO.widget.SimpleDialogはYAHOO.widget.Dialogのサブクラスで、いわゆる、Confirmation Box（確認画面）を出すために、Dialogを簡易化させたもの。DialogがFormをsubmit…

YUIのExample「Container Family: Dialog Quickstart Example」へのリンク YAHOO.widget.Dialogオブジェクトは、YAHOO.widget.Panelのサブクラスで、DraggableなDialog Windowを生成する。 YUIのExampleのページでは、Dialog Windowを以下のように定義してい…

YUIのExample「Container Family: Creating a Resizable Panel」へのリンク Reasizable Panel（Resizable Windowsともいう）とは、文字とおり、大きさの変えられるPanel（Window）のことを指す。YUIのExampleのページを見ると、この機能が実装されたのは、YU…

YUIのExample「Container Family: Creating a Modal "Loading" Panel」へのリンク Modal表示とは、ある一つの表示エリア以外を「触れないようにする」表示形態のことである。 よく、ログイン画面などで、ユーザーIDとパスワードの入力エリアのみを表示し、認…

YUIのExample「Container Family: Skinning a Panel with Custom CSS: Advanced」へのリンク このExampleは、Advanscedと書かれているが、スタイルの知識があれば、先の「Container Family: Skinning a Panel with Custom CSS: Introduction」と殆ど変わらぬ…

YUIのExample「Container Family: Skinning a Panel with Custom CSS: Introduction」へのリンクはこちら。 このExampleでは、Panelのスキン（見た目、スタイル）の変え方の基本について述べられている。 先のExampleにもあったように、Panelはデフォルトの…

YUIのExample「Container Family: Simple Panel Example」へのリンク このExampleはシンプルなYAHOO.widget.Panelの例。 Panelというよりも、PopupしないWindowといった方がいいかもしれない。 YUIの説明に、「OSのWindowに似た振る舞い」と書かれている。 …

YUIのExample「Container Family: One Tooltip, Many Context Elements」へのリンク このExampleでは、1つのTooltipインスタンスを複数のコンテキストに貼り付けるやり方が示されている。YUIのExampleのページの書かれているように、コンテキストごとにToolt…

YUIのExample（Container Family: Simple Tooltip Example）のページへのリンク このExampleでは、Tooltipの簡単な作り方が示されている（たしかに簡単に作れる）。Tooltip（ツールチップ）とは、YUIの上記リンクによれば、 The standard tooltip interactio…

YUIのExample「Creating and Positioning an Overlay」へのリンク。 YAHOO.widget.Overlayは、YAHOO.widget.Moduleの子孫である。 また、Menu、Panel、Tooltip、Dialog（DialogはPanelの子孫）といった重要なモジュール群の祖先となっている。 YUIのExample…

YUIのExample「Container Family: The Module Control」へのリンク このExampleを見て、Menuの前にやればよかったと思った。 ここには、以下のような重要な事項が書かれている。 Container familyは、YAHOO.widget.Moduleをそのベースクラスとしている。 ･･･…

YUIのExample「Button Control: Slider Button」へのリンク このExampleは、写真を表示して、スライダーでその透過度を変えるというもの。初期画面は以下。YUIのExampleがFlickrをイメージ・ソースにしていたので、自分がFlickr（Flickrへはこちら）にupして…

YUIのExample「Button Control: Color Picker Button」へのリンク カラーピッカー（Color Picker；カラーサンプルから色をピックアップするためのモジュール）のExampleである。一風変わったサンプルになっていて、橋の映った半透過pngの背景色をカラーピッ…

YUIの「Button Control: Calendar Menu Button with Date on Button Face」へのリンク このExampleも先の「Button Control: Simple Calendar Menu Button」と殆ど同じ内容のカレンダーピッカー。唯一の違いは、これがForm送信を意識していることで、ピックア…

このExampleの初期画面は以下。見ての通りのカレンダーピッカー（Calendar Picker）である（YUIのExampleへのリンクはこちら）。 カレンダーアイコンのついているボタンをクリックすると、以下のようにカレンダー（メニュー）が表示される。このとき、「今日…

Split Button（分かれたボタン）というのは、聞きなれない呼称なので、現物を見た方が早い。 （YUIのExampleのページへのリンクはこちら）以下がサンプルの画面であるが、青の4角で囲んだ部分をクリックするとMenuが展開され、ボタン内の以外の場所をクリッ…

Menu Buttonとは、ボタンを押すとリストボックスのようにMenuが展開されるボタンのこと（YUIのExampleのページへのリンクはこちら）。サンプリングは以下の画面。（これまでのButtonの例と同じように）Markupから生成される場合と、YUIライブラリーからJavas…

resetボタン(input type="reset")を生成するサンプル。（YUIのExampleのページはこちら） 他のボタン同様、markup（inputタグやbuttonタグ）から生成する場合と、ボタンを入れるコンテナ（div）だけ指定してYUIモジュールだけで作成する場合が示されている。…

このExampleでは、submitボタンをYUIライブラリーを用いて作る（Exampleのページへのリンクはこちら）。初期画面は以下で、これまでのExample同様に、inputタグ（input type=submit）、buttonタグといったmarkupからのボタンの生成と、markupに関係なくYUIラ…