IE6でも簡単に角丸ボックスが作れるJavaScript - 「curvyCorners」

カテゴリ:Javascript関連 2009年6月26日 12:05

今回は便利な 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関連

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/150