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

  • Posted on
  • Category : Tips
jQuery:よく使用される機能をまとめて実装できるプラグイン

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

※説明を省いていますが、紹介しているプラグインはそれぞれのプラグイン以外にjQueryを使用します。
ダウンロードファイル内にも同梱されているものもありますが、ない場合は「jQuery」からダウンロードなどして同時に読み込ませてください。

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

  1. yuga.js
      → 7種類の機能
  2. meca.js
      → 10種類の機能
  3. Laquu.js
      → 24種類の機能、選択ダウンロード可
  4. vanity
      → 7種類の機能、選択ダウンロード可
  5. simplelib
      → 16種類の機能、選択ダウンロード可
  6. jKit
      → 44種類の機能、選択ダウンロード可

1. yuga.js

yuga.js

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

機能

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

使用方法

yuga.js」からファイルをダウンロードしてそれぞれ任意の場所に配置後、下記のようにして読み込ませます。
あとは実装したい要素にそれぞれクラスを指定します。
例えばロールオーバーの場合は通常時の画像と「_on」という名前を付けた画像を用意し、img要素にclass="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.cssthickbox.jsは読み込む必要はありません。

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

目次へ

2. meca.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>

目次へ

3. Laquu.js

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>

目次へ

4. vanity

vanity

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

機能

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

使用方法

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

下記の方法では全ての機能を実装するfullを読み込んでいますが、一部の機能のみ必要な場合はそれぞれのファイルを別々にダウンロードすることもできます。

<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>

※スライダーを実装する際、動きによっては上記以外にjQuery UIやjQuery Easingが必要になります。

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

目次へ

5. simplelib

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を読み込ませて、あとは使用したい箇所にクラス指定をしてあげることで基本的に実装できます。

<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, …」というように読み込みたいプラグインを「,」区切りで指定していきます。

目次へ

6. jKit

jKit

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

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

機能

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

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

…etc

使用方法

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]“といった感じで機能を指定していきます。
例えばライトボックスとタブを実装したい場合は下記のように記述します。

// ライトボックス
<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>

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

目次へ

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。