最近では JavaScript によってクリックされたときなどに、サブ情報などがポップアップするものをよく見かけます。間違えてクリックしてしまったり、やっぱりやめたい、といったとき、そのポップアップされた要素には通常「閉じるボタン」があると思います。
しかし、Windows などの OS では、その要素外をクリックすることで表示されたメニューなどをキャンセルする、というのはよくありますよね。n
これを、サイト上でも実装できればユーザの直感的な操作でキャンセルさせることができ、とても便利です。
しかし、それをいざ実装しようとすると色々と処理をしないといけません。
そこで、この "キャンセルだけ" を行うスクリプトを作ってみました。n動作としては簡単で、画面いっぱいに透明の div 要素を追加し、そこへキャンセル用のアクションを設定します。n
下のデモを見てもらうと分かりやすいと思いますが、ポップアップしたメニュー外をクリックすることでポップアップしたレイヤーを消す、という処理をさせています。n
キャンセル用のレイヤーを呼び出すには、上記の JS ファイルを読み込ませた後、以下のようにします。n
ここで渡されているのは、キャンセル時に実行させたい関数です。これはキャンセルレイヤーがクリックされたときに動作させたい関数を設定してください。
追加されたレイヤー用の div をクリックすると、自分自身を消す処理のほかに、上で渡された関数を実行します。n
またこのスクリプトには追加された div を消すための関数も用意されています。
実行には以下のようにします。n
上記の関数を実行すると、キャンセル用のレイヤーのみを消去します。
なにかのアクションを実行させたあと、このレイヤーが残り続けるのを防ぐために使用してください。n
今回は便利な JavaScript ライブラリの紹介です。その名も「 curvyCorners 」n
このライブラリ、IE6 なんかでも動作するので、簡単な角丸ボックスを実装したい場合は便利です。JS がオフの場合でも、角丸にならないだけでレイアウトが崩れないのもいい感じです。n
指定方法も簡単で、ボーダーや背景色・画像は普通通り CSS で指定し、角丸にしたい要素を JavaScript で指定するだけで動作します。n
導入は簡単です。 curvyCorners からダウンロードできるファイルを解凍すると出てくるcurvycorners.js を読み込み、以下のように指定するだけです。n
イベント登録用の関数も定義されているので、addEventでクロスブラウザにイベントの登録ができるようになっています。n
また、指定する要素には CSS セレクタのように指定します。（ただし、+ や などの複雑なセレクタには対応していないようです）
子孫セレクタは対応しているようで、#test pのような指定にも対応していますが、一階層までの対応のようで、#test div pなどは対応していないようです。n
複数の要素に対して設定したい場合は、カンマ区切りで指定することで指定できるようです。（ex. #test1, #test2）n
これは、以前に公開していたスクリプトの改善版です。
以前の記事：画像のロールオーバーを自動化するJavascript では、実行するために body 要素に onload で関数を指定する必要がありましたが、こちらは読み込ませるだけで実行されます。
以前から、自分で作ったくせに いちいち body 要素に onload を指定するのがめんどくさいなーと思っていたので、それを作りなおしました。
人によってはロールオーバー用の画像のファイル名に_on以外をつけている人もいると思いますので（たとえばimg_over.gifみたいな）、URL 引数にパラメータを渡すことでロールオーバー用画像のタイプを設定できるようにしました。
読み込み時に以下のようにすることで、どんなファイルを読み込むかを指定できます。
上記の?type=_overの部分がパラメータです。
こうすることで、たとえば通常時の画像のファイル名がimg.gifだったとすると、ロールオーバー時にimg_over.gifが読み込まれることになります。
デフォルトの設定では_onがついた画像を表示します。
もしロールオーバー用の画像のファイル名を_on以外で使っている場合は、上記のようにパラメータを設定してください。
HTML 側の指定は、ロールオーバーを実装させたい img 要素に対してclass="rollover"とクラスを指定するだけです。
クラスを指定した画像のロールオーバー（マウスオーバー）時に、画像の URL を読み取り、JS 読み込み時に設定したパラメータ（もしくは初期値）を利用してロールオーバー用の画像と差し替えます。
さて、またしても JavaScript の記事です・・。
今回、このライブラリを作成した理由として、マウスーバー時の画像と、通常時の画像の 2 種類を用意することに手間を感じたためです。n
ちょっとしたバナー等だとわざわざマウスオーバー時に画像を入れ替えるほどのモノでもないし、でもリンクしているって分かってもらうために何かしらのエフェクトを入れたい・・・というような場合に使えるライブラリとなっています。n
使い方は簡単です。まず、以下の JS ファイルを読み込ませ、ロールオーバーエフェクトを実装したい img 要素のクラス名にsimplerolloverを指定するだけです。n
指定できる値は CSS で指定するものと同じものが使えます。（例：#f00など）
border への指定は 整数値のみ指定が可能です。n
動作確認：IE6, IE7, Firefox2, Firefox3, Safari, Opera
合わせて読むと役に立つかもなエントリー
今回はサイト製作に便利な JavaScript ライブラリの紹介です。
IE6 では透過 PNG（PNG-24 PNG-32 の間違いでした；）を使えません。
いちおう画像を表示することはできますが、透過部分が反映されません。
しかし、代替処理として「AlphaImageLoader」という CSS の filter を使うことで使うことが可能です。
ですがこれ、ActiveXの問題なのか、指定している透過PNG画像のドメインが違うとうまく反映されませんでした。
しかし今回紹介するJavascriptライブラリは、VMLという技術を使ってPNG画像の透過を実現します。
そのため、ドメインなどの問題もなく、しかも指定も楽でimg要素、CSSともに使用できるためとても便利です。
しかしながら、やはりこちらも使用には何点か注意点があります。
CSSの背景にPNG画像を指定した場合は問題ありませんが、img要素に（つまり通常の画像として）指定した場合、いくつかのライブラリで実装する、フェードアウトやフェードインの視覚的効果が実行されません。
推測では、filter 機能が使えないために透明度が変更できないのだと思います。
なので、もしこのライブラリを使う場合は CSS の背景として使うのが無難です。
簡単にデモを作ってみたので見てみてください。
スクリプトファイルを読み込んだあと、「DD_belatedPNG.fix('.png_bg');」で透過 PNG を使用している要素を指定します。
指定の仕方は簡単で、CSS セレクタと同じように指定ができます。
複数指定する場合は、やはり CSS と同じようにカンマ区切りで列挙します。
合わせて読むと役に立つかもなエントリー
カテゴリー
最近のエントリー
テスト的に設置してます。好きにコメントしてみてくださいｗ
©2009-2010 CSS-EBLOG All Rights Reserved
