少し前、YUI2.6.0から2.7.0へ移行をした際に、ColorAnimがおかしい、ことに気がついた（このログ）。 その時に気がつかなかったのだが、TreeViewもおかしいみたい。。。以下のようなマークアップからTreeViewを生成した際に、アンカーから生成したノードをク…

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

この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ドキュメントはこちらを参照）メニュー…

先の「Default TreeView」のところに書いたように、TreeViewは treeview.css treeview.js（もしくは、これを圧縮したtreeview-min.js） を利用するのが、デフォルトの設定である。この「Folder-Style TreeView Design」では、Default TreeviewのサンプルのCS…

Default Treviewの次にしては、この「Dynamically Loading Node Data」は、タフなサンプル。タイトル通り、データをダイナミックにロードしながらNodeを作成し、Treeを構築する（トップ画面の表示を早くする、という目的のため）。 サンプルでは、YAHOO!のRe…

YAHOO! User Interface(YUI)に掲載されているExampleから随分と逸脱してしまったので、そろそろそちらに戻ろうと思う。一番最初のExampleは「Default TreeView」という名前の例である。YUIのTreeViewは、treeview.js（実際に利用するのはcompressされたtreev…

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

2009/3/19 ; サンプルコードをFF3以外（Chrome1、Safari3）で動かすとエラーになるため、修正。 - 次は、「Yahoo! UI Library: TreeViewの基本（その１）」で使った以下のDOMをHTTPサーバーに配置し、Connection Managerを使ってXHR(XMLHttpRequest)で非同期…

先の例では、HTMLのbody内にかかれたリストから、TreeViewを構成したが、これと同じことが、JSON形式で書かれたものでできる。以下が、YUI TreeViewのトップページに書かれている例だが、はなはだしく見にくい。 こんなに括弧がならんでいるのをみると、大学…

Ajax（XHR）の方も一通り感触がつかめたので、YUIもTreeViewに移動。TreeViewは、メニューやエクスプローラー風のUIを作るのによい材料なので、基本からやってみる。 なので、TreeViewのトップページにある例からはじめる。YUIのTreeViewでは、rootになるdiv…