jQuery 258 プラグイン：skuare.net

JavaScriptライブラリのjQueryのプラグインを利用して出来るサンプルです。
jQueryは、John Resig によって開発されたJavascriptライブラリで、AjaxやDOMプログラミングコードを「簡潔・簡単」に書けます。
ここでは、画像関連、メニュー関連、フォーム関連、テキスト／リンク関連、その他、日本語未解説のjQueryプラグインを分類して紹介しています。

JavaScriptで画像のダウンロードを禁止する「dwImageProtector Plugin for jQuery」

画像などをダウンロードさせたくない場合があると思います。 bodyにoncontextmenu="return false"とかすると右クリック時のメニューが表示されなくなったりしますが、ユーザーにとっては迷惑です。 dwImageProtector Plugin for jQueryでは、JavaScriptを使用することで、簡易的に画像をダウンロードできないようにしています。

via ：dwImageProtector Plugin for jQuery

こいつは凄い！フルスクリーン縦型画像ギャラリー「jQuery Gallery Slider Plugin」

画像ギャラリーと言うとなんとなくLightBoxに代表されるような見せ方が思い浮かびます。でもそんなものに飽ききった皆さんに朗報です。 jQuery Gallery Slider Pluginを使用すると、フルスクリーンで縦型の画像ギャラリーを作成できます。

via ：jQuery Gallery Slider Plugin

jQueryでLightBoxライク画像ギャラリー「piroBox」

食傷気味のLightBoxですが、まだまだ派生JavaScriptは進化を続けています。 jQueryプラグインの「piroBox」を紹介します。

via ：piroBox

jQueryベースのLightBox風ギャラリー「jQuery BigPicture」

懲りずにLightBox風画像ギャラリー jQueryのプラグインを使用したjQuery BigPictureです。

via ：jQuery BigPicture

画像をポラロイド風にするJavaScript「jPolaroid」

画像を加工し、ポラロイド風に見せるサイトがあります。手間をかけずにこれを実現できるjPolaroidを紹介します。

via ：jPolaroid

マウスオーバーで画像を拡大させるJavaScript「MagicalHover」

画像の拡大と言えばLightBox・・・と言わずに、こんなJavaScriptはいかがでしょう？インラインで拡大画像を見せられるMagicalHoverです。

via ：MagicalHover

画像が吹き出すようなエフェクトを加えるJavaScript「jQuery-puffy」

昨今JavaScriptを利用することで、画像にさまざまなエフェクトがかけられるようになりました。 jQuery-puffyもそのひとつで、吹き出すような処理をかけられます。

via ：jQuery-puffy

魅せる画像スライドショーJavaScript「jQuery GalleryView」

スライドショー的なJavaScriptは多いですが、ここまで魅せるものはなかったように思います。 jQuery GalleryViewはどこを見ているのか、次の画像は何かなど細かい点にも配慮しています。

via ：jQuery GalleryView

驚きの画像切り替え！jQueryプラグイン「Jquery.ImageSwitch」

画像の切り替えでユーザーに驚かせることができそうです。 jQueryプラグインのJquery.ImageSwitchはフェードインなどのよくあるパターンだけではなく、ダブルドアと名づけられた切り替え方も可能です。

via ：Jquery.ImageSwitch

これは面白い！jQueryで紙芝居のように画像をめくるJavaScript

Create a unique Gallery by using z-index and jQueryで紹介されている画像の見せ方が面白いので紹介します。
クリックするたび紙芝居のように画像がめくられていきます。

via :Create a unique Gallery by using z-index and jQuery

jQueryでマウスオーバーを印象的にする：jQuery Animated Menu

マウスオーバー時に効果を与えることは当たり前になっていますが、もうちょっと工夫をするとユーザーの興味を喚起できるかもしれません。 jQueryの.hoverという基本的な手法を利用して、マウスオーバーを印象的にしてみます。

via：jQuery Animated Menu

ポロライド写真をばら撒いたように表示するギャラリーJavaScript「Polaroid Photo Viewer」

ポラロイド風に画像を見せると、写真自体を引き立てられます。
Polaroid Photo ViewerではjQueryを使用し、簡単にポラロイド風の写真をばら撒いたように表示することが可能です。

via :Polaroid Photo Viewer

画像を様々なエフェクトでフローティングさせるJavaScript「FLOATING IMAGES」

画像ギャラリーの見せ方のひとつにこんな手法があってもよいかもしれません。 jQueryプラグインのFLOATING IMAGESは画像を次々にフローティングさせていきます。

via :FLOATING IMAGES

jQueryベースで綺麗なLightBox風JavaScript「ColorBox」

巷に溢れかえるLightBox風ギャラリー。 ColorBoxもそんなJavaScriptの一つですが、colorと名乗るだけあり、綺麗な感じです。

via :ColorBox

デザインに優れた画像スライドショーJavaScript「JQUERY SLIDESHOW PLUGIN」

画像ギャラリーは多々ありますが、あまりデザイン的にいいものはありませんでした。今回のJQUERY SLIDESHOW PLUGINはなかなかデザイン性に優れたものと言えるのではないでしょうか。

via :JQUERY SLIDESHOW PLUGIN

画像を左右にスクロールさせられるJavaScript「jQuery Smooth Div Scroll」

画像ギャラリーを作る際にLightBoxを使用する人は多いでしょう。しかし飽き飽きしている人も多いのも確かです。たまにはjQuery Smooth Div Scrollのように左右にスクロールさせるのはいかがでしょか？

