カテゴリ：Javascript関連 2009年8月19日 18:39
最近では JavaScript によってクリックされたときなどに、サブ情報などがポップアップするものをよく見かけます。間違えてクリックしてしまったり、やっぱりやめたい、といったとき、そのポップアップされた要素には通常「閉じるボタン」があると思います。
しかし、Windows などの OS では、その要素外をクリックすることで表示されたメニューなどをキャンセルする、というのはよくありますよね。
これを、サイト上でも実装できればユーザの直感的な操作でキャンセルさせることができ、とても便利です。
しかし、それをいざ実装しようとすると色々と処理をしないといけません。
そこで、この "キャンセルだけ" を行うスクリプトを作ってみました。 動作としては簡単で、画面いっぱいに透明の div 要素を追加し、そこへキャンセル用のアクションを設定します。
下のデモを見てもらうと分かりやすいと思いますが、ポップアップしたメニュー外をクリックすることでポップアップしたレイヤーを消す、という処理をさせています。
キャンセル用のレイヤーを呼び出すには、上記の JS ファイルを読み込ませた後、以下のようにします。
ここで渡されているのは、キャンセル時に実行させたい関数です。これはキャンセルレイヤーがクリックされたときに動作させたい関数を設定してください。
追加されたレイヤー用の div をクリックすると、自分自身を消す処理のほかに、上で渡された関数を実行します。
またこのスクリプトには追加された div を消すための関数も用意されています。
実行には以下のようにします。
上記の関数を実行すると、キャンセル用のレイヤーのみを消去します。
なにかのアクションを実行させたあと、このレイヤーが残り続けるのを防ぐために使用してください。
この記事のカテゴリー一覧を見る⇒Javascript関連
トラックバックURL
カテゴリー
最近のエントリー
テスト的に設置してます。好きにコメントしてみてくださいｗ
©2009 CSS-EBLOG All Rights Reserved
コメント
1 - りょう さん
最近ちょくちょくお邪魔させていただいてます。
とあるソースを見てたら次のような使い方をしていました。
document.onclick = xx_close;
function xx_close(){
/* 表示した要素を非表示にするなどの処理を記述 */
}
参考までにどうぞ。
ポップアップメニューやメニューリストは誰かが作ったのを使わせていただいいるのですが、自分で作ろうと思ったらこういった工夫が必要なんだなぁと勉強になりました。
2009年9月 1日 19:11
2 - えど
さん
>>1 - りょう さん
コメントありがとうございます！
確かに提示いただいた方法でも実現は可能ですね。
でも、その方法だと色々と対処しないといけない問題が
あったので今回のサンプルを作ったのです・・。
例えば、ポップアップさせるレイヤーを表示する際、
なにかをクリックして表示させる場合が多いと思いますが、
そういった場合、クリックで表示後、すぐにレイヤーが消えてしまう
という問題があります。（表示されてすぐに document.onclick が
実行されてしまう）
それ以外にも、表示されたレイヤー内をクリックしても
消えない、という利点もあります。（どちらも対処法はありますが）
と、色々と意識しないといけないことが多いので
ライブラリ化してしまったら便利かなーと思ったわけです。
（もしかしたら自分の勉強不足でめんどくさいのかもしれませんが・・）
でも色々と試していくのは楽しいですよね！
またなにか気づいたこととかあったらコメントいただけるとうれしいです(*'-')
2009年9月 2日 08:24