IE6、7でも動いてくれる&実用性の高そうなjQueryプラグイン30個まとめ

スポンサーリンク

使いやすそうなjqueryプラグイン
をまとめました。最低でもIE6,7でも
動いてくれる事を前提にしています。
他サイトでよく見かけるプラグインで、
個人的に実用性のあるプラグインと
思ったものをまとめます。

IE6、7でも動いてくれて、実用性のあるjQueryいろいろ。確認したブラウザはIE6,7とChromeです。他は大抵動くんじゃないかな(適当)。

デモで画像が透過されていないのもありますが、他のjsライブラリでIE6でも透過可能(DD_belatedPNG.jsとか)なのでそこは抜きにして動作する事を条件に挙げています。主観入ってるので参考程度に・・

Horizontal Subnav

jquery03
マウスオーバーでサブメニューがプルダウンするcssメニューです。サブメニューは横に広がってくれます。

Horizontal Subnav

Simple jQuery tabs

jquery04
コンテンツをタブで切り替えます。エフェクトは無いけどシンプルで使い勝手良さそう。

Simple jQuery tabs

Simple jQuery Text Resizer

jquery05
テキストの大きさを変更できるjQueryです。特に多くの人が利用するポータルサイトみたいなサイトは必須にしておきたいですね。

Simple jQuery Text Resizer

AnythingSlider

jquery01
コンテンツスライダー。TOPバナーとかでよく使われていますね。両サイドのボタンは透過に対応しないとです。

AnythingSlider

AnythingZoomer

jquery02
コンテンツを拡大します。テキストでもOK。ECサイトで使えそう。

AnythingZoomer

Before/After Plugin

jquery06
リフォーム屋さんやネイルサロン等のサイトで付けられていると凄くいいですね。ビフォーアフター用プラグイン。

Before/After Plugin

Simple Tabs

jquery07
こちらもタブ切り替えプラグイン。フェードエフェクトあります。

Simple Tabs

Creating rounded corners

jquery08
画像無しで角丸にしてくれます。他にもあったような。。IEがcss3に対応してさえすれば・・・

Creating rounded corners

jQuery Drop Line Menu

jquery09
オーソドックスなドロップダウンメニュー。ぬるっと降りてきます。

jQuery Drop Line Menu

Smart Columns

jquery10
IEだろうとモニターサイズが何だろうと僕がシエスタしていようとグリッドレイアウトをしっかり守ってくれます。

Smart Columns

droppy

jquery11
縦に伸びるタイプのcssドロップダウンメニュー。ぬるっと降ります。このブログでも使用中。

droppy

Fancy Zoom

jquery12
むわっと画像をズームします。IEだと若干挙動がおかしいけど動くっちゃ動く。

Fancy Zoom

tipsy

jquery13
シンプルなツールチップです。出る場所を選択できる。マウス追従はしません。

tipsy

wSlide

jquery14
スムーズに動くコンテンツスライダーです。縦でも横でも斜めでも。

wSlide

maphilight documentation

jquery15
マウスオーバー時、複雑な形の画像でもその形に添ってくれます。地図凄い。

maphilight documentation

TextAreaResizer

jquery16
テキストエリアを広げる事が出来ます。コリスさんがコメント欄で使ってるヤツ。これいいですね。

TextAreaResizer

jQuery UI Tabs

jquery17
これもシンプルなタブ切り替え。エフェクト無し。個人的には無いほうが好きです。

jQuery UI Tabs

jQuery accordion Plugin

jquery18
スムーズにパネルをアコーディオン式に開いてくれるプラグイン。

jQuery accordion Plugin

Fading Caption

jquery19
マウスオーバーでキャプションを表示。エフェクトかっこいいですね。

Fading Caption

AjaxZip 2.0

jquery20
郵便番号を入れるだけで自動で入力してくれる素敵ライブラリがjQueryにも対応してくれていますよ。

AjaxZip 2.0

jQuery.validation.js

jquery21
リアルタイムタイプのフォームバリデーション。ノリさん作。素敵や。

jQuery.validation.js

hintmask.js

jquery22
これ、凄くいいですよ。隠れてしまうパスワード入力欄でツールチップ状に最後の入力文字を見せます。IE6用にcssを対策しないとですが、ちゃんと動いてくれます。

hintmask.js

jquery.slidescroll.js

jquery23
これもノリさん作。本当に素晴らしい!最近では必須になってるっぽい、ページ内スクロールのプラグインです。因みにjQuery非依存もあるので干渉するようなら非依存を試してみては。

jquery.slidescroll.js

jCarousel

jquery24
スムーズにスライドするカルーセル。ボタンは透過対応する必要有りです。

jCarousel

jQuery Blinds

jquery25
先日記事書いたやつです。ブラインド式に画像が切り替わるギャラリー。

jQuery Blinds

Contactable

jquery26
以前記事書きました。サイドからにゅっとコンタクトフォームを出すプラグイン。

Contactable

Sliding Boxes and Captions

jquery27
エフェクトをかけるjQueryプラグインって記事の中であげたやつ。マウスオーバーでスコッとキャプション表示。

Sliding Boxes and Captions

vTip

jquery28
マウス追従型のツールチップです。IEだと角の部分の画像にちょっとした対策が必要っぽい。

vTip

bxSlider

jquery29
コンテンツをスライドさせて切り替えます。使う頻度は結構高目かも。

bxSlider

Simple jQuery Spy Effect

jquery30
リストを自動スライドさせます。最後のはフェードアウト、出現する時はフェードインのエフェクト。新着記事とかに使ってみたい。

Simple jQuery Spy Effect

以上30個。IE6で動くプラグインは山ほどあるので他も探してみてくださいませ。個人的にjQueryで何がしたいか、って利便性、ユーザビリティをあげたいだけなのでそんな感じのまとめになっています。

URL :
TRB :

Comments & Trackbacks (14)

  1. なな

    >jQueryで何がしたいか、って利便性、ユーザビリティ
    まさしくそう!と思いながら記事読ませていただきました。

    私がいくつか制作に関わったサイトなど、
    解析するとまだまだIE6が多いんですよね。
    (他のサイトでもそうだとは思いますが)

    利便性、ユーザビリティは絶対必要なので、
    こういったプラグインのまとめ記事は目から鱗でした。
    ありがとうございました。

  2. hide

    はじめまして。

    制作現場とか、インターネットヘビーユーザーなどは結構IEの利用率って低いのですが、いわゆるライトユーザーはまだまだ多いのでこういった情報は本当に助かります。IE9はCSS3、HTML5対応になるそうですが、当分はIE6、7、8の利用者も多いのでしょうから対応策は常に考慮しておかないといけませんしね。
    ありがとうございました。

  3. シロ

    >ななさん

    こにちは :-D

    私がいくつか制作に関わったサイトなど、
    解析するとまだまだIE6が多いんですよね。

    そうなんですよねー。Web屋周りではもういいだろみたいな話になってますけど、コンテンツによってはIE6に対応していないのが致命的になりかねませんからね・・

  4. シロ

    >hideさん

    こにちは :-D

    いわゆるライトユーザーはまだまだ多いのでこういった情報は本当に助かります。IE9はCSS3、HTML5対応になるそうですが、当分はIE6、7、8の利用者も多いのでしょうから対応策は常に考慮しておかないといけませんしね。

    そうなんですよね・・ライトユーザーほどアップデートしませんし、いまだにIE6がいるのもその辺が関係してそうですよね・・MSも別の方法で促してくれないかなぁ・・

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services