via :jQuery Smooth Div Scroll

JavaScriptで画像を簡単にスクロールさせられる「simplyScroll」

スクロールさせるJavaScriptは多いですが、simplyScrollほど簡単なものは、あまりないでしょう。 JvaScriptライブラリ「jQuery」のプラグインです。

via :simplyScroll

背景画像にトランジション効果をつけられるJavaScript「BGTransition」」

背景画像にも何らかの効果をつけられると、面白い表現が可能になりそうです。 BGTransitionは、そんな時手軽に導入が可能です。

via :BGTransition

ALTでキャプションをふわりと表示：jQueryプラグイン「jCaption」

画像にキャプションをつけることは多いと思います。でも、みんなと同じような見せ方は嫌だという方には、こんな方法もあります。 jQueryプラグイン「jCaption」はaltに記述したものを画像の上に乗せて表示できます。

via :jCaption

画像ギャラリーにマスクをかけるJavaScript「(mb)MaskedGallery」

画像ギャラリーに多く使われるLightBoxは、開かれたとたんに閉じてしまうユーザーが結構いるようです。今回紹介するjQueryプラグインの(mb)MaskedGalleryは画像ギャラリーの上に透過PNGでマスクをつけられ、印象的な画像の見せ方が可能です。

via :(mb)MaskedGallery

jQueryプラグイン「Easy Slider」でスライダーを簡単導入

スライダーを導入したい。でも導入は難しそうだからと、見送っていませんか。 jQueryプラグイン「Easy Slider」なら、あなたのサイトでもすぐに使用できます。

via :Easy Slider

リンク先の画像をプレビューするJavaScript「imgpreview」

かの有名なLightBoxは画像を一回一回大きく表示します。そんな時間は必要ない、また、まずはちらっと見たいという方にオススメです。 JavaScriptライブラリjQueryのプラグインimgPreviewでは、リンクされている画像をプレビューさせられます。

via :imgPreview

JavaScriptで画像を回転させる「Wilq32.RotateImage」

ただ、写真をずらっと掲載しているだけでは、つまらないという方は多いと思います。 jQueryのライブラリ「Wilq32.RotateImage」では、簡単・手軽に画像を傾けることが可能です。

via :Wilq32.RotateImage

アップ画像のどこを見ているかを表示するJavaScript「ImgNavigator」

(mb)ImgNavigator 1.0大きな画像を表示したいし、その画像のどこを見ているか表示させたいという、あなたにお勧めです。地図とか、商品画像に使用すると便利かもしれません。

via :(mb)ImgNavigator 1.0

画像を切り替えるJavaScript「jQuery Slinky Slider」

表示している画像をスムーズに切り替えて表示することができればユーザーの興味を喚起することができます。 jQuery Slinky Sliderは、画像を外部ファイルから読み込んで表示することができます。

via :jQuery Slinky Slider

インライン型LightBoxを実現するJavaScript「jQuery.popeye」

昨今LightBoxスクリプトが広まり、さまざまな場所でオーバーレイが登場するのに辟易している人も多いでしょう。 jQuery.popeyeはJavaScriptライブラリ「jQuery」を使用し、ユーザーの視線を妨げない表示方法が可能です。

via :jQuery.popeye

画像とキャプションをスムーズに表示するギャラリーJavaScript「s3Slider」

LightBoxが巷にあふれる中、画像をより良く見せたい欲求は高まっていることでしょう。 s3Sliderでは、JavaScriptライブラリ「jQuery」を使用し、画像・キャプションにエフェクトをつけ、閲覧者の興味を喚起する仕組みを提供します。

via :s3Slider

jQueryプラグイン「pikachoose」で小気味良い動きのスライドショーを作る

スライド風に画像を見せるJavaScriptは多く広まっています。今回紹介するpikachooseは、jQueryベースで気持ちの良い動きでギャラリーを表示してくれます。

via :pikachoose

jQueryで画像に反射効果を！「Reflection.js for jQuery」

水面に反射させたような画像効果をつけるJavaScriptがはやりました。ついに、というか、ようやくjQueryでもReflection.js for jQueryで、これが実現可能になったようです。

via :Reflection.js for jQuery

画像のキャプションをクールに表示するJavaScript「jQuery Captify Plugin」

画像に説明をつけるキャプションは重要ですが、配置場所は大抵決まっています。しかし、デザイン性を重視すると画像に乗せたいなど出てくるでしょう。今回紹介するjQuery Captify Pluginはそれを簡単かつクールに表示可能です。

via :jQuery Captify Plugin

jQueryでファンシーなLightBoxクローンを作る「Fancy Zoom」

爆発的な大ヒットとなったLightBoxですが、広まりすぎて先進的なイメージが薄れています。
そんな状況を打破すべくなのか、LightBoxのクローンは次々と生まれています。
今回紹介する「Fancy Zoom」もその一つで、昨今流行のJavaScriptライブラリjQueryを使用しています。

via :Fancy Zoom

奥から手前にズームするJavaScript「Spacegallery.js」

最近はappleのcoverflowやらamazonのぐるぐるやら画像の見せ方が豊富になってきました。今回紹介する「Spacegallery.js」はありそうでなかった、手法かもしれません。奥から手前にずんずんとズームしながら画像を表示していきます。

via : Spacegallery.js

レイヤー表示（？）JavaScript「jParallax」

なんと表現したらよいのか、サンプルを見ていただければなんとなくわかるかと。画像を何枚も重ねて表示可能なほか動きます。そんなjQueryベースのJavaScript「jParallax」です。

