Interface elementsがオフィシャルにでjQueryはプラグインを使って機能を拡張できると書きましたが、今回はそれに引き続き、便利そうなjQueryプラグインの紹介です。

ほどんどの人がボックスの角を角丸にしたい場合は角丸用に画像を作って、それをdivなどを入れ子にし、CSSで背景画像として指定していると思います。今回ご紹介するjQuery Cornerプラグインは、それをJavaScriptで実現しちゃっているという・・・。今までもJavaScriptを使って角丸にするようなものはありましたが、重かったり、ジャギーが出て汚かったりでイマイチなものが多かったように思います。

まずはこのプラグインを紹介しているサイトjQuery Corner Demoをどうぞ。

これ、全部jQueryとプラグインで実現しているんですよね。角丸のラインもまぁまぁキレイだし、十分使えるんじゃないでしょうか。プラグインのJavaScriptソースはこのサイトの上部Just the source, please!より落とせます。

使い方はかんたんです。以前ご紹介したようにheadの中に下記のように書きます。

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript" src="/interface/jq-corner.js">
//必ずjquery.jsの後にプラグインのsrcを書く</script>

角丸にしたい要素をdivで囲ってあげます。(今回はdivで囲っていますが、別に他の要素でもOKみたいです。)

<div id="corner1">
<p>角丸コーナー</p>
</div>

あとは$(document).ready(function()に続いて、適用させたいDOM要素を書きます。

$(document).ready(function()
{
  $('#corner1').corner();
  $('#corner2').corner("5px");
  $('#bevel1').corner("bevel top");
})

注意点としては親要素の背景色の指定です。これは角丸を適用させる要素の親要素の背景色をJavaScript側で自動的に取得している(らしい)ので、注意が必要です。

このプラグインの凄いところは、角丸の半径を指定できたり、角丸以外にも豊富なスタイルが用意されていることです。さらには四隅それぞれに”bl”や”tr”といったものを使って指定できます。

角丸以外も結構使えそうなので、是非お試しあれ！

関連エントリー

• 関連する投稿はありません。

• Category
  • jQuery
• コメントはまだありません

現在、この記事へのトラックバックは受け付けていません。