-
JavaScript
- jQuery
- プラグイン
【初心者向け】jQueryプラグインとは？使い方やよく使うプラグイン
JavaScriptを短いコードで、簡単に実装できる様に開発されたライブラリー「jQuery」ですが、さらに拡張機能を持たせることができるプラグインがあります。
今回はjQueryのプラグインについて紹介します。
jQuery プラグインとは
プログラミングをする上でプラグインというのは、機能の拡張のことをいいます。
例えば、jQueryでは、標準のjQueryをそのまま使うと簡単にできないことが、あるファイルを読み込んでコードを書くだけで、簡単に実装することが可能になります。
プラグインの使い方は
jQueryのプラグインの使い方を順番に紹介します。
- 使用したいプラグインをダウンロードする
- 1でダウンロードしたファイルを読み込む
- jQueryに利用するHTMLを書く
- jQueryを起動するコードを書く
使用したいプラグインをダウンロードする
jQueryのプラグインはたくさんあります。
インターネットで調べるとたくさんでてきます。
ダウンロードしたファイルを読み込む
jQueryのプラグインは、使用したいプログラムにファイルを読み込まなくてはなりません。
以下のように書いて、読み込みを行いましょう。
<script type="text/javascript" src="js/slick.min.js"></script>jQueryに利用するHTMLを書く
jQueryで動かすHTMLを書きましょう。
jQueryを起動するコードを書く
通常のjQueryを使用するサイト同じで、jQueryを起動させるコードが必要です。
よく使うプラグイン5選！
slick
slickは画像などのスライドを行えるプラグインです。
スライダーを行えるプラグインの中で最も有名で、使いやすいといわれています。
以下URLよりダウンロード可能です。
http://kenwheeler.github.io/slick/
書き方
$('.slider').slick();Fileuploader
Fileuploaderはファイルのアップロードを行えるプラグインです。
フォルダ選択だけでなく、ドラッグアンドドロップによりファイルをアップロードできるようになります。
以下URLよりダウンロード可能です。
https://innostudio.de/fileuploader/
書き方
$('#fileupload').fileupload({
url: url,
dataType: 'json',
});infinitescroll
infinitescrollは無限スクロールを行えるプラグインです。
ツイッターやフェイスブックなど主にSNSで使用されることが多いです。
以下URLよりダウンロード可能です。
書き方
$(function () {
$(要素).infinitescroll({
navSelector: '.navigation',
nextSelector: '.navigation a',
itemSelector: '.article',
});
});Guardian
Guardianは入力欄のバリデーションチェックを行ってくれるプラグインです。
必須項目が未入力の場合などsubmitする前に明示的に表現してくれます。
以下URLよりダウンロード可能です。
書き方
$("form").validate({
rules: {
"menu[]": {
required: true,
}
date: {
JSON形式で要素を書く,
},
},
messages: {
"menu[]": {
JSON形式で要素を書く,
},
date: {
JSON形式で要素を書く,
},
},
});FadeThis
FadeThisはスクロール時にフェードインができるプラグインです。
スクロールをしていくとふわっと画像が現れるようにできます。
以下URLよりダウンロード可能です。
https://github.com/lwiesel/jquery-fadethis
書き方
$(window).fadeThis();まとめ
いかがでしたか。
jQueryでは、プラグインというとても便利なものがあります。
わざわざ長々とコードを書く必要もなくなり、実装時間も短くなりとても効率的にできると思います。ぜひjQueryを使用するときはプラグインで何かいいのがないか探してみてください。
