The current article
初歩的なjQueryプラグインの設置方法
ほとんどのjQueryプラグインは、jQuery本体、プラグイン本体、実行コードの３つで形成されます。
初心者でもわかるように、初歩的な設置方法について説明していきたいと思います。
capture
jQuery本体の設置
まず、jQuery本体を設置しないと動きません。ここでは
①jQueryをダウンロードしてフォルダに入れて使用する。（サーバにアップロード）
②GoogleやMicrosoftなどが配布しているjQueryファイルを読み込んで使用する。
の2つを説明します。
ダウンロードして使用
jQuery本サイト(http://jquery.com/)の「Download(jQuery)」ボタンを押します。
フォルダでダウンロードされる訳では無くソースが表示されますので、ブラウザによって異なりますが右クリックして「名前をつけてページを保存」(FireFox)
「jquery-1.8.1.min.js」と言う名前で保存されます。この記事を書いた時点では、最新版は1.8.1と言うバージョンのようです。
現在バージョンアップしたため、「Download(jQuery)」ボタンを押してもソースが表示されません。
詳しくは後日記事を書こうと思っていますので、下にある「jQueryファイルを読み込んで使用」の方法で対処して下さい。
ダウンロードについて書いてみました。
このファイルをサーバにアップロードします。
上記は、「js」フォルダに「jquery-1.8.1.min.js」を入れました。
この場合のHTMLファイルのhead内に
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
と記述します。
jQueryファイルを読み込んで使用
ダウンロードしたjQuery本体ファイルを使用する代わりに、GoogleやMicrosoftなどが用意しているjQuery本体ファイルを読み込んで使用することもできます。
Googleを使用する場合、HTMLファイルのhead内に
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
と記述します。
ちなみに、その他は
Microsoft
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js"></script>
jQuery
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
とアドレス部分を変更しても使えます。
プラグイン本体の設置
さて、jQuery本体は読み込ませましたので、色々なプラグインが使えるようになりました。
次は、使いたいプラグインを設置します。ダウンロードするものもあれば、コード（スクリプト）だけのものもあります。
ダウンロードしたならその中に「xxxxx.js」（例えばsample.js)のようなファイルがあると思います。
また、文面にコードだけ記述されているものならばテキストエディタなどに貼り付けて、例えば「sample.js」など名前をつけて保存して下さい。
で、そのファイルをサーバにアップロードします。
上記は、「js」フォルダに「sample.js」を入れました。
この場合のHTMLファイルのhead内に
<script type="text/javascript" src="js/sample.js"></script>
と記述します。（※jQuery本体より後に記述して下さい。）
jQuery本体とプラグイン本体のコードを簡単に書くと、
jQuery本体をダウンロードして使用の場合
<html>
<head>
・
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/sample.js"></script>
・
</head>
<body>
・
・
jQuery本体を読み込んで使用の場合
<html>
<head>
・
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="js/sample.js"></script>
・
</head>
<body>
・
・
のようになります。
実行コードの設定
後は実行コードを設定してあげれば動作します。
ただ実行用のスクリプトはプラグインの作りによって様々なため書ききれません・・・
実行コードがjsファイルの中にあったり、head内やHTML内に記述されたりしています。
また、HTMLのID要素名を指定したり、スライドなどなら動くスピードや時間を変えてみたりします。
作者の方がそれぞれ設置方法を書いてくれていると思いますので参考にしてみて下さい。
私がプラグインを紹介する時は、そのあたりを説明したいと思います。
参考になれば良いのですが、長文最後までお付き合い有難う御座いました。
関連記事