via : jParallax

jQueryで画像をズームさせる「Pan full size images」

ECサイトでもよく見られる、画像の詳細を拡大させて見せる手法です。
今回はJavaScriptライブラリjQueryを使用した「Pan full size images」を紹介します。。

via : Pan full size images

クールなズームエフェクト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

jQueryでLightBoxを実現するjavascript「jQuery lightBox plugin(balupton edition)」

LightBoxをjQueryで実現するJavaScriptは以前jQueryでLightBoxを実現するjavascript「jQuery lightBox plugin」で紹介しましたが、今回紹介する方が高機能で柔軟性があるかもしれません。
jQuery Lightbox Plugin (balupton edition)です。

via : jQuery Lightbox Plugin (balupton edition)

でっかいメニューをJavaScriptで作る「Cut & Paste jQuery Mega Menu」

表示したい関連リンクなどが多いとき、こんな風に表現すると面白いかもしれません。 Cut & Paste jQuery Mega Menuを利用するとマウスを乗せたときに中身がどばっと表示されます。

via：Cut & Paste jQuery Mega Menu

jQueryでメニューをわかりやすくする「Side Navigation Tooltip / Popup Bubble」

メニューのテキストは可能な限り短くかつわかりやすくしますが、なかなか一発で伝えにくいものです。そんな時、各メニューに対する説明を明示すると、ユーザーフレンドリーになり、クリック率も上がるかもしれません。今回はJavaScriptライブラリのjQueryを使用して実現します。

via：Side Navigation Tooltip / Popup Bubble

iPhoneライクにスクロールさせるJavaScript「OverScroll」

iPhoneのスムーズなスクロールをJavaScriptライブラリ「jQuery」で実現しました。

via：OverScroll

リストをスムーズ動かすJavaScript「jQuery scrollList」

リストを記述することが多いと思いますが、長くなったときに見づらくなります。そんな時、省スペース化して、リストを自動スクロールさせれば、見やすくかつ印象的になります。

via：jQuery scrollList

要素を指定の場所に追随させるJavaScript「stickyfloat」

メニューなどの要素を指定の位置に常に表示するためにはposition:fixed;があります。しかし、IEがサポートしていなかったり、topからの位置に追随してしまいます。そこで、JavaScriptライブラリのjQueryプラグイン「stickyfloat」を利用し、諸問題を解決しましょう。

via：stickyfloat

jQueryでメニューのマウスオーバーをかっちょよくするJavaScript「jQuery Background Position」

かっちょよくシリーズ第２弾。。。 jQueryを使用してメニューのマウスオーバーを印象的にしてみます。

via：jQuery Background Position

jQuery製で柔軟性の高いアコーディオンメニュー「Flexible Accordion」

クリックするとメニューが開くアコーディオンと呼ばれるメニューがあります。 jQueryプラグインのFlexible Accordionは、さまざまなオプションを指定できる柔軟性の高いメニューを作れます。

via：Flexible Accordion

jQueryでメニューを固定位置に追随させる：Live floating menu

いろいろなサイトでメニューを固定＆追随させています。今回はJavaScriptでこれを実現させてみます。

via：Live floating menu

appleに倣え！jQueryで作るiPhoneライクなUI「jqtouch」

いまや持っているのが当たり前になったiPod関連商品のUIをまねしてみましょう。以前、「iPhone」風UIを実現するJavascript「iUI.js」でも紹介したUIをjQueryのプラグインjQTouchで実現可能になりました。

via：jQTouch

jQueryでタブメニューを作る（プラグインなし）

JavaScriptライブラリのjQueryには数多くのプラグインがあり、それを利用することで簡単にリッチなコンテンツを作成できます。今回はその流れに逆らい、プラグインなしでタブメニューを作成してみたいと思います。

via：Tabbed Structure

マウスオーバーでもタブメニューを開閉できるJavaScript「SkiyoTabs」

タブはITリテラシーの低いユーザーにとって、ただの飾りに見えることもあるようです。こういう視点から見ると、タブメニューはクリック時だけでなく、マウスオーバー時にも切り替わるとよいのかもしれません。 SkiyoTabsは簡単にマウスオーバーも可能にしてくれるJavaScriptです。

via : SkiyoTabs

要素を回転表示させるJavaScript「jQuery Carousel」

amazonなどでは、書籍を回転表示させ一覧性と省スペースを兼ね備えています。 jQuery Carouselを使用することで、似たよう表示が可能です。

via : jQuery Carousel

お手軽アコーディオンJavaScript「myAccordion - plugin jQuery」

アコーディオンをお手軽に導入できるJavaScript「myAccordion - plugin jQuery」です。これでコンテンツを収納できるようになります。

via : myAccordion - plugin jQuery

JavaScriptで作るシンプルなタブメニュー「simpleTabs 」

タブメニューの導入には手間がかかります。また、既存のjsだと余計な機能が入っているケースも多いです。 jQueryプラグイン「simpleTabs」は機能を絞りながら、十分に役立つJavaScriptです。

via : simpleTabs

JavaScriptでスライド式のナビゲーションメニューを作る「Sliding Submenu」

ナビゲーションはサイト制作において非常に重要な要素です。今回はユーザービリティならびに回遊性向上のため、jQueryプラグイン「Sliding Submenu」を使用してスライドするナビゲーションメニューを作成します。

via : Sliding Submenu

パンクズを綺麗に見せるJavaScript「jBreadCrumb」

