【Javascript】jQueryプラグインGradientでグラデーション

前回と、 前々回は、 jQuery UIを使ってみましたが、今回は一般的なプラグインの中から紹介します。

jQueryプラグインは、多くの開発者によって常時追加され続けているjQueryの拡張機能です。 jQueryサイトのPluginsをみると、すでに多くのプラグインが登録され、それぞれ毎日リリースやバージョンアップが行われていることがわかります。

カテゴリにわかれていますので、自分の目的にあったプラグインを探してダウンロードしjquery.jsのあとに読み込んで使います。今回紹介するのは 画像やcanvas、SVGなどを使わずに、jQueryとHTMLだけで手軽に次のような美しいグラデーションを作れるプラグインGradientです。

• jQuery
  • Download jquey.js(-min.js)
• Plugins/Gradient
  • Gradient ブログ
  • Gradient デモ
  • ダウンロード jquery.gradient.js（gradient-1.0.zip）
    ＊クリックするとダウンロードが始まります
• Plugins/Dimensions
• jQueryのダウンロードと設置

Gradient

Gradientを使うためには、jquery.gradient.jsとjquery.jsの他にjquery.dimensions.jsが必要です。 まず、そこから見てみます。

<script src="./jquery.js" type="text/javascript"></script>
<script src="./jquery.dimensions.js" type="text/javascript"></script>
<script src="./jquery.gradient.js" type="text/javascript"></script>

これで、3つのライブラリを読み、準備完了です。

では、ひとつ簡単なサンプルを作ってみましょう。


このグラデーションは、画像を使っていません。次のようにHTML、CSSとスクリプトを書くことで表示しています。

<style type="text/css">
#myGraTest { 
  width: 300px; 
  height: 45px; 
}
</style>

<div id="myGraTest" ></div>

<script type="text/javascript">
$j=jQuery.noConflict(); //他のライブラリとの衝突を回避します
   
$j(function() {
  var target=$j('#myGraTest');

  target.gradient({
    from:      'A8EAFF',
    to:        '1C00E0',
    direction: 'horizontal'
  })
});
</script>

では、ソース順番にみていきます。 まず、グラデーションを書き出すためのDIVをmyGraTestというID名で用意しました。幅と高さは、CSSで指定しています。

<style type="text/css">
#myGraTest { 
  width: 300px; 
  height: 45px; 
}
</style>

<div id="myGraTest"></div>

次に、ここでは、念のために他のコードとの衝突を避けるためのjQuery.noConflict()を使って ショートカットを$ではなく、$jに取り換えてみていますが、もちろん、これは、必須というわけではありません。

$j=jQuery.noConflict(); //他のライブラリとの衝突を回避します

そして、$j(function() { から });の間にスクリプトを書きます。 これは、DOMの構築待ち処理で、DOMが構築されるより先にDOM操作が行われてエラーとなるのを回避してくれます。

$j(function() {
 //ここにスクリプト
});

$j('#myGraTest')によってid名が'#myGraTest'の要素を検索し、jQueryインスタンスを生成して、変数targetへ代入しておきます。この後は、target.css('width','600px')などのように、jQueryメソッドを接続連結して使えるようになります。

  var target=$j('#myGraTest');

最後の、target.gradient({ から }) は、今回のプラグイン Gradientを呼び出すメソッドとなっています。

  target.gradient({
    from      : 'A8EAFF',
    to        : '1C00E0',
    direction : 'horizontal'
  })

ここでは、引数へ、最初の色fromと最後の色to、そして、グラデーションの方向directionをオブジェクトリテラルの形式で指定しています。 これらの値を変えることで、いろいろなグラデーションが書けるわけです。

次ページで、いくつかのサンプルを試してみます。