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ラ…

チェックボックスと同様、ラジオボタンも、その形状をボタン様にすることができる。 このExample（Exampleのページへのリンクはこちら）は、その方法を示している。下はサンプルの初期画面。 見た目は先のチェックボックスとかわらないが、ラジオボタンであ…

YUIのボタンオブジェクト（YAHOO.widget.Button）を使うと、チェックボックスをボタン（の格好）にすることができる(YUIのExampleのページはこちら)。このExampleでは、チェックボックスをmarkup（inputタグのtype=checkbox、buttonタグ）から生成する方法と…

先の例「Button Control: Push Buttons」では、ボタンクリックでハンドラーを動かしたが、このExampleでは、ボタンクリックでLink先に飛ばす（Link Buttomとはこの意味）。サンプルの初期画面は以下。 この場合も、bodyタグ内のmarkupからボタンを形成する方…

ボタンの生成の方法をいろいろと例示しているExample（YUIのExampleページへのリンクはこちら）。YAHOOボタンも、 button.js button.css という、JavascriptライブラリとCSSの2本立てで形成されている。(実際には、element-beta-min.jsも読み込む)初期画面は…

ひさびさに「実用的な」Exampleがでてきた（YUIのExampleのページへのリンクはこちら）。内容はTreeViewのテキストノードに、ContextMenuを仕込み、ノードの追加、ラベルの編集、ノードの削除を行わせるというもの。 ContextMenuは、TreeView全体に対して1つ…

このExampleは、動かしただけでは意味の分からない例（YUIのExampleのページへのリンクはこちら）。Exampleのページを読むと「何をしたいのか」分かるのだが、tableのようなたくさんの要素があるmarkupに対してContextMenuを貼る方法の例となっている。 この…

Yahoo.widget.ContextMenuは、Yahoo.widget.Menuを継承している。 このExample（Exampleへのリンクはこちら）は、２つのContextMenuを含んでいる。まず、初期画面は以下。 クローン羊のドリーの写真が現れる。これをクリックするとWikipediaへ_selfで飛ぶよ…

このExampleは、先の「Menu Family: Website Top Nav Using Animation With Submenus Built From Markup」のサンプルをScriptで記述したものである。（YUIのExampleページへのリンクはこちら）したがって、画面とその動作は、「Menu Family: Website Top Nav…

この例は、「Menu Family: Website Top Nav With Submenus Built From Markup」と同様にメニューバーからサブメニューが開くものだが、１点だけ サブメニューがメニューバーからスライドして降りてくる という工夫を施してある。この工夫を実装するにあたり…

このExampleは、先のExample「Menu Family: Website Left Nav With Submenus From JavaScript」を「サブメニューを表示する際に、それが浮かび上がってくるようなEffectをつける」よう改造したものである。（YUIのExampleのページへのリンクはこちら）したが…

このExampleは、先のExample「Menu Family: Website Left Nav With Submenus From Markup」を「サブメニューを表示する際に、それが浮かび上がってくるようなEffectをつける」よう改造したものである。（YUIのExampleのページへのリンクはこちら）したがって…