パンクズを設置することでユーザーがどこを見ているのかをわかりやすくできます。おおかた地味な存在ですが、jQueryプラグインjBreadCrumbを使うと一味違う見せ方が可能です。

via : jBreadCrumb

JavaScriptでタブメニューを簡単に作る「Semantic Tabs」

よくあるタブメニューをJavaScriptライブラリjQueryで簡単に作成できるSemantic Tabsを紹介します。 ※このjQueryプラグインは名の通り文章構造が非常にセマンティックです（後述）。

via : Semantic Tabs

ダブルクリックで表示させるメニューを作る「JQuery NavigMenu」

メニューはグローバルや左右に固定されているもの！・・・と、決め付けてはいませんか。サイトの回遊性を上げるためにも、常に表示できるようにしておきたいものです。 JQuery NavigMenuでは、ダブルクリックで好きな場所にメニューを表示させられます。

via : JQuery NavigMenu

スムーズにスクロールするカルーセルJavaScript「Just Another Carousel」

ECサイトを中心にわりと広がりつつあるカルーセル。これを使用することで、省スペースで広がりのある見せ方が可能になりました。 jQueryプラグインの「Just Another Carousel」では、矢印などをクリックしたときだけではなく、要素へのマウスオーバーでもスクロールでき、さらに動きもスムーズです。

via : Just Another Carousel

JavaScriptライブラリ「jQuery」で、いい動きのスライダーを作る「Start/Stop Slider」

画像の切り替えを行うことで閲覧者の興味をひきつけることができます。現状、多くがFLASHを使用していたりしますが、敷居が高いのが難点でしょう。今回紹介する「Start/Stop Slider」を使用することで、わりと簡単に導入が可能です。

via : Start/Stop Slider

お手軽にタブ切り替えを行うJavaScript「Spotlight」

Yahooのトップページでも使用されているように画面遷移しないタブメニューはもはや必須になりつつあります。そこで今回はjQueryプラグイン「jquery_spotlight」を使って、タブメニューを作るとともに、自動でコンテンツを切り替える方法を紹介します。

via : jquery_spotlight

jQueryでニュースティッカーを作成するJavaScript「JqNews」

ポータルサイトやニュースサイトだけでなく、ECサイトなどでも最新情報を自動スクロールさせるニュースティッカーが多く見られます。今回紹介するのは、それを縦型で実現した「JqNews」です。

via : JqNews

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

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

via : CSS Dock Menu

ページの目次を自動で作成するjavascript「jqTOC」」

ページが長くなるとページ内リンクなどでユーザビリティを向上させます。
ただ運用が長くなると修正がいろいろ入り、リンク設定が間違ってくる可能性もあります。
今回はJavaScriptライブラリのjQueryでページ内の目次を作成する「jqTOC」を紹介します。

via : jqTOC

お手軽水平アコーディオン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でCaptchaぽいのを作る「jQuery Real Person」

フォームを送信する時に、スパムを防ぐためCaptchaという認証方式をとることがあります。本格的に作るとなると非常に面倒だったり、画像が変形しすぎたりします。今回はJavaScriptライブラリのjQueryプラグインjQuery Real Personを使用して、お手軽に導入してみます。

via :jQuery Real Person

入力を促す文字をフォームに表示するJavaScript「JQUERY.FIELDTAG.JS」

inputなどフォームのフィールドにうっすら文字を表示させておくと、ユーザーに入力を促すことが可能です。 JavaScriptライブラリのjQueryプラグイン「JQUERY.FIELDTAG.JS」を使用することで簡単に導入可能です。

via :JQUERY.FIELDTAG.JS

フォームのselectをスタイリッシュに彩るJavaScript「jQuery Stylish Select plugin」

formを使用する時にデフォルトのものだとちょっと味気ないです。そんな時に今回のJavaScriptjQuery Stylish Select pluginを利用すると、selectを鮮やかにすることができます。

via :jQuery Stylish Select plugin

selectの複数選択を可能にするmultiple属性をJavaScriptで直感的にする「jQuery crossSelect plugin」

htmlのselectタグには複数選択を可能にするmultiple属性があります。でも、なんとなくわかりにくくありませんか？そんなときはjQuery crossSelect pluginを利用して、直感的でわかりすいフォームにしましょう。

via :jQuery crossSelect plugin

JavaScriptでフォームの入力項目をリアルタイムでチェックする「jQuery Form Validators」

フォームに間違った内容が入力された際に、どこがどう間違っているかを表示してくれるとわかりやすくなります。 jQuery Form ValidatorsならJavaScriptで実現可能です。

via :jQuery Form Validators

入力内容を推測して候補を表示するJavaScript「jQuery Simple Filter」

フォームで項目を入力させるとき、県名など決まりきったものであれば、1文字目の入力で候補を挙げることがユーザビリティ上、好ましいです。 jQueryプラグインjQuery Simple Filterを利用するとJavaScriptを利用して簡単に作成できます。

via :jQuery Simple Filter

フォームの要素にうっすらテキストを表示するJavaScript「jQuery Form Tips」

ユーザビリティに配慮したフォーム作りのため、入力項目にうっすらテキストを表示してみましょう。 JavaScriptライブラリjQueryのプラグイン「jQuery Form Tips」を使用すると簡単に実現できます。

via :jQuery Form Tips

ちょっとうざい（？）入力ヒントJavaScript「jQuery Type-Writing Hint」

