動きが面白い！チェックしたいjQueryプラグイン9選

ホームページにダイナミックな動きや便利な機能を実装する時に役立つのが、jQueryプラグインです。

jQueryプラグインは、数行のコードを差し込むだけでいいほど実装が簡単で、HTMLやCSSだけではできないような複雑な動きを表現することができます。
しかし、そんなjQueryプラグインも、たくさんあってどれがいいかわかりません。

そこで今回は、2017年最初にチェックしたいjQueryプラグインを紹介していきます。

言葉だけで説明するのは難しいので、デモサイトへのリンクもご用意しました。
ぜひデモも合わせてご覧ください。
　　

2017年最初にチェックしたいjQueryプラグイン9選

1. DateBox

ダウンロード / デモ

DateBoxは、ブラウザやデバイスにかかわらず、テキストボックスに同じように表示することができるカレンダーや時間のプルダウンを実装することができるjQueryプラグインです。
スマートフォンなどで時間を指定する時に上下にスライドするだけで指定できるフリップボックスを、パソコンで表示することも可能です。
BootstrapやjQuery Mobile、jQuery UIなどと互換性があり、デザインをカスタマイズすることもできます。
　　

2. Round Slider

ダウンロード / デモ

Round Sliderは、その名のとおり円形のスライダーを実装することができるjQueryプラグインです。
円形だけではなく、半円や扇型のスライダーを作ることも可能です。CSSを指定すると色や線の太さなどの見た目部分も変更することができます。
　　

3. Material Design Hierarchical Display

ダウンロード / デモ

Material Design Hierarchical Displayは、マテリアルデザインから着想を得たタイル状のブロックの上にコンテンツを映し出すことができるjQueryプラグインです。
親要素にjQueryを設定すると、その中にある子要素は、ブロックのように分割されて表示されます。
　　

4. Tabslet

ダウンロード / デモ

Tabsletは軽量でクロスブラウザ対応、手軽に扱うことができるタブを実装できるjQueryプラグインです。
数行のコードを書くだけでタブを設置できるだけではなく、アニメーションやタブの切り替え機能なども簡単に実装することができます。
　　

5. Readable

ダウンロード / デモ

Readableは、デバイスやウィンドウのサイズごとに最適なサイズで段落を表示してくれるjQueryプラグインです。
1つの段落の1行の文字数は45文字、もしくは75文字が良いとされており、デバイスサイズに応じて自動的に45文字や75文字にして、文字サイズも自動でリサイズされます。
わずか1KBと非常に軽量なプラグインとなっています。
　　

6. Tooltipster

ダウンロード / デモ

Tooltipsterはモダンでカッコいいツールチップを実装することができるjQueryプラグインです。
シンプルなツールチップであれば短いコードで実装することができますが、オプションとして操作できる機能も豊富にあります。
タップ機能を有効にすることで、スマートフォンでツールチップを表示させることも可能です。
　　
　　

7. jQuery Knob

ダウンロード / デモ

jQuery Knobは、円形のダイヤル式スライダーを実装することができるjQueryプラグインです。
先ほど紹介したRound Sliderと機能は似ていますが、こちらは範囲を指定したり、マウスホイールで数値を変えたりすることができます。
CSSを使うことで見た目を変更することも可能です。
　　

8. Calendar.js

ダウンロード / デモ

Calendar.jsは、カスタマイズしやすい汎用性を持ったカレンダーを実装することができるjQueryプラグインです。
祝日や記念日をカスタム設定することもできます。
　　

9. Trial.js

ダウンロード / デモ

Trial.jsは指定したオブジェクトに近くことでイベントを実行することができるjQueryプラグインです。
Trial.js単体では目に見える動作を行うわけではありませんが、他のjQueryプラグインやJavaScriptと組み合わせることで効果を発揮します。
1KB未満と非常に軽量なのも魅力の一つです。