YUIのExample「DataTable Control: Context Menu Integration」へのリンク これもAjaxらしい、触って楽しいExampleとなっている。 テーブルのある行にカーソルを合わせて、右クリックすると、OSライクなメニュー（コンテキスト・メニュー；Context Menu）が…

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…

ひさびさに「実用的な」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のページへのリンクはこちら）したがって…

このExample（YUIのこのExampleページはこちら）では、先の例「Menu Family: Website Top Nav With Submenus Built From Markup」と同じ画面をスクリプトで作成する。 ２つの方法で、画面の様子やその動きはまったく同じである。 （したがって、画面について…

この例では、以下のような「ヘッダー＋本文（２カラム）＋フッター」という構成の1つのカラムにメニューバーを表示する（YUIのExampleへのページへのリンクはこちら）。 この例では、初めてYAHOO.wodget.MenuBarを使用する（MenuBarのAPIドキュメントはこち…

今回のExampleから少し画面の様子が異なる。 タイトルにある「Website Left Nav（ウェブサイトの左にあるナビゲーション）」とは、要するに以下のように、画面の左端に来るメニューのこと（下画面はサンプリングしたプログラムのもの。YUIのExampleページへ…

このサンプルは、先の「Menu Family: Website Left Nav With Submenus Built From Markup」をScriptを使って生成しようというもの（Exampleのページへのリンクはこちら）。画面とその動きは、先の例とまったく同じである。最後に示すhtml中のJavascriptを見…

タイトルの示す通り、このExampleでは、MenuItemのコンフィグレーション属性はたくさんあるよ、と説明している（Exampleのページへのリンクはこちらから）。実際には、Menuのコンフィグレーション・パラメータもいくつもあるので、サンプリングでは、（実験…

このExample（YUIのページへのリンクはこちら）を、実際に動かし見て、戸惑ってしまった。サンプル自体は、非常に単純なもので、MenuItemのコンフィグが変化するイベント（configChanged）と、そのハンドラを仕掛け、メニューの表示からその後の操作までのコ…

このExampleは、MenuインスタンスとMenuItemインスタンスにイベントハンドラを設定し、ハンドラがイベントからの戻り値から情報を取り出すというもの（Exampleのページへのリンクはこちら）。先のログ「Custom Event」でも述べたが、Custom Eventで実装され…

このexampleでは（Exampleのページへのリンクはこちら）、MenuItemへクリックイベントとハンドラを仕掛ける方法が示されている。これには、addItemsで設定するオブジェクト・リテラルに onclick: { fn: function, // クリック時のハンドラ名 obj: Object1 //…

このExampleは、複数階層のメニューを（Markupではなく）Scriptで作成する方法を示している(Exampleのページへのリンクはこちら)。Scriptの場合も、Markupの場合（「Menu Family: Multi-tiered Menu From Markup」）と同様、一階層のメニューの生成方法（正…

Multi-tiered Menuというのは、要するに複数階層のメニューのこと。 このExampleでは（Exampleのページへのリンクはこちら）、Body内に記述したMarkupから、複数メニューを生成する方法が説明されている。この複数階層のメニューは、メニューを生成するMarku…

Menuシリーズのこの繰り返し作業も随分と飽きてきてしまった。 辛抱辛抱。このサンプルは、タイトルにあるとおり、YAHOO.widget.Menuのメソッドを使って、Title付きのGroupingされたMenuをつくるというもの（Exampleのページへのリンクはこちら）。コードは…

この例は（[Menu Family: Grouped Menu Items Using JavaScript:title=Exapleへのリンクはこちら]）、前のExampleでMarkupから作成したMenuを、Scriptで作るものである。スクリプトは「Menu Family: Basic Menu From JavaScript」とほぼ同じで、YAHOO.widget…

このExampleでは（Exampleページのリンクはこちら）、グルーピングされたシンプルなメニューを作成する。Scriptの構造は、先の「Menu Family: Basic Menu From Markup」とほぼ同じで、ulで括られたリスト（li）がリストを構成する。 Markupのお約束も先と同…

このExample（Exampleのページへのリンクはこちら）は、先のExampleでMarkupから作ったBasic Menuを、YAHOO.widget.Menuオブジェクトのメソッド（addItems()）で作ろうというものである。したがって、メニューの見た目は、先の「Menu Family: Basic Menu Fro…

メニューに入る。 Exampleのトップページ（リンクはこちら）の内容はExampleの方でフォローできそうなので、いくつかポイントだけ抑えておく。 １つは、YAHOO.widget.MenuオブジェクトがYAHOO.widget.Overlayのサブクラスということ。 このOverlayという名前…

先の「Yahoo! UI Library: TreeViewの基本（その３）」では、自HTTPサーバー配下に、DOMファイルを置き、それをXHRで一気に取得して、TreeViewを構成してみた。ここでは、図にのって、今風のメニューを作るための基本機能について実装してみたい。 今風とい…