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

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

今回は便利な JavaScript ライブラリの紹介です。その名も「 curvyCorners

このライブラリ、IE6 なんかでも動作するので、簡単な角丸ボックスを実装したい場合は便利です。JS がオフの場合でも、角丸にならないだけでレイアウトが崩れないのもいい感じです。

指定方法も簡単で、ボーダーや背景色・画像は普通通り CSS で指定し、角丸にしたい要素を JavaScript で指定するだけで動作します。

導入の仕方

導入は簡単です。 curvyCorners からダウンロードできるファイルを解凍すると出てくるcurvycorners.js を読み込み、以下のように指定するだけです。

イベント登録用の関数も定義されているので、addEventでクロスブラウザにイベントの登録ができるようになっています。

また、指定する要素には CSS セレクタのように指定します。(ただし、+ や ~ などの複雑なセレクタには対応していないようです)
子孫セレクタは対応しているようで、#test pのような指定にも対応していますが、一階層までの対応のようで、#test div pなどは対応していないようです。

複数の要素に対して設定したい場合は、カンマ区切りで指定することで指定できるようです。(ex. #test1, #test2

この記事のカテゴリー一覧を見る⇒Javascript関連

  • Hatenaブックマークに追加 Hatenaブックマーク数
  • livedoorクリップへ追加 livedoorクリップ数
  • Buzzurlにブックマーク Buzzurlブックマーク数
  • POOKMARK Airlinesへ追加
  • del.icio.usに追加

トラックバックURL

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

コメントを投稿





承認されるまでコメントは表示されません。しばらくお待まちください。