2009年04月09日

jQueryで角丸とグラデーションを同時に

以前メモした角丸とグラデーションが同時利用できない件ですが
その問題を解決することができる物を発見しました。

http://roundcorners.avinoam.info/

使い方をメモっておきます。

まずはjQueryをインクルード。
これはgoogleAjaxApiを利用して常に最新版＆自鯖に負荷をかけないようにするのがベストか
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2.6");</script>

次にリンク先から落としてきたroundCorners.jQuery-bc.jsをインクルード
<script type="text/javascript" src="./roundCorners.jQuery-bc.js"></script>

パスは環境によって違いますね。

そして角丸の半径、グラデーションの色、適用したいdivタグのidを指定。
<script>
$(document).ready(function(){
$("#t").bg(5,['#000000','#ffffff']);
});
</script>
この例ではid="t"の要素に半径5pxの角丸＆黒から白のグラデーションが適用されます。

あとは<body>タグ内に
<div id="t" style="width:300px;height:300px;border:1px solid #000000;color:#ffffff">
This Div has rounded corner and gradient background colors.
</div>
といった感じで自由に記述できます。


すばらしいですね！
後で使おう！


  
タグ ：javascriptお役立ち


Posted by Heppoko at 21:19 │Comments(1)
このページの上へ▲