pocketo.net blog

Lightboxの設計

Lightboxを作るにあたって

・1枚レイヤを被せるかどうか（後ろを触らせない）で話が変わる
　　被せるならウィンドウの位置は固定でおk。
　　被せないなら、後ろを触らせる設計なので、ウィンドウをドラッグ等
　　移動できるようにしないとダメ。

・汎用性を持たせるなら、ウィンドウの中身は生のHTMLで受け取った方がいいかも
　　JSONで受け取ると、個別にDOM組み立てることに。
　　HTMLで受け取ってDOMに追加後、イベント設定する方がいい。
　　（テンプレート作ってもいいけど、それだと遅くなるので）

・よくあるロード中のアニメーションGIFを画面中央に配置する場合
　　jQueryを使っているなら、

var loading = $( "<div><img src="./loading.gif" /></div>" ).css( {
  position: "absolute",
  top: 0,
  left: 0
} );
$("body").append( loading );

var _win = $(window);
loading.css( {
  top: ( _win - loading.height() ) / 2,
  left: ( _win - loading.width() ) / 2
} );

これだと、画像の読み込み前に位置が設定され、ローディング要素のwidthが0になることがある。
なので、こうする。

loading.load( function() {
  loading.css( {
    top: ( _win - loading.height() ) / 2,
    left: ( _win - loading.width() ) / 2
  } );
} );

これで、要素が読み込まれた後に位置を設定できる。

jQueryでツリービュー作るなら「dynatree」

久々にキャパを超えそうな仕事量にボーッとしかけている今週でございますが、ここを乗り越えればリリースも近づくし、給料にもつながるのではグへヘ。

と真っ黒なやる気で頑張るしかないっ！
とにかくやることが大事なんだやることが大事。

そうそう、jQueryのツリービューでいいのないかなーと思ってプラグインを調査してたんですけど、すごい掘り出し物がありましたよ！
jquery.dynatree.js

新しいし全然知名度も無いっぽいんですが、超高機能で使いやすい。

• JSONからツリー構築
• 子階層をAjaxで読み込んで追加できる
• Cookieで開いた状態を保存
• 開閉アイコンとノード部のイベント設定が自由自在
• ツリーにチェックボックスを付けられる
• しかも、子階層まとめてチェックとかもできる
• 全てのオプションをJSONにして一括で指定可能
• スキンが用意されていて、実装とデザインが分離

もはやYUIのツリーに迫る充実ぶり。
JSONで全てのオプションを指定できるのが使いやすいです。
ライセンスもMITライセンスと言うこと無しですね。

単純なツリーならjsTreeなんかで十分かと思いましたが、大規模Webアプリで何か高機能さを求められた場合は、今のところjQueryのプラグインを使うならdynatree一択では・・！
jQueryUIに取り込んでくれたらいいなー。