Hatena::ブログ(Diary)

jiroの日記 このページをアンテナに追加 RSSフィード

2007-09-04

[]alert,confirm,promptを模倣するjxDialogを作ってみた

ブラウザの標準のalert等のダイアログ系をかっこよくJavaScriptで模倣してみましたサンプルを見てもらえば、分かるのですが、ダイアログが表示されると半透明のレイヤーが表示部を覆って、下に表示されている要素を選択できないようにして、モーダルダイアログをシミュレートしています。DLはこちらから

タブで移動できちゃうでしょ?

よくあるレイヤーはクリックしてもその下にあるエレメントはクリックできないのですが、タブキーで遷移して、スペースキーで普通に押せてしまいます。しかし、jxDialogで作成しているダイアログ表示ではタブキーイベントをちゃんと制御して、モーダルダイアログにしています。

カスタマイズできます

必要なライブラリはないので、比較的気楽に取り込めるんじゃないかと思います。使い方はサンプルを参照してください。デフォルトで用意しているダイアログはalert,confirm,promptだけですが、jxDialog.Baseクラスを継承して、自分専用のモーダルダイアログを作成する事もできます。version 0.2からinnerHTMLでもかけるようになりました。jsDialog.simple関数のmessageにhtmlを指定すればmessageがinnerHTMLとして動作するようになります。

キーイベントって結構鬼門?

WindowsとMacintoshでのkeyイベントの扱いの違い(ブラウザ毎じゃなくてOS毎)でちょっと困りました。Windowsではkeydownイベントをバブリングしないようにすれば問題ないのですが、Macintoshではkeypressイベントなんですね。これがすぐに分からず、マシンを行ったり来たりしました。あ、Linuxとかで試してないので、また挙動が違ったりするのかもしれません。

また気が向けば、どうやって作成しているのかについて説明を書こうかと思います。

ちなみに、テストは以下のブラウザで行いました。

  • Windows
    • IE 6
    • Firefox 2
    • Safari 3
    • Opera 9
  • Macintosh
    • Firefox 2
    • Safari 2

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証