フォームなどのテキストボックスには、入力すべき内容を表示してあるのがユーザビリティ上、望ましいです。 jQuery Type-Writing Hintを使用すると過剰なくらいに入力を促せます。

via :jQuery Type-Writing Hint

フォームの入力項目にうっすらテキストを表示するJavaScript「jQuery Watermark Plugin」

フォームの入力項目にうっすらテキストを表示するJaフォームなどでよく、デフォルトでテキストが表示されている場合があります。
何を入力すれば良いのかを示しことができるので、ユーザービリティ上有意義な方法です。
jQuery Watermark PluginはjQueryベースでこれが可能です。

via :jQuery Watermark Plugin

テキストエリアを入力内容に応じて自動でリサイズするjQueryプラグイン「autoResize」

フォームに設置するテキストエリアはある程度大きくしておきたいところですが、スペースをとるのは避けたい。
そんなあなたに朗報です。 jQueryプラグインのautoResizeで入力内容に応じてリサイズ可能になります。

via :autoResize

フォーム入力内容に近い言葉だけ表示するjQueryプラグイン「flexselect」

フォームをselectしたとき選択項目が多いと縦長になってユーザビリティが低下します。そんな悩みを解決するのが、jQueryプラグイン「flexselect」入力内容に近い言葉をだけを残してくれます。

via :flexselect

フォームの入力文字数をチェックするJavaScript「Maxlength Plugin」

フォームで文字数を制限することがよくあると思います。 Maxlength PluginではJavaScriptライブラリjQueryを利用し、文字数制限を実現します。

via :Maxlength Plugin

入力内容の絞込みを行うJavaScript「Live Filter」

多くのリストから絞り込む時にこんなツールがあると便利でしょう。 JavaScriptライブラリ「jQuery」プラグインのLive Filterを使用するとボックスに入れた内容で絞込みが出来ます。

via :Live Filter

jQueryでカレンダーを表示するプラグイン「jMonthCalendar」

カレンダーを表示したい時、月ベースで一覧できると便利です。 JavaScriptライブラリ「jQuery」のプラグインjMonthCalendarでは、お手軽にカレンダーを作成可能です。

via :jMonthCalendar

JavaScriptライブラリ「jQuery」でカレンダーを表示する「dynDateTime」

過去2度jQueryベースのカレンダーを紹介しました。・jQueryベースのカレンダー作成javascript「jCalendar」・JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」今回は第3弾となるdynDateTimeです。

via :dynDateTime

JavaScriptライブラリ「jQuery」を使用してフォームを華麗に彩る「jqTransform」

フォームはユーザーが積極的にアクションを起こす、重要なページです。そのデザインを華麗かつわかりやすくすることは、ユーザーにとっても有意義なことになるでしょう。今回のjqTransformはJavaScriptライブラリjQueryを使用して、フォームを綺麗に彩ります。

via : jqTransform

時間の入力支援javascript「ClockPick」

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

via : ClockPick

JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」

JavaScriptでカレンダーを作る方法はいろいろありますが、なかなか満足のいくものは多くありません。
jCalはJavaScriptライブラリ「jquery」を使用し、お手軽かつクールなカレンダーを作成可能です。

via :jCal

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

jQueryでfaviconを表示させるJavaScript「favoriteIcon」

最近はfaviconがメジャー化してきて、多くのサイトで導入されています。サイトを象徴する画像なので、リンクの近くに表示させておくとリンク先がわかりやすくなります。 jQueryプラグインの「favoriteIcon」を利用すると、簡単に外部リンクにfaviconをつけられます。

via : favoriteIcon

簡単・軽量の吹き出しJavaScript「vTip」

リンクや画像などにマウスを乗せると吹き出しのように説明を表示するJavaScriptがあります。これを簡単かつ軽量のJavaScriptで実現したのが、jQueryプラグインの「vTip」です。

via : vTip

マウスオーバーをかっちょよくするJavaScript「jquery-glow」

リンクのマウスオーバーではわかりやすく印象的なものにする必要があります。 jquery-glowではマウスオーバー時に、かっちょよくキラキラとさせます。

via : jquery-glow

印象的なニュースティッカーを作れるJavaScript「jTicker」

情報を流れるように表示するニュースティッカーは多々ありますが、わりと画一的でした。 jTickerを利用すると、印象的にすることができます。

via : jTicker

フォントをJavaScriptで着飾る「JQuery FontEffect plugin」

フォントに反射効果や枠線、ドロップシャドー・・・などの装飾をするのは画像編集ソフトが必要でした。その煩わしさを解消したのが、JQuery FontEffect pluginです。もうなんでもやっちゃいます。

via : JQuery FontEffect plugin

JavaScriptでCSSを切り替える：jQueryプラグイン「jStyler」

文字サイズ「大・中・小」としているサイトが見受けられます。これを手軽に導入するためjQueryプラグインのjStylerを使用してみてはいかがでしょうか。

via : jStyler

3ステップでツールチップを作成「jQuery Simple Tooltip」

ツールチップと呼ばれるその要素に関する詳細などをヒントっぽく表示する手法があり、フォームなどに使用するとユーザビリティの向上に役立てられます。 3ステップでこのツールチップを導入できるjQuery Simple Tooltipを紹介します。

via : jQuery Simple Tooltip

ナンバリングされた脚注を簡単に作成できるJavaScript「jQuery Footnotes」

ページが長くなるのを避けるため、また引用文典を文末に記載するために脚注が使用されます。 1つずつ記述してリンクするのは面倒だし、ナンバリングしていたら追記するたびに修正しなければいけません。 jQuery Footnotesでは、そんな面倒を一気に省いてくれます。

