jQuery 139 Plugins：skuare.net

JavaScriptライブラリのjQueryのプラグインを利用して出来るサンプルです。
画像関連、メニュー関連、フォーム関連、テキスト／リンク関連、その他、日本語未解説で分類しています。

クールなズームエフェクトjavascript「jQZoom」

画像を拡大表示するのにLightBoxを使用するのはもう時代遅れ。 LightBoxではできない指定場所の拡大もできます。 jQZoomはズームエフェクトをクールに実現します。

via : jQZoom

クールな画像ギャラリーjavascript「jQuery Gallery」

画像ギャラリーのjavascriptは数あれどここまで凝ったものはなかったのではないでしょうか。 Image Gallery using jQuery, Interface & Reflectionsは、メニュー、サムネイル、リフレクションなど実にさまざまな処理を施します。その分スクリプトが多くなっていますが。。。

via : jQuery Gallery

エフェクト満載の画像ギャラリー系javascript「jQuery Cycle Plugin」

画像ギャラリーといえば「LightBox」ですが、周りで使用している人が多く、食傷気味の人も多いと思います。 jQuery Cycle Pluginでは、過剰ともいえるほどのエフェクトが使用できます。自分だけのオリジナルを簡単に作成したい方にお勧めの画像ギャラリー系Javascriptです。

via : jQuery Cycle Plugin

画像にグラデーションをかけるjavascript「Transparent Gradients」

画像を編集するさいにグラデーション加工をする場合があるかもしれません。 Transparent Gradientsなら簡単に透明なグラデーションを付けることができます。

via : Transparent Gradients

ページめくり風の画像ギャラリーを作成するjavascript「jqShuffle」

LightBoxの登場にインパクトがあったからか画像の表示方法がワンパターン化している気がします。今回紹介するjqShuffleでは、画像を1枚1枚めくるようなギャラリーを作成することができます。 Flashではありそうですが、Javascriptでは一風味変わった表示方法です。

via : jqShuffle

重い画像を順番に読み込むjavascript「Lazy Load Plugin for jQuery」

ブロードバンドが浸透しているとはいえ、画像を多く使用するとページが重くなり、表示速度が遅くなります。また解像度を高くしたり、画像サイズを大きくしても重くなります。 Lazy Load Plugin for jQueryはディスプレイ範囲の画像のみを順番に表示するためページの読み込む時間を短縮できます。

via : Lazy Load Plugin for jQuery

画像の大きさをウィンドウ幅に合わせて変更するjavascript「autoscale」

リキッドレイアウトではウィンドウによって、エラスティックレイアウトではフォントによってデザインが変更されます。このようなレイアウトを採用している場合画像の幅が微妙になることがあるかもしれません。 autoscaleはウィンドウ幅に合わせて画像の幅も自動に変更されます。

via : autoscale

jQueryでLightBoxを実現するjavascript「jQuery lightBox plugin」

Web2.0を個人レベルで実感させてくれたのが「LightBox」だと思います。今では画像を表示する多くのブログで使用されています。今回はこれをjQueryで実現したjQuery lightBox pluginを紹介します。

via : jQuery lightBox plugin

超簡単にパズルを作成するjavascript「Creating A Sliding Image Puzzle」

息抜きにパズルを作成しようと思うと従来は、画像をスライスする必要がありました。 Creating A Sliding Image Puzzleは画像1枚から超簡単にパズルを作成できます。

via : Creating A Sliding Image Puzzle

1枚の画像から自動でパズルを作成するjavascript「jqPuzzle」

サイト制作において重要なのは、訪問者を飽きさせず滞留させることでしょう。この観点から言えばゲームなどがあってもいいのかもしれません。 jqPuzzleは1枚の画像からスライディングパズルを自動で作成します。

via : jqPuzzle

超簡単な画像ズームエフェクトjavascript「zoomi」

画像を使用することの多いWebでは、見せ方に工夫することが必要になります。昨今、LightBoxをはじめとするツールが多くなりましたが、導入が面倒でした。今回紹介するzoomiは、ほとんと手間をかけずに画像をズームさせるエフェクトをjavascriptでつけることができます。

via : zoomi

Dockメニューを上下に設置するjavascript「CSS Dock Menu」

Mac由来のメニュー「Dock」はアイコンでわかりやすいメニューを提供します。 CSS Dock Menuでは、CSSによってDockの位置を上下に指定できるようにしています。

