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

JavaScript

2007.12.03

イメージ

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

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

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

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ソースはスッキリとしたいのでこの個別処理部分を外部化して、汎用的に使ってみようかと思います。