via : jQuery Footnotes

テキストにグラデーションをかける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

div要素の幅を伸縮自由にするJavaScript「Ingeny Splitter」

ページのレイアウト幅をがっちりと決めると、ユーザーに不便させる可能性があります。 jQueryプラグインのIngeny Splitterを使用するとドラッグでページレイアウトを自由にユーザーが調整できるようになります。

via：Ingeny Splitter

twitterタイムラインをJavaScriptで表示「jQuery jqtwitter」

話題なのか話題じゃないのか微妙なtwitterのタイムラインをJavaScriptで表示してみます。

via：jQuery jqtwitter

JavaScriptで独自マウスジェスチャーを作れる「jQuery Fancy Gestures」

マウスを一定の方向に動かすことにより、特定の動作をさせるマウスジェスチャー。 jQuery Fancy Gesturesでは、これをオリジナルで作ることができます。

via：jQuery Fancy Gestures

floatさせた要素を上手い具合に整列させてくれるJavaScript「jQuery Masonry」

CSSでfloatさせると要素の高さによっては、想定していたように並ばないことがあります。そんな時にはjQuery Masonryを使用すれば、まず水平方向に合わせた後、垂直方向にもあわせるので、綺麗に要素を整列できます。

via：jQuery Masonry

JavaScriptで絵文字を表示させる「Emotions toggle」

コメント欄などでかわいい絵文字が使用できると、華やかになります。 JavaScriptライブラリjQueryのプラグインEmotions toggleを利用すると簡単に導入できます。

via：Emotions toggle

JavaScriptライブラリjQueryで指定要素を目立たせるプラグイン「expose」

フォームなどでは入力中に周りに余計なものが見えると入力がしにくかったりします。そんな時はjQueryプラグイン「expose」を使用すると、目立ってわかりやすくなります。

via：expose

JavaScriptライブラリjQueryで指定要素を探し出すプラグイン「seek」

WEBサイトはいろいろな要素によって成り立ちます。そのため、どこに何があるのかユーザーに知らせるのが難しくなります。そんな時、jQueryプラグインのseekを利用すると指定要素を明示してくれます。

via：seek

wysiwygエディターをjQueryプラグインで簡単導入「jQRTE」

フォームなどユーザーに入力をさせる部分にwysiwygが利用できるとユーザーの表現が広がります。これにともない、コンテンツもリッチになるかもしれません。敷居が高いと思われるwysiwygエディターもjQueryプラグイン「jQRTE」を利用するとあっという間に導入できます。

via：jQRTE

コナミコマンドをサイトに埋めこめられるJavaScript「Cheat Code: a jQuery Plugin」

懐かしのコナミコマンド・・・あなたのサイトでも実現しませんか？ JavaScriptライブラリのjQueryプラグイン「Cheat Code: a jQuery Plugin」を使用すると簡単に実現可能です。

via：Cheat Code: a jQuery Plugin

JavaScriptライブラリjQueryで、ちらみせエフェクト

過去2度、ちらみせJavaScriptを紹介しましたが、もっと簡単に実現してみましょう。 JavaScriptライブラリjQueryを使用したサンプルです。

via：Simple Page Peel Effect with jQuery & CSS

簡単にバーコードを作れるJavaScript「jquery-barcode」

どこで使用するか不明ですが、バーコードを手軽に作れるJavaScriptjquery-barcodeの紹介です。

via ：jquery-barcode

テーブルの表組みにページネーションをつけるJavaScript「Table Pagination」

たまに数十列を表示する表組みに出くわすことがあり、辟易することがあります。そんな時は、所定の件数で次を見るというようなページネーションをつけられるjQueryプラグインTable Paginationを使いましょう。

via ：Table Pagination

jQueryでRSSの登録をユーザーに促すJavaScript「jQuery Feed Menus」

ブログが普及し、RSSを配信しているサイトは増加の一途をたどっています。しかし、RSSリーダーに登録いただく方法はあまり上手くないです。 jQuery Feed Menusを利用すると、ユーザーに配慮した形で登録を促すことが出来ます。

via ：jQuery Feed Menus

グラフにトレンドラインも加えたJavaScript「jqPlot」

JavaScriptでグラフを作成する手法はいくつか紹介しました。例）JavaScriptでグラフを作成するサンプル jqPlotは、グラフに加えトレンドラインも自動で表示させてくれます。

via ：jqPlot

jQueryで時間をカウントダウンするJavaScript「jCountr」

ティザーサイトなどで、あと何秒でオープンみたいな表示があります。 JqueryプラグインjCountrを使用すると似たようなカウントダウンが可能になります。

via ：jCountr

角丸もグラデーションも付けてしまうJavaScript「Round Corners jQuery Plugin」

最近は角丸やグラデーションが多用されていますが作るのはなかなかの手間です。 JavaScriptのRound Corners jQuery Pluginを使用すると、そんな手間を省くことが出来ます。

via ：Round Corners jQuery Plugin

要素を3D回転させるJavaScript「jQuery Plugin: rotate3Di」

クリック時やマウスオーバー時に何かしらの変化を与えることで、ユーザーの興味を喚起することができます。それを、3D回転のエフェクトでやるとユーザーに驚きを与えることができるのではないでしょうか。 jQuery Plugin: rotate3Diを使用すると簡単にできてしまいます。

via ：jQuery Plugin: rotate3Di

