jQuery Corners 0.3プラグイン
jQuery Corners 0.3は角を丸めたり、さまざまな効果をつけることのできるプラグインです。このプラグインを使うことで、単なる長方形などよりも、サイトにデザイン性をもたせることができます。下記サイトからjquery.corner.jsをダウンロードし、pluginsフォルダに配置します。
今回は、デフォルトのまま指定するだけでも使用できる例として、Round、Bevel、Notch、Bite、Cool、Sharp、Slide、Jut、Curl、Tear、Fray、Wicked、Sculpt、Long、Dog Ear、Dog2、Dog3の17種類について取り上げます。リスト1に、jQuery Corners 0.3プラグインの使用例を示します。
リスト1 jQuery Corners 0.3プラグインの使用例（jQueryPlugin_corner.html）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Corners 0.3サンプル</title>
<!--1.jQueryの読み込み-->
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<!--2.プラグインの読み込み-->
<script type="text/javascript" src="plugins/jquery.corner.js"></script>
<!--3.CSSの設定-->
<style type="text/css">
div.sample1
{
background: #FFAA00;
padding: 10px;
text-align: center;
margin: 1em;
float: left;
}
div.section
{
background: #FFFF77;
}
</style>
<!--4.プラグインの設定-->
<script type="text/javascript">
$(function () {
$('#round').corner();
$('#bevel').corner("bevel");
$('#notch').corner("notch");
$('#bite').corner("bite");
$('#cool').corner("cool");
$('#sharp').corner("sharp");
$('#slide').corner("slide");
$('#jut').corner("jut");
$('#curl').corner("curl");
$('#tear').corner("tear");
$('#fray').corner("fray");
$('#wicked').corner("wicked");
$('#sculpt').corner("sculpt");
$('#long').corner("long");
$('#dog').corner("dog");
$('#dog2').corner("dog2");
$('#dog3').corner("dog3");
});
</script>
</head>
<body>
<h1>jQuery Corners 0.3サンプル</h1>
<div class="section">
<h1>jQuery Corners 0.3のオプション</h1>
</div>
<div class="sample1" id ="round">
<h1>Round</h1>
<p> $('#round').corner();</p>
</div>
<div class="sample1" id ="bevel">
<h1>Bevel</h1>
<p>$('#bevel').corner("bevel");</p>
</div>
<div class="sample1" id ="notch">
<h1>Notch</h1>
<p>$('#notch').corner("notch");</p>
</div>
<div class="sample1" id ="bite">
<h1>Bite</h1>
<p>$('#bite').corner("bite");</p>
</div>
<div class="sample1" id ="cool">
<h1>Cool</h1>
<p>$('#cool').corner("cool");</p>
</div>
<div class="sample1" id ="sharp">
<h1>Sharp</h1>
<p>$('#sharp').corner("sharp");</p>
</div>
<div class="sample1" id ="slide">
<h1>Slide</h1>
<p>$('#slide').corner("slide");</p>
</div>
<div class="sample1" id ="jut">
<h1>Jut</h1>
<p>$('#jut').corner("jut");</p>
</div>
<div class="sample1" id ="curl">
<h1>Curl</h1>
<p>$('#curl').corner("curl");</p>
</div>
<div class="sample1" id ="tear">
<h1>Tear</h1>
<p>$('#tear').corner("tear");</p>
</div>
<div class="sample1" id ="fray">
<h1>Fray</h1>
<p>$('#fray').corner("fray");</p>
</div>
<div class="sample1" id ="wicked">
<h1>Wicked</h1>
<p>$('#wicked').corner("wicked");</p>
</div>
<div class="sample1" id ="sculpt">
<h1>Sculpt</h1>
<p>$('#sculpt').corner("sculpt");</p>
</div>
<div class="sample1" id ="long">
<h1>Long</h1>
<p>$('#long').corner("long");</p>
</div>
<div class="sample1" id ="dog">
<h1>Dog Ear</h1>
<p>$('#dog').corner("dog");</p>
</div>
<div class="sample1" id ="dog2">
<h1>Dog2</h1>
<p>$('#dog2').corner("dog2");</p>
</div>
<div class="sample1" id ="dog3">
<h1>Dog3</h1>
<p>$('#dog3').corner("dog3");</p>
</div>
</body>
</html>
今回は、表示領域を「3.CSSの設定」のようにbackground、padding、text-align、margin、floatについて指定しました。こちらは、必要に応じて書き換えてください。
プラグインの使い方は、「4.プラグインの設定」のように、表示領域のid属性を指定し、cornerメソッドを用います。引数に何も指定しない場合は、角を丸める「round」がデフォルトとなります。また、bevelやnotchなど用意されているオプションを指定するだけで、角のスタイルを変化させることができます。実行結果を図1から図3に示します。
図1 実行結果（RoundからSharpまで）
図2 実行結果（SlideからDog Earまで）
図3 実行結果（Dog2からDog3まで）