via : CSS Dock Menu

お手軽水平アコーディオンjavascript「haccordion」

タブメニューやアコーディオンメニューではjavascriptを用いて作成することがあります。 haccordionは水平方向のアコーディオンメニューをお手軽に導入することができます。

via : haccordion

スライドするパネルを作成するjavascript「jQuery Sliding Panels」

限られたスペースを有効活用するため、または初めは隠しておきたいコンテンツがある。そんな時はjQuery Sliding Panelsを使用すれば簡単に導入できます。

via : jQuery Sliding Panels

簡単導入スライドjavascript「jquery.toggleElements.js」

既存のサイトに折りたたみ式のスライドを採用したいと思う人は多いでしょう。しかし、導入にあたっては多くの障壁があるのが現状でしょう。 jquery.toggleElements.jsでは手間無く導入できてしまいます。

via : jquery.toggleElements.js

アクセッシブルなスライダーjavascript「Accessible News Slider」

巷にはスライダーのスクリプトが溢れていますが、W3Cの定めるWCAG 1.0.に準拠していないケースが多々あります。 Accessible News Sliderは完全に準拠し、javascriptがoffの環境でもアクセッシブルなスライダーを作成できるjavascriptを紹介しています。

via : Accessible News Slider

右クリックのオリジナルメニューを作成するjavascript「jQuery Halo Context Menu」

ブラウザ上では右クリックをすることで、さまざまなショートカットメニューが表示されます。 jQuery Halo Context MenuはjQueryベースで、表示されるメニューをオリジナルで作成することができます。

via : jQuery Halo Context Menu

ショートカットキーを作成するjavascript「shortKeys」

ある文字をキーボードで打つと、ファイルを開くなど対応したプログラムが実行されます。これをショートカットキーと呼びますが、サイト上でも使えるようにしたのが、shortKeys jQuery plug-inです。

via : shortKeys jQuery plug-in

Dockメニューを実現するjavascript「iconDock」

Macで採用されている「Dock」一般的にはFisheyeと呼んでいたりしますが、マウスをのせると大きくなるメニューみたいなものです。 iconDockがjQueryベースで公開しています。

via : iconDock

動きのあるメニューを作成するjavascript「SlidingMenu」

ホームページを作る際メニューは重要な要素の一つになります。わかりやすくかつ訪問者の興味を引きつけることが必要になります。 Get Into ThisではSlidingMenu用javascriptであるrb_menu.jsを公開し、動きのあるメニューを可能にしています。

via : Sliding menu

javascriptライブラリ「jQuery」でドロップダウン型メニューを作る

メニューにはさまざまありますが、ドロップダウン型のsuckerfishと呼ばれるスタイルは使い勝手がいいかもしれません。今回はJavaScriptライブラリjQueryを用いてドロップダウン型のメニューを作成します。

via : jQuery suckerFish

右クリックのオリジナルメニューを作成するjavascript「ContextMenu plugin」

ブラウザ上で右クリックをするとショートカットキーが表示されます。これをオリジナルで作成できるものをContext Menuと呼びます。 ContextMenu pluginでは、サイト独自のショートカットメニューを作成できるContext Menuのjavascriptを公開しています。

via : ContextMenu plugin

時間の入力支援javascript「ClockPick」

日付の入力支援にはDatePickerがあります。 ClockPickは、時間用の入力支援javascriptです。

via : ClockPick

jQueryベースのカレンダー作成javascript「jCalendar」

フォームなどでは日付を指定させることが多く、利便性が求められます。 jCalendarはjQueryベースでカレンダーを作成するjavascriptで、利用者のユーザビリティーを向上させることができます。

via : jCalendar

時間を指定するjavascript「jQuery Time Entry」

フォームなどで時間を入力して欲しいことがあるかもしれません。そんなとき、jQuery Time Entryを利用すれば、入力が簡単になるかもしれません。

via : jQuery Time Entry

アップロードファイル複数指定できるjavascript「Multiple File Upload plugin for jQuery」

ファイルをアップロードするとき1つずつでは手間がかかります。また、アップロードしてもらう時には、指定のファイル拡張子以外送ってもらいたくありません。 Multiple File Upload plugin for jQueryは複数かつ拡張子を指定してアップロードさせるjavascriptです。

via : Multiple File Upload plugin for jQuery

時間を選択できるjavascript「jQuery.ptTimeSelect」