株価の表示みたいなニュースティッカーJavaScript「jStockTicker plugin」

株価が流れて表示されるように、一列で情報を流し続けることで、注目を得られます。また、多くの情報提供することができます。 JavaScriptライブラリのjQueryプラグインのjStockTicker pluginで簡単に導入可能です。

via ：jStockTicker plugin

簡単にスライダーを作成できるJavaScript「jFlow」

スライダーがあると非常に便利ですが、結構利用するのは難しかったりします。 jQueryプラグインの「jFlow」を利用すると簡単にスライダーが作成できます。

via ：jFlow

ハイクオリティなカラーピッカーJavaScript「GcColor」

色を選択させることはあまりないでしょうが、そんな要素だからこそリッチにしておくとユーザーの印象も変わるでしょう。 jQueryプラグインのGcColorは、jQuery UIを使用するなど、操作面でハイクオリティなカラーピッカーとなっています。

via :GcColor

フロートウィンドウを作成するJavaScript「(mb)ContainersPlus」

ある部分だけ目立たせたいけど、ユーザーの邪魔にならないよう閉じられるようにしたい。誰しもがもつ欲求をかなえてくれるのが、jQueryプラグイン「(mb)ContainersPlus」です。移動、リサイズなどが可能なフロートウィンドウをJavaScriptで作成できます。

via :(mb)ContainersPlus

目をひきつけるニュースティッカー：jQueryプラグイン「BBC style news ticker」

ニュースティッカーにはいろいろな種類がありますが、今回紹介するjQueryプラグイン「BBC style news ticker」は、かなり目をひきます。 1文字1文字点滅しながら表示されるので、目立つ＆うざがられること間違いないでしょう。

via :BBC style news ticker

ニュースティッカーをjQueryプラグイン「News Ticker Pro」で作る

お知らせをいっぱい表示させたいが、スペースの都合もある。そんな時ニュース系サイトでよく見られる1件1件ニュースを表示するニュースティカーを使うと便利です。 JavaScriptライブラリjQueryのプラグイン「News Ticker Pro」で簡単に設置できます。

via :News Ticker Pro

JavaScriptライブラリjQueryで綺麗な時計を作る「epiclock」

サイトに時計を表示させたい。単純に数字を出すだけでは味気ないので、今回紹介するepiclockのように画像で見せるのはいかがでしょうか。 JavaScriptライブラリjQueryで手軽に実現可能です。

via :epiclock

ページをめくるようなエフェクトJavaScript「The Sexy Curls jQuery Plugin」

チラ見せしちゃうJavaScript「Page Peel」に引き続き、ページをめくるような表現をつけられるJavaScript「The Sexy Curls jQuery Plugin」です。これにより、効果的に広告やコンテンツを見せることが可能です。

via :The Sexy Curls jQuery Plugin

コンテンツをスライド表示させるJavaScript「Slide box」

デザインの都合上、省きたいが、でもこのコンテンツ入れたい。。。そんなサイト制作者の葛藤を解消してくれるのが、Slide boxです。最初は隠しておきながら、ボタンを押すとエフェクトつきで表示されます。

via :Slide box

別コンテンツをスライド表示するJavaScript「Page Slide」

別のhtmlなどのコンテンツを表示するにはiframeなどがありますが、好ましくありせん。今回のPage Slideは、簡単かつ刺激的な動きで別コンテンツを表示することができます。

via :Page Slide

チラ見せしちゃうJavaScript「Page Peel」

最近チラッと広告やコンテンツを見せて興味を喚起するサイトがあります。 jQueryプラグインの「Page Peel」はそれを実現してくれるJavaScriptです。

via :Page Peel

jQueryで星型投票を実現させる「Sexy Vote jQuery plugin」

ユーザーを巻き込むため、投票を導入するケースがあるでしょう。
そのとき、視覚的に見せられるとより効果的です。
Sexy Vote jQuery pluginは星型の投票システムをjQueryで実現させてくれます。

via :Sexy Vote jQuery plugin

英字新聞ぽいコラムをJavaScriptライブラリ「jQuery」で作る「Columnizer」

WSJなどの英字新聞風なコラムを作るJavaScript「Columnizer」です。流行のJavaScriptライブラリ「jQuery」を利用して手軽に作成可能です。日本語でも簡易的なコラムレイアウトとして使用可能でしょう。

via :Columnizer

ファイルサイズをJavaScriptライブラリ「jQuery」で自動表示する「addSizes.js」

pdfなどをリンクさせる時ファイルサイズを表示させる場合があります。そんな時、いちいちファイルサイズを調べるのは面倒です。 addSizesはそんな面倒を取り除いてくれるjQueryプラグインです。

via :addSizes

心地よく要素を切り替えるJavaScript「jFlip」

画像ギャラリーでは切り替え方は様々あります。 jQueryのプラグインであるFlip!では、くるくると心地よく切り替えが出来るほか、画像以外の要素もくるりと切り替えられます。

via :Flip!

スクロールしてもついてくる！のJavaScript「jQuery Scroll Follow」

ページが縦に長くなるとサイドメニューとかが見えなくなってしまいます。それを防ぐ方法としてabsoluteやfixedするケースがあります。jQuery Scroll FollowではjQueryを使用し、スムーズについてきます。

via : jQuery Scroll Follow

3ステップで表をソート＆値を検索できるjavascript「dataTables」」

