Webサイト制作者必見!iQueryのオススメプラグイン7選 | 千葉で集客ホームページ制作はティーエスフォート
コラム

Webサイト制作者必見!jQueryのオススメプラグイン7選

Webサイト制作者必見!jQueryのオススメプラグイン7選

今回は、Webサイトの見た目部分をカスタマイズして見栄えよくする上で便利なjQueryのオススメプラグインを8個、ご紹介します。

1.Drawer

レスポンシブ対応時のスマホ表示の際によく利用されているドロワーメニューを簡単に実装できるプラグインです。「ドロワー」とは「タンスや机の引き出し」といった意味合いの単語です。Webデザインではサイトのコンテンツとは別に、画面外からタンスの引き出しを引くように、引き出して表示するナビゲーションです。

クリックするボタンは横棒三本のアイコンが使われる事が多く、ハンバーガーメニューと言うこともあります。限られた画面の面積を有効活用することができるメニューだと言えます。

2.Vegas Background SlideShow

要素の背景に画像や動画でスライドショーが簡単に実装できるプラグインです。全画面スライダーの実装については多彩な動きをオプションで容易に設定できるVegasを利用することが多いです。

背景として設定できるので、スライド画像の上にテキストや画像を表示することができます。オプションで細かな設定を行え、写真にパターン画像を重ねることもできます。

基本的な記述方法は以下です。

$('#example').vegas({
slides: [
{ src: '/img/slide1.jpg' },
{ src: '/img/slide2.jpg' },
{ src: '/img/slide3.jpg' }
]
});

3.Infiniteslide.js v2

画像などの要素を無限スクロールさせる機能を簡単に実装できるプラグインです。オプションで簡単に速度や動きの向き、レスポンシブ対応が設定できる、使い勝手の良いプラグインです。

スクロールさせるコンテンツは画像でもテキストでもブロックでもよく、クラス名やID名がついていれば無限スクロールの対象とすることができて非常に便利です。
以下がサンプルコードです。

$('.scroll2').infiniteslide({
speed: 200,
direction: 'right'
});

4.reCAPTCHA

ボットによるクリック詐欺を防ぐために、チェックボックスをクリックすることや、ユーザーからのアクションを求めているシステムです。

多くのサイトでよく見かけるようになりました。人間がクリックしたのか、ボットによるクリックなのかを区別することができます。

reCAPTCHAのボタンを押さないと、メッセージがサイトの送信先に送信されないため、スパムが減ります。このプラグインは、Bootstrapの技術も用いています。

jQuery(function($){
$("#rc_form").submit(function(){
//reCAPTCHA にチェックが入っているかを確認
if(!$('#recaptcha').hasClass('verified')) {
$('#recaptcha').append("<p class='error' id='recaptcha_error'>:チェックを入れてください</p>");
}

5.Submitter

簡単に連絡フォームを作成できるプラグインです。Submitterのサイトに表示されているコードの通りにコピー&ペーストをすると、変更なしで実施できます。初期状態では「お名前」「メールアドレス」「コメント欄」の項目3個のみですが、コードを編集すると、項目をより増やすことができます。

6.Stretchy

Stretchyとは、記入項目に文字を打つと、項目のサイズが大きくなったり、小さくなったりするプラグインのことです。このプラグインは、ユーザーの注目を引きたい場合に使います。JavaScriptを使わず、HTMLでコードを修正できます。
開始、成功、失敗時のコールバック関数が設定するだけで、画面遷移無しのフォームが作れます。

$(function () {
var $body = $(document.body);
var $form = $('#form');
var $name = $form.find('#inputName');

$form.submitter({
dataType: 'json',
start: function (e) {
if (!$name.val()) {
e.preventDefault(); // Prevent submit
$name.focus();

$body.tooltip('Please enter a name', 'warning');
}
},
done: function (e, data) {
if ($.isPlainObject(data) && data.success) {
$body.tooltip(data.result, 'success');
}
},
fail: function (e, textStatus) {
$body.tooltip(textStatus, 'danger');
}
});
});

7.jQuery MultiSelect

jQuery MultiSelectとは、複数選択のドロップダウンメニューをチェックボックスに変更するプラグインのこと。コードのファイルサイズは8kbと軽量なため、データの負荷が少ないです。


今回のコラムでは、jQueryを使用してwebサイトの見た目を格好良くする上でオススメのプラグインを8つ厳選してご紹介しました。

関連記事

ページ先頭へ