jQuery：よく使用される機能をまとめて実装できるプラグイン

スムーススクロール・タブ切り替え・ロールオーバー・アコーディオンなどといった、サイト制作時によく使われる機能をまとめて実装することができるjQueryプラグインのまとめです。
予め使用する機能がはっきりわかっていれば、こういった便利なものを使用することでファイルの散乱も防げますし、管理もしやすくなりますね。
紹介するプラグインの中には必要な機能だけを選択してダウンロードできたりもします。

yuga.js

web制作を優雅にするために作られたjQueryプラグインで、7種類の機能が実装されています。
ライセンスはMIT Licenseで、ライセンスに従う限り許可なく自由に使用できるそうです。

機能

ロールオーバー
現在のページをハイライト表示
外部リンクを別ウインドウで開く
画像をthickboxで表示（thickbox.jsを使用）
スムーススクロール
タブ機能
CSS3の擬似クラスをクラスで設定（first-chilやevenなど）

使用方法

「yuga.js」からファイルをダウンロードしてそれぞれ任意の場所に配置後、下記のようにして読み込ませます。
あとは実装したい要素にそれぞれclassを指定します。例えばロールオーバーの場合は通常時の画像と_onという名前を付けた画像を用意し、img要素に.btnと設定すればロールオーバー機能が実装されます。

<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
<script type="text/javascript" src="js/yuga.js" charset="utf-8"></script>

thickboxの機能を使用しないのであれば、thickbox.cssとthickbox.jsは読み込む必要はありません。

yuga.js

ちなみに下記サイトではyuga.jsを個人的にカスタマイズしたものを配布しており、アコーディオン・ボックスの高さを揃える・href属性の内容に合わせてアイコン用クラスを追加するなどの便利な機能が追加されています。
動作も半年前ぐらいになりますがほとんどの環境で確認できているようで、ライセンスは同じくMIT Licenseです。

yuga.js TT Custom – yuga.jsの個人的なカスタマイズ

meca.js

HTML/CSSのコーディングをするときに便利な機能を色々詰め込んだプラグインで、10種類の機能が実装されています。

機能

ロールオーバー
画像のactive
リンクを別ウインドウで開く
IE6で透過png
要素の高さを揃える
IE6でposition:fixed
スムーススクロール
OS判別クラスの付加
IEでlabelの画像をクリック
placeholder

使用方法

「github」からファイルをダウンロードしてそれぞれ任意の場所に配置後、下記のようにして読み込ませます。
また、使用したい機能を下記のような感じで記述していきます。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/meca.js"></script>
<script type="text/javascript">
$(function() {
  // ロールオーバー
  $('.btn').meca('hover');

  // pngfix
  $('.pngfix').meca('pngfix');

  // 要素の高さを揃える
  $('.heightAlign').meca('heightAlign');
});
</script>

Laquu.js

普段からのHTMLコーディング作業量を極力減らして楽に作業を軽減することができるはずなjQueryプラグインで、24種類の機能が実装されています。
ライセンスはMIT Licenseで商用利用も自由に使用でき、「お気に召しましたら、開発者に1杯のビールかハイボールを下さい！XD」とのことです。

24もの機能が詰まっているので容量が気になるところですが、プラグインをダウンロードする際に必要な機能だけを選択してダウンロードすることができるので、無駄なものを省いた形で実装できます。

機能

シンプルなアコーディオンパネル（accordion）
ブラックアウトスクロール（blackoutscroll）
ブランク（blank）
パンくず（breadcrumb）
バブルポップアップ（bubblepopup）
ドロップダウン（dropdown）
フォントサイズ（fontsize）
インナースライド（innerslide）
コナミ（konami）
クリアオーバー（clearOver）
オーバー（over）
ピックメニュー（picMenu）
スクローラー（scroller）
ストライプ（stripe）
タブ（tab）
ティッカー（ticker）
ツールチップ（tooltip）
拡張子アイコン（exticon）
イメージオーバー（imageOver）
スクロールtoビュー（s2v）
ブリンク（blink）
イーキューヘイト（eqheight）
ポスフィックス（posfix）
トースト（Toast）
インクリメンタル検索(ics)

使用方法

機能を選択してダウンロードしたい場合は「Laquu.JS」から、機能の選択ダウンロードはできませんが、最新版であれば「github」からファイルをダウンロードしてそれぞれ任意の場所に配置後、下記のようにして読み込ませます。
また、使用したい機能を下記のような感じで記述していきます。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/laquu.js"></script>
<script type="text/javascript">
$(function() {
  // ブランク（blank）
  $('.blank').laquu('blank');

  // シンプルなアコーディオンパネル（accordion）
  $('.accordion').laquu('accordion');

  // タブ（tab）
  $('#tab01').laquu('tab');
  $('#tab02').laquu('tab');
});
</script>

vanity

