SEの竹村です。
Lightboxという画像のサムネイルをクリックすると同じ画面上で拡大画像を表示できるJavaScriptのライブラリがあります。Lightboxについては、以下の公式ページのほかに、様々なブログに評価や応用例が掲載されているので検索してみてください。
Lightbox JS
http://www.huddletogether.com/projects/lightbox/
同じように、リンクをクリックすると同一画面上でBOXが開き、HTMLを表示するライブラリがあります。それが今回取り上げる LITBox です。
Ryan J Lowe’s Dev Blog ? Blog Archive ? LITBox
http://www.ryanjlowe.com/?p=9#
これは、URLを与えると非同期でデータを取ってきて、BOX内に表示するものです。
その他の基本的な使い方については ARK-Web SandBox Wiki の方に記述しました。各サンプルだけでも確認してみてください。
LITBoxの使い方サンプル - ARK-Web SandBox Wiki
https://www.ark-web.jp/sandbox/wiki/188.html
さて、このライブラリをどのように使うか…という「使いどころ」を考えるのが今回の本題です。
次のサンプル画面を見てください。
ここでは、画像に関連するpopular tagsからタグをつけるか、自分で新たにテキストフィールドへタグを入力して、追加できます。
※実際には追加できませんが^^;
この画面、Web 1.0的なサイトでは普通にあった画面の機能ですが、こういったユーザインターフェイスは必要な時に表示させるのがよいと思いませんか？
「■タグを追加」がクリッカブルになっていて、クリックしたら下にフォームが表示するような形でも良いかもしれません。ただ、この場合は下が動的に変わるのでバランスが悪くなる可能性が高いです。
そういう時に、LITBoxを使えば↓はい、スッキリこのとおり。
ここでは、無駄なアクセスを避けるためにAjaxを利用せず、type:'alert' を指定して、JavaScript内にBOXの中身を書いています。
[タグを追加]ボタンをクリックしたらBOXを表示し、[追加する]ボタンをクリックしたらサーバへsubmitされ、再度同じ画面を表示させるような仕組みです。
※実際には追加できません！
ここで1点、気になることが。
タグを新規に追加したい場合は[タグ追加]をわざわざ押さないといけないのか！という面倒くささに気づきました。
そこで、デフォルトでテキストフィールドによる入力を許すようにして、popular tagsだけ必要に応じてLITBoxで表示するようにしてみましょう。
画像にタグを付けるサンプル (use LITBox and textfield)
popular tagsからタグのリンクをクリックした時、テキストフィールドへタグを追加しています。
一応、既に登録されている場合は追加してませんが、サーバに既に登録されている'サイパン'は判定してないです ^^; まぁ、それは置いといて、これでだいぶインターフェイスとして良くなったように思います。
また、これならもしJavaScriptが使えない環境の方でも、タグを追加することができますね。
LITBoxの応用例をいくつかあげてみます。
- ログインフォームを表示しっぱなしにするのではなく、必要な場合にだけLITBox内でログインさせる
-- LITBox内から新規登録できても良いですね
- 住所入力フォームで、LITBox内から郵便番号を入力すると、元の画面の住所フォームに値が自動で入力される
- type:'window'の非同期通信で検索結果を表示して、リンクをクリックすると元の画面の何かに影響を与える
メインの入力を助けるような処理をLITBox内で実装しておき、ユーザは必要に応じてBOXを呼び出して利用できるわけです。
最後に、今回動作確認したブラウザのバージョンを挙げておきます。
Windows XP
- Firefox 2.0
- IE 7.0
- IE 6.0
Windows 2000
- Firefox 1.5.0.8
- IE 6.0
Mac
- Firefox 2.0
- Safari 2.0.4