MY-NOTEBOOK

JavaScriptライブラリ jQuery Corners で角を丸める, IEにも対応(javascript,jquery)

いままで、 このエントリにあるCSS記述 を使って角を丸めていたのですが、当然Safari,Firefoxにしか対応していませんでした。

RICO を使う

RICO などのJavaScriptライブラリを使えば、IE含めて多くのブラウザに対応した角丸を作り出せることはわかっていたのですが、JavaScriptによる角丸生成というのは、CSSで角丸をつくりだすのとは違い...

• コードを書かないといけない
• JavaScritpライブラリを配置しないといけない
• JavaScriptライブラリがバージョンアップしたときなどメンテナンスが面倒

など「角丸」だけのためにJavaScriptを使うにはちょっと負担が大きすぎると感じていて使っていませんでした。

・・・ということで、いままでは、IEユーザへの角丸対応はあきらめていたのですが、アクセスログを見ると、40%くらいはIEユーザなので、なんとかしたいなぁとも思い始めていました。

そんな折、Googleの AJAX Libraries API の存在を知って、これらなJavaScriptの配置の煩わしさからは解放されるから、もし、AJAX Libraries API の中のどれかが角丸を実現できる機能あれば使いたい、と思い直しました。

制約... IE,Operaでは、ボーダーは丸まらない 角を丸める対象となる要素の背景色部分はラウンドしますが、ボーダーについては、丸まらないようです。(Firefox3は問題なくボーダーもラウンドしました。）

制約その２, 2009-01-18
IEで CSS の float を組み合わせて使用している場合に、 jQuery Corners を使っているとレイアウトが崩れるようです。
詳しくは調べていませんが、jQuery Cornersを使うことで、いくつかIEでうまくレイアウトされないページが出てきてしまいました。

jQuery.Corners で角を丸める

jQuery Coners を使えば、角を丸めることができます。
しかもこれは、idで指定した要素ではなく、class 指定した要素に対して、角丸指定ができるので、とても便利です。

jQueryとあるので、てっきり jQuery UIの一部の機能だと勘違いしたのですが、実際はjQueryのプラグインであり、jQuery UIの一部ではないです。したがって、結局は残念ながら、AJAX Libraries API だけを呼び出せばよいのではなく、別途 jquery.corners.js または jquery.corners.min.js を手動配置しないといけません。

コード自体はとても簡単で、 jQuery Coners Download からダウンロードしたアーカイブを展開して、サンプルを見れば一目瞭然です。

HTMLのヘッダ内に記述

HTMLのヘッダに以下の記述を追加、jquery.corners.mini.js を同じディレクトリに配置することをお忘れなく。

    <script src="http://www.google.com/jsapi"></script>
    <script>google.load("jquery", "1.2.6")</script>
    <script src="jquery.corners.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
          $('.note').corners("10px"); 
      });
    </script>

body中の対象要素に指定

あとは、body中の角丸したい要素に class 指定で note を設定すればOKです。

    <div class="note">
    Hello jQuery Corners.
    </div>