jQueryを使って簡単に角丸を作れるjQuery curvyCorners

jQueryを使って簡単に角丸を作れるjQuery curvyCorners

イメージ

最近、jQueryにハマっているishidaです。

CSSコーディングで角丸処理をする場合、たいていは上下の角丸部分を画像として切り出して、そんでもって背景画像を適用してという風にします。
また最近では、角丸を作るjavascriptライブラリーなどがあります。
でもdiv要素が増えたり、なんだかソースがすきっりしないぜぇ~と思っていましたがイイものがありました。

私がハマっているjQueryで角丸をつくるjQuery curvyCorners。

まずjQueryサイトからjquery-1.2.1.pack.jsファイルを入手。次に
jQuery curvyCornersサイトからjquery.curvycorners.packed.jsファイルを入手。

使いかた

まず、上記で入手したjsファイルをインクルード。

<script src="jquery-1.2.1.pack.js" type="text/javascript"></script> <script src="jquery.curvycorners.packed.js" type="text/javascript"></script>

メインとなるスクリプトはサンプルページソースの下部分。

$(document).ready(
function() {
$('.corner-box').corner(); // デフォルト処理の場合
$('.corner-box2').corner({ // 個別処理の場合
tl: { radius: 24 }, // 左上コーナーの半径
tr: false, // 右上コーナーの半径:falseで設定なし
bl: false, // 左下コーナーの半径:falseで設定なし
br: { radius: 24 }, // 右下コーナーの半径
antiAlias: true, // アンチエイリアス:trueで設定あり
autoPad: true, // パディング処理:trueで設定あり
validTags: ["div"] }); // 対象要素
});

最初の $('.corner-box').corner();
これは、デフォルトの角丸を当てた場合。
次の $('.corner-box2').corner は個別に処理をさせた場合です。

個人的には、htmlソースはスッキリとしたいのでこの個別処理部分を外部化して、汎用的に使ってみようかと思います。

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

この記事を読んだ人にオススメ