この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 //…

次のサンプルに行く前に、YUIのCustomイベントについて復習しておきたい（普通のclickとかkeyPressとかはDOMイベントと呼ばれる）。 どうも、MenuのCustom Eventのハンドルがうまく読めないからである。次のサンプルである「Menu Family: Listening For Menu…

この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のページへのリンクはこちら）。コードは…

タイトルにある通り、グループ化したメニューに見出し（Title）をつけて表示するやり方。 メニューはbody内のMarkupから生成する。 「Menu Family: Grouped Menu Items Using Markup」と殆ど同じコードで生成できるが、Markupを作るにあたってのお約束が一つ…

この例は（[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という名前…

これまでの例では、青系のスキンを仕様していたが、このExample（Exalpleのページへはこちら）では、スキンを変える方法が（簡単に）示されている。TabViewのスキンは、 tabview-core.css タブのレイアウトなどの基本スタイル（tab間のmarginやtabのpadding…

2009/6/5 tetsuya.odaka phpのバグを修正（なんで間違ったかな。動くはずないのに）=============================================先の例では、ProxyとなるPHPから「YAHOO! News SearchのWebService」を呼ぶ際に、output=phpを指定して、serialize化されたp…

2009/6/5 tetsuya.odaka phpのバグを修正（なんで間違ったかな）。============================================= このExample（Exampleのページへのリンクはこちら）は、少し面倒なコードが示されている。YAHOO.widget.Tabオブジェクトを生成する際、コン…

タブの追加（Adding Tabs）の次は、タブの削除（Removing Tabs）。（Exampleのページへのリンクはこちら）この例もYAHOO.widget.TabViewのremoveTab()メソッドを利用するだけの簡単なもの（YAHOO.widget.TabViewのAPIドキュメントはこちら） このAPIドキュメ…

このExampleでは（Exampleのページへのリンクはこちら）、動的にタブを追加する方法が示されている。これには、先の例、「Build from Script」で使用された、YAHOO.widget.TabViewのaddTab()メソッドが用いられる。サンプルの初期画面は以下。 ここで、「add…

先の例では、body内のmarkupからtabを生成したが、これと（ほぼ）同じものをYUIのScriptで書きましょう、というのが、この「TabView Control: Build from Script」のExample（ページへのリンクはこちら） 使うのは、YAHOO.widget.TabViewオブジェクトのaddTa…

Tabというのは要求の多い画面仕様の一つだが、スタイルシートと見出し用の画像で自作するのが、普通。 Ajaxライブラリーには、Tabを実装するものがたくさんあって、便利になったなぁ、と感慨ひとしお。YUIのExampleも、TreeViewの次は、TabViewをやってみよ…

このExample（ページへのリンクはこちら）は、タイトルにあるとおり、TreeViewのラベルを書き換えることのExampleだが、他に 特定ノードへフォーカスを当てる。 EnterKeyのpress、マウスクリック、マウスダブルクリックのイベントハンドリング 「+」キーでの…

このExample（ページへのリンクはこちら）では、タイトル通りにTreeを生成する方法が示されている。タイトルは3種となっているが、実際のExampleは（ベースとするTreeも含めると）4種類の方法が示されている。 その4種とは、 ページ内のHTMLから作成 ページ…

このExample（Exampleのページへのリンク）は、「Custom TreeView with Check Boxes」というタイトルになっているが、TextNodeを拡張したTaskNode.jsというノードが紹介されている。Taskという名前が示す通り、Tree上にWBS（Work Breakdown Structure）をそ…

このExample（ページへのリンクはこちら）では、Treeを形成する各ノードにTooltipをつける。TooltipはContainerの一種なので、まだ、サンプリングしていないが、Exampleの説明とソースコードも元にして、サンプルを書いてみる。このExampleのページでは、以…

次の例の「Using TreeView with Custom Icons」は、ノードカスタムアイコンを表示する例だが、これを行うのに、「CSS Sprites」という方法が用いられている。 Exampleのページでは、「CSS Sprites」の詳細説明として、www.alistapart.comの文献（CSS Sprites…

これまでの例では、テキストノード（YAHOO.widget.TextNode）だけを使っていたが、この「Menu-Style TreeView Design」はメニューノード（YAHOO.widget.MenuNode）を使うサンプルである。（YAHOO.widget.MenuNodeのAPIドキュメントはこちらを参照）メニュー…