サイト制作でよく使用するものの一つにテーブルで作成する表だと思います。しかし、その整理方法は面倒で、縦に長くなると見づらくなります。今回紹介するDataTablesはjQueryを使い簡単に表をソートさせたり、値を検索したり、表示する項目数を調整できます。

via : DataTables

表を彩る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です。

via : simple drawing with jQuery

Ajaxにコンテンツを読み込むjavascript「jQuery ajaxContent」

Web2.0と言われ、外部コンテンツをAjaxに表示するようなサイトが増えました。 jQuery ajaxContentはそれを可能にするjavascriptです。

via : jQuery ajaxContent

角丸をJavaScriptライブラリjQueryで作る「jQuery Corners」

サイトを作っていると角が四角いレイアウトが多くなり、角ばった印象を与えます。そこで角をとる「角丸」が多く使用されますが、今回はそんな角丸をJavaScriptで簡単に実現します。 jQuery Cornersは流行のUJavaScriptライブラリ「jQuery」のプラグインです。

via : jQuery Corners

jQueryベースの角丸javascript「JQuery Curvy Corners」

要素の角を丸く表示するページが増加しています。 JQuery Curvy Cornersでは、以前紹介した角丸作成javascript「curvyCorners」をjQueryベースに移植しています。

via : JQuery Curvy Corners

jQueryベースの角丸javascript「jQuery Corner」

角丸を作成できるjavascriptは多いですが、ここまで角の形の種類が多いのも珍しいかもしれません。 jQuery Cornerの基本角は8種類と豊富です。

via : jQuery Corner

何にでも影を付けられるavascript「Drop Shadow」

文字や画像に影を付けると浮き上がって見えるので、インパクトがあります。ただし加工するのは面倒でした。 Drop Shadowではほんの少しの手間でテキストはもちろん画像、ボタンまですべてに影を付けることが出来ます。

via : Drop Shadow

ページを指定要素で分割するjavascript「pager」

ページを作成する際にどうしても長文になってしまうことがあります。しかし、内容自体は繋がっているので、なるべくなら単一ページに収めたい。。。そんな我が儘をpager jQuery plug-inは、ページを指定要素で分割し、解決してくれます。

via : pager jQuery plug-in

スライド間をいい感じにスクロールするjavascript「jQuery.LocalScroll」

スライドさせるjavascriptは多くありますが、1章1節・・・3章5節というふうに階層が深くなるものには対応していないのがほとんどです。 jQuery.LocalScrollは、多階層に渡るスライド間をいい感じにスクロールします。

via : jQuery.LocalScroll

印刷範囲を指定できるjavascript「jPrintArea」

印刷時にナビゲーションなどのいらない部分を省略したい時があります。 CSSを分けることで可能ですが、いちいち別のファイルを作成するのも面倒です。 jPrintAreaでは簡単に印刷範囲を指定することができます。

via : jPrintArea

コンテンツをスライド表示するjavascript「Coda-Slider」

Web上には無限大のスペースが広がっています。しかし、コンテンツの多さ＝見やすさには決してなりません。 coda-sliderは多くなってしまったコンテンツをスライドのように表示することで、見やすさも得ることができます。

via : coda-slider

自由自在にグラデーションを付けるjavascript「jQuery gradient」

背景などにグラデーションを使う際に、画像を一切使用しないjavascriptです。 jQuery gradientは要素のサイズを大きくしても表示が速度が遅くならないjavascriptです。

via : jQuery gradient

要素にグラデーションをかけるjavascript「Gradient」

背景などにグラデーションを使うサイトが増加しています。しかし、グラデーションを使用する為に画像を作成しなければなりません。 Gradientは背景画像を使用せずにグラデーションをかけることができます。

via : Gradient

RSSとATOMフィードをparse（解析）するjavascript「jFeed」

ブログの浸透とともに、RSS（ATOM）フィードを発信するサイトが増えています。これらのフィードをHTMLで表示するjavascriptがjFeed: JavaScript jQuery RSS/ATOM feed parser pluginで公開されています。

via : jFeed

ニュースティッカーを作成するjavascript「Innerfade with jquery」

Web上では、ニュースを次々と流すニュースティッカーと呼ばれる手法があります。これを導入することで限られたスペースで動きのあるコンテンツ表示を可能にします。 MedienfreundeのInnerfade with jqueryを使用すれば、このニュースティッカーを表示することができます。

via : Innerfade with jquery

jQueryベースのニュースティッカーjavascript「liScroll」

サイトの更新履歴などを省スペースでなるべく多くかつ注目を浴びるように表示したい場合は、ニュースティッカーを用いることがあります。 liScrollはjQueryで簡単に作れるニュースティッカーjavascriptです。

via : liScroll

コードをハイライト表示するjavascript「Chili」

HTMLやJavascript、PHPなどのソースを紹介する時にはわかりやすい表示が求められます。 Chili Centralでは、コードをハイライト表示するChiliを公開しています。

via : Chili Central

コードの表示を整形するjavascript「jCodeViewer」

HTMLのタグには、HTMLやCSSなどを記述するところに使用するcodeと呼ばれるものがあります。 codeは閲覧する人に見やすい表示を心がける必要があります。 jCodeViewerでは自動でコードを整形してくれます。

via : jCodeViewer

ページ単位でタグクラウドを作成するjavascript「DynaCloud」

ブログが急速に広まり、記事を関連づけるタグという仕組みがひろまりました。これにともないタグの量に応じてテキストの大きさを変えるタグクラウドも浸透しています。 DynaCloudではこれを単一ページで実現するjavascriptを公開しています。