角丸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();
上記2つの設定項目をonloadアクションで実行します。
すると簡単に角丸が作れます。
このライブラリーの優秀なところは要素名とclass名で角丸にする対象を設定できるところです。
関連エントリー
一番簡単な画像置換の方法-imageReplace.js-
アルファ画像を扱うalphafilter.jsライブラリ
AjaxやJavaScriptのライブラリー
javascriptとcssで角丸を表現する方法
スポンサードリンク
«del.icio.usの内容をgoogleパーソナライズに表示する方法 | メイン | 戻るボタンの実装方法について»