フォームでは日付のほかに時間を求めることがあります。日付同様、時間にも人により様々な書き方があるので、定型の形式を選択できると利用者、制作者にとって便利になるでしょう。 jQuery.ptTimeSelectは視覚的にもわかりやすい時間選択javascriptです。

via : jQuery.ptTimeSelect

フォームの入力を限定するjavascript「MaskedInput」

フォームでは、電話番号や郵便番号、プロダクトIDなどの定型的な入力方式を固定することがユーザビリティの向上に役立つかも知れません。 digitalBushのMaskedInputでは、リアルタイムにフォームの入力方式をチェックすることができます。

via : digitalBush

テキストボックスを伸長させるjavascript「Text Grow」

画像表示では「LightBox」などを使用することで、限られたスペースの中で多くの情報を掲載させられます。一方、フォーム関連では大きさを調節することができませんでした。 Left LogicのText Growでは、文字数に応じてテキストボックスが大きくなるscriptを配布しています。

via : Left Logic

フォームを鮮やかに彩るjavascript「NiceForms」

お問合せフォームなどのデザインはシンプルになりがちです。しかし双方向性が重要視されていることから、フォームなどもデザインを考える必要があります。 NiceFormsはフォームを簡単に彩ることができます。

via : NiceForms

文字カウントjavascript「jCountDown」

フォームなどを作成する時に文字数を指定したい時があります。 5 JavaScript Tricks Made Easy with jQueryで紹介されている5つのスクリプトの中に指定した文字数にむかってカウントダウンするスクリプトがあります。

via : jCountDown

jQueryベースの日付選択javascript「jQueryDatePicker」

フォームなどで日付を入力してもらうときなどに、日付を視覚的に確認できると利用者にとって便利です。また入力ミスが減るなどの利点があります。 kelvinluck.comのjQueryDatePickerを使用すると、日付選択が可能なフォームを作成することが出来ます。

via : jQueryDatePicker

自動文字参照javascript「jQuery Autocomplete」

フォームで文字を入力すると自動で該当する文字を示してくれるオートコンプリートがあります。これを利用すると入力間違いが減少するなど訪問者・開設者の双方に役立ちます。今回は、jQueryベースのjQuery Autocompleteを取り上げます。

via : jQuery Autocomplete

タグを簡単にフォームに挿入するjavascript「jTagging」

ソーシャルブックマークなどに代表されるWeb2.0の世界ではタグにより細かく分類されることが多くなっています。その細かさゆえ、入力が面倒になっているのも事実です。 jTaggingはタグの入力を簡便にしてくれるjavascriptです。

via : jTagging

テキストにグラデーションをかけるjavascript「Textgrad」

テキストは色や大きさを変更できるのみで、あまり変化を付けることができません。 Textgradでは自動でテキストにグラデーションをかけてくれます。

via : Textgrad

テキストを隠してしまうjavascript「Spoilers」

画像はjavascriptやCSSでロールオーバー時に表示するものを変更することができ、閲覧者の好奇心をくすぐることができます。一方で、HTMLのテキストではできませんでした。 wanderinghorse.netでは、背景画像でテキストを隠せるSpoilers pluginを公開しています。

via : jQuery Spoilers plugin

リンク先のサムネイルを表示するjavascript「jLinkLook」

ツールチップでも十分にリンク先の情報を表示することはできます。これに加えて、サムネイルも見られれば閲覧者にとって有意義かもしれません。そんな機能をlinklookは、jQueryベースで作成しています。

via : linklook

リンクなどに吹き出し説明を加えるjavascript「Tooltip Plugin」

忙しい世の中、リンク先のことも知りたい人がいるかもしれません。そんな時、リンク先の説明を吹き出しで説明できるTooltipがあります。 Tooltip PluginはjQueryでTooltipを実現しています。

via : Tooltip Plugin

FlashとjQueryでツールチップを作るjavascript「Flash Tooltips Using jQuery」

特定の言葉やリンクを吹き出しを表示して説明するツールチップと呼ばれるものがあります。 Flash Tooltips Using jQueryでは、FlashとjQueryを組み合わせています。

via : Flash Tooltips Using jQuery

jQueryでCSSを切り替えるjavascript「Switch stylesheets with jQuery」

ユーザビリティが重視される昨今、文字の大きさを小／中／大などで切り替えられるサイトが増えています。 Switch stylesheets with jQueryではjQueryでCSSの切り替えができるjavascriptを公開しています。

