角丸を簡単に表現する「 jQuery Canvas Rounded Corners」 JavaScript Library Archive

角丸を簡単に表現する「 jQuery Canvas Rounded Corners」

Check Tweet

配布元：jQuery Canvas Rounded Corners
ライセンス：GNU Lesser General Public License

jQuery Canvas Rounded CornersはjQueryで簡単に角丸を実装するためのJavaScriptライブラリです。
Canvasで作成されているため、様々な表現が可能だ。

使い方

最新のjQueryファイルとダウンロードしたファイルに含まれる「jquery.corners.js」、「newExcanvas.js」をhead要素などで読み込みます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.corners.js"></script>
<script type="text/javascript" src="newExcanvas.js"></script>

$(‘角丸にしたい要素(CSSセレクタで選択)’).corners();のように記述すれば角丸にすることが出来ます。

<script type="text/javascript">
$(function(){
	$('#example_1').corners();
});
</script>

サンプル

オプションをつけることにより角丸の半径やボーダーの設定など様々な条件を付加することが出来ます。

$('#example_5').corners({
    radio: 半径,
    inColor: 角丸の色,
    outColor: '角丸の外の色',
    borderSize: ボーダーのサイズ,
    borderColor: 'ボーダーの色'
});

サンプル

スポンサードリンク

コメント

カテゴリー：jQuery ライブラリ 画像 角丸

直前:IE6で透過pngを表示する「DD_belatedPNG」

直後:select要素をプルダウンに拡張するjQuery.selectable.js