ファイルの軽量さと簡単さが特徴のプラグインで、7種類の機能が実装されており、ライセンスはMIT Licenseです。

機能

jSlider（スライダー）
jTabs（タブ）
jPaginate（ページネーション）
jSpotlight（スポットライト）
jTip（ツールチップ）
jPlaceholder（プレースホルダー）
jCollapse（要素の折りたたみ）

使用方法

「vanity」からファイルをダウンロードしてそれぞれ任意の場所に配置後、下記のようにして読み込ませます。
また、使用したい機能を下記のような感じで記述していきます。

下記の方法では全ての機能を実装するfullを読み込んでいますが、一部の機能のみ必要な場合はそれぞれのファイルを別々にダウンロードすることもできます。
また、スライダーを実装する際は動きによってはこれ以外にjQuery UIやjQuery Easingが必要になります。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/vanity_full_0.3.js"></script>
<script type="text/javascript">
$(function() {
  // jSlider（スライダー）
  $('.slider').jSlider({
    elem: 'div'
  });

  // jTabs（タブ）
  $('.tabs').jTabs({
    content: '.tabs_content'
  });

  // jSpotlight（スポットライト）
  $('.parent').jSpotlight({
    title_effect: 'slide'
  });
});
</script>

各機能のオプションや実装の動きなど、以下より確認できます。

vanity

simplelib

様々なプラグインを動的にロードして、ウェブサイトを構築する上でよく使う機能を一元管理するツールで、各プラグインを別ファイルにして必要なファイルだけをロードするタイプのプラグイン。
16種類の機能が実装されており、ライセンスはMIT Licenseです。
また、このプラグインは必要なプラグインを選択してダウンロードすることができるのですが、ダウンロードにも開発中向けと公開時向けの2通りの方法があるのでとても便利です。

機能

accordion
button
checkAll
fixHeight
gaEventTracker
ie6Png2Gif
ie6PngFix
ie6PositionFixed
imgSwap
lightBox（jQuery lightBoxを使用）
overlayOthers
scroll
tab
textHint
trimmedScroll
zoomView（専用のCSSとローディング画像を使用）

使用方法

使う機能が既に決まっている場合やサイト公開時などは、jQueryと機能を選択してダウンロードしたsimplelib.jsを読み込ませて、あとは使用したい箇所にclass指定をしてあげることで基本的に実装できます。

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

逆に開発中などのように、どのプラグインを使うかがまだハッキリと確定していない場合などには、下記のようにして読み込ませるプラグインの増減を簡単に調整することができます。
まず「simplelib with jQuery」もしくは「github」からプラグイン一式をダウンロードし任意の場所に配置します。
基本的には他のプラグイン同様に記述するのですが、simplelib.jsを読み込む際に下記のようにして記述します。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/simplelib.js?accordion,button,scroll,tab,toolTip,imgSwap,ie6PositionFixed,fixHeight"></script>

simplelib.jsのパス指定後に?を記述し、その後accordion,button,scroll, …というように読み込みたいプラグインを,区切りで指定していきます。

simplelib

jKit

jQueryベースのUIツールキットで、現時点で44種類もの機能が実装されています。
今でも十分多いと思いますが、ページ下部で「more to come ...」となっているので、今後もまだまだ増やしていく予定がありそうです。

これだけの機能があると容量が気になってきますが、ダウンロード方法は一式だけでなく、必要なファイルだけを選択できるカスタムダウンロードも用意されています。

機能

下記は実装されている機能の一部です。
アコーディオンやタブなどの定番機能以外に、パララックスやバリデーションといった他のプラグインではあまり実装されていない機能も多数用意されています。

Background
Lightbox
Slideshow
Gallery
Tabs
Accordion
Parallax
Ticker
Animation
Tooltip
Sort
Filter
Validate
API
Plugin

使用方法

「jKit」からファイルをダウンロードしてそれぞれ任意の場所に配置後、下記のようにして読み込ませます。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jkit..js"></script>
<script type="text/javascript">
  $(function() {
    $('body').jKit();
  });
</script>

上記を記述して準備ができたら、あとは使用したい部分にdata-jkit=”[foo]“といった感じでdata属性を用いて機能を指定していきます。
例えばライトボックスとタブを実装したい場合は下記のように記述します。

<!-- ライトボックス -->
<img src="img/example.jpg" data-jkit="[lightbox]" title="Paragliders in the sky" />

<!--  タブ -->
<div class="tabs" data-jkit="[tabs:animation=none]">
  <div>
    <h3>Tab 1</h3>
    <div>Tab 1 contents here...</div>
  </div>
  <div>
    <h3>Tab 2</h3>
    <div>Tab 2 contents here...</div>
  </div>
  <div>
    <h3>Tab 3</h3>
    <div>Tab 3 contents here...</div>
  </div>
</div>

それぞれオプションやイベントもしっかり用意されており、それぞれ機能ページで確認できます。

jKit