角丸javascriptライブラリ『curvyCorners』を使ってみる

角丸javascriptライブラリ『curvyCorners』を使ってみました。

配布サイトからダウンロードしてきてrounded_corners_lite.inc.jsファイルをheadで読み込んでください。

<script type="text/javascript" src="rounded_corners_lite.inc.js"></script>

次にbodyに角丸にしたいblock要素をclass属性を付けて配置します。

<div class="myBox">
さんぷるさんぷるさんぷるさんぷるさんぷる<br />
さんぷるさんぷるさんぷるさんぷるさんぷる<br />
さんぷるさんぷるさんぷるさんぷるさんぷる<br />
さんぷるさんぷるさんぷるさんぷるさんぷる<br />
</div>

これで準備はOKです。
次はスクリプト要素でライブラリの設定を行います。

設定はJSON形式で行い、それぞれの設定値を格納しておきます。
tl(top left)→左上の角の半径
tr(top right)→左上の角の半径
bl(bottom left)→左下の角の半径
br(bottom right)→右下の角の半径
antiAlias→アンチエイリアスの設定(trueとfalse)
autoPad→ボックス要素のマージンの設定trueにすると上下左右に適度なマージンが設定されます。falseにすると上下にはマージンが設定されますが、左右にはせっていされません。
validTags→変更を行うタグ名（カンマ区切りで複数設定可能）

settings = {
 tl: { radius: 20 },
 tr: { radius: 20 },
 bl: { radius: 20 },
 br: { radius: 20 },
 antiAlias: true,
 autoPad: true,
 validTags: ["div"]
}

curvyCornersに角丸にする要素のクラス名を設置

var myBoxObject = new curvyCorners(settings, "myBox");
myBoxObject.applyCornersToAll();

上記２つの設定項目をonloadアクションで実行します。
すると簡単に角丸が作れます。

■■動作サンプル■■

このライブラリーの優秀なところは要素名とclass名で角丸にする対象を設定できるところです。

関連エントリー

一番簡単な画像置換の方法-imageReplace.js-
アルファ画像を扱うalphafilter.jsライブラリ
AjaxやJavaScriptのライブラリー
javascriptとcssで角丸を表現する方法

スポンサードリンク

«del.icio.usの内容をgoogleパーソナライズに表示する方法 | メイン | 戻るボタンの実装方法について»