WEB制作.Hack

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

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

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

導入の仕方

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

<br /> addEvent( window, ‘load’, initCorners );</p> <p>function initCorners() {<br /> var settings = {<br /> tl: { radius: 10 },<br /> tr: { radius: 10 },<br /> bl: { radius: 10 },<br /> br: { radius: 10 },<br /> antiAlias: true<br /> }</p> <p> curvyCorners( settings, “#test” );<br /> }<br />

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

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

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

元の記事はこちら