Movable Type 備忘録

 jQuery でアンチエイリアスの角丸をやってみる（jQuery curvyCorners）

  • Dec032007
  • Vote:
    http://bizcaz.com/archives/2007/12/03-004146.php
  • Categories: jQuery
  • Tags:
  • Social Bookmark

こんばんわ^^

ここ最近ずっと日曜日の夜はプログラムの解析してる bzbell です。
もっと早くから始めればいいじゃんっ!! と思うかもですが、それなりにわたしも忙しいわけでして (;￣∇￣A

ですので、今回もサクっと説明します (;￣∇￣A はは

以前、youmos さんとこで、prototype によるアンチエイリアスでの角丸を実現する curvyCorners が紹介されてました。
アンチエイリアスの角丸をJavaScriptで生成 （curvyCorners）

今回は curvyCorners の jQuery 版、jQuery curvyCorners を試してみましたのでご紹介です。

まずはサンプルですね。
jQuery curvyCorners サンプル

jQuery curvyCorners の使い方

使い方はカンタンで角丸にしたい要素および、各コーナー回転半径を指定するだけです。
具体的には以下のようになります。

  1. $('#sidebox-l').corner({
  2.     tl: { radius: 16 }, /* 左上コーナー回転半径 */
  3.     tr: false, /* 右上コーナー回転半径 */
  4.     bl: { radius: 16 }, /* 左下コーナー回転半径 */
  5.     br: false, /* 右下コーナー回転半径 */
  6.     antiAlias: true, /* アンチエイリアス処理有無 */
  7.                         /* false(なし)/true(あり) */
  8.     autoPad: true, /* パディング処理有無 */
  9.                         /* false(なし)/true(あり) */
  10.     validTags: ["div"] /* 対象とする要素 */
  11. });

上記はサンプルの一部を抜粋したものです。
青い字の部分で角丸にしたい ID を指定します。

赤い時の部分の各パラメータは以下の通りです。

  • tl、tr、bl、br
    各コーナーの角丸を設定します。左から順に左上、右上、左下、右下です。

    • { radius: 16 }：半径 16px の角丸にする場合
    • false：角丸にしない

  • antiAlias
    アンチエイリアスの有無を設定します。

    • true：アンチエイリアスあり
    • false：アンチエイリアスなし

  • autoPad
    パディング処理の有無を設定します。

    • true：パディングあり
    • false：パディングなし

  • validTags
    角丸の対象とするタグ名称を指定します。たとえば、サンプルでは以下のようになっています。

    1. <div id="sidebox-l">side left</div>

    青い字の要素を指定してあげます。

jQuery curvyCorners のツボ

  1. まず、jQuery curvyCorners を使用せず、通常通りマークアップします。
  2. レイアウトなど、ある程度決まったら jQuery curvyCorners を有効にします。
    そうすると、角丸処理されたことで各要素が重なってしまいます。
  3. ちょうどいい具合にマージンを調整します。

以上です (￣∇￣)/

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード