Yahoo! UI を使った表示画面のソースコードを少し解説します - yuumi3のお仕事日記
21,36,51行目の＜div＞はダイアログ用のフォームです。通常のHTMLのフォームからsubmitボタンを削除しただけです。 81〜95行目はテーブルに表示するJSON形式のデータ を作成する部分です。 98〜103行目は上で作った表にイベントハンドラーを定義する部分です。 105行目からは YUIコンポーネントの作成コードです。コンポーネントの大きさやボタン等の文字を定義しています。 106〜123行目は テーブルの作成 134〜162行目は ダイアログの作成 179〜196行目はツールチップのデータ取り込みと、ツールチップの作成Callback関数。サーバーから表示用文字列が送られてきた際に実行されます。文字列を受け取り、ツールチップを表示しています。 205〜220行目はツールチップ表示のイベントハンドラー。まだツールチップの表示文字列が取り込まれていなければ asyncRequ
Yahoo! UI を使ったら困った現象発生！ ・・・ やっと解決か？ - yuumi3のお仕事日記
Yahoo! UI を使うことでカッコ良い、画面が出来たのですが先週末の時点では困った問題がありました。 Tooltipに表示する内容はページを描画した時点ではまだブラウザー側にはなく、表示エリアにマウスが入った時点(mouseover イベント)でYahoo UI のConnection Managerを使い非同期にデータを取得て表示するという Ajax らしいアプローチを取っているのですが、最初に表示エリアにマウスが入った時はTooltipが表示されません。一度マウスを表示エリアから出し再度入ると上手く表示されます ^^); すぐに、データ取り込み直後に Tooltipコンポーネントの表示メソッド onShow() を呼び出せば良いのではと思いつき入れてみたのですが、かなりの確率で Tooltip がへんな場所に表示されてしまいます・・・・ Yahoo! UIのAPIドキュメントやソー
The Yahoo! User Interface Library を使ってみよう！ - yuumi3のお仕事日記
さて、使い勝手の向上と格好良さの向上の為に、The Yahoo! User Interface Library (YUI) を使ってみることにしました。 以前仕事でAjaxを多用したアプリを作った事があります。 RailsのAjax機能(主にPrototype.js)を元に作り、かなり使い勝手の良いアプリが出来、お客様も喜んでくれたのですが・・・・・・ 私のデザインセンスではカッコ良くはありませんでした ^^); しかし、YUIを使うと見栄えのするAjaxページが簡単に作れます ＼(＾＾)／ ここ２日くらい、YUIを組み込む為に試行錯誤し下のような画面が作れました。上の単純なHTMLだけの画面と比べると断然 クール です ！ メイン画面 表の表示には DataTable というコンポーネントを使っています。データはJSON形式で与えるので通常HTMLの「テーブル」を表示するのより簡単です。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