via : Switch stylesheets with jQuery

div要素もリンクにするjavascript「jquery.biggerlink」

リンクと言えばaタグですが、ボックス単位の大きなdiv要素もリンクにしたくなります。 jquery.biggerlinkはそんな我が儘を叶えてくれるjavasrciptです。

via : jquery.biggerlink

テキストを複製できなくするjavascript「jQuery Disable Text Select Plugin」

YouTubeなど、著作権がインターネット上でも問題になっています。しかし、Webサイトはコピー＆ペーストで簡単にテキストを複製することができてしまいます。 jQuery Disable Text Select Pluginは、テキストのコピー＆ペーストを不可能にするjavascriptです。＊ソースは見られてしまうので、あくまでも一定の効果です。

via : jQuery Disable Text Select Plugin

リンクチェックできるjavascript「Ajax Broken Link Checker」

リンクを張っていても、時間が経つにつれリンク先が閉鎖されてしまうことがあります。ご丁寧に「閉鎖しました」と伝えてくれるのはまれでしょう。そんな時、Ajax Broken Link Checkerを利用すれば、リンク先の状態を確認することができます。

via : Ajax Broken Link Checker

テキストファイルをClient Side Includeできるjavascript「inc」

外部ファイルを同一ページで表示させることをClient Side Includeと呼びます（多分）。 incではjavascriptを利用して、実現しています。＊txtファイルのみで、htmlなどは無理なようです。

via : inc

表を彩るjavascript「jQuery Grid Plugin」

テーブルで作成した表は項目が多くなると見づらくなります。また横幅が限られる環境では2行に渡ってしまったり、フォントサイズを小さくしなければいけません。 jQuery Grid Pluginは項目の幅をスライドできたり、行ごとの色をスタライプ状に変更したり、クリック／ダブルクリック時にも色を変化させられます。

via : jQuery Grid Plugin

表を読み取りやすくするjavascript「tableHover plugin」

サイトでは表をテーブルで作成することが多いですが、縦横に項目が増えていくと、どこを示しているのか判別しづらくなります。 tableHover pluginを利用すると、マウスを載せた（またはクリックした）セルを着色することができ、読み取りやすい表を作成することができます。

via : tableHover plugin

ドラッグ＆リサイズが可能なjavascript「jqDnR」

限られたスペースで多くのコンテンツを詰め込みたいという葛藤は永遠の課題でしょう。また、訪問者が自由なレイアウトを組めるようにするのは良いことかもしれません。そこで、ドラッグ＆リサイズ可能なjavascriptjqDnRを紹介します。

via : jqDnR

要素を簡単にドラッグできるjavascript「EasyDrag jQuery Plugin」

要素をドラッグすることがあるかもしれません。そんな時はEasyDrag jQuery Pluginを利用すれば簡単に実現できます。

via : EasyDrag jQuery Plugin

3Dでぐるぐる回るjavascript「jquery 3d rotator」

実用性はあまりないかもしれませんが、リンクが3Dで面白い動きをするjquery 3d rotatorです。商品画像にリンクを張ることで回転式の陳列が可能になるかもしれません。

via : jquery 3d rotator

iframeをValidに表示する(?)javascript「JQuery iFrame Plugin」

ページに外部ページを表示させる方法にiframeがありますが、XHTML 1.0 StrictやXHTML 1.1で「非推奨要素・属性」となっています。 JQuery iFrame Pluginを使用すれば、これをクリア（多分）しつつ、iframeが使用できます。

via : JQuery iFrame Plugin

jQueryベースでクールなグラフを作成するjavascript「Flot」

PlotkitやPlotorなど各ライブラリにはそれぞれ奇麗なグラフを作成できるプラグインがありました。 jQueryでもFlotとよばれるクールなグラフを作成できるプラグインが登場しました。

via : Flot

jQueryベースのグラフ作成javascript「Chart Plugin」

サイトでグラフを作成する場合のはなかなか面倒です。 Chart PluginはjQueryベースで簡単にグラフを作成できます。

via : Chart Plugin

シンプルな図や円を手軽に描けるjavascript「Library for simple drawing with jQuery」

線で丸や四角などの図をWebでも描きたいと思う人は多いでしょう。しかし、これまでWebで完結するのは簡単にはいかないことが多かったです。 Library for simple drawing with jQueryは、線や丸、四角などのシンプルな図形を簡単に描くことのできるjavascriptです。