prototype 63サンプル

JavaScriptライブラリのPrototypescript.aculo.usのプラグインを利用して出来るサンプルです。
prototypeはAjaxライブラリの先駆けと登場し、多くのサイトで使用されています。
ここでは、画像関連、メニュー関連、フォーム関連、その他、日本語未解説の分類でAjaxライブラリのprototypeならびにscript.aculo.usのサンプルを紹介しています。

proShowcase

JavaScriptライブラリprototypeで華麗に画像を表示する「showcase」

amazonのように画像を・・・、でももっと綺麗に表示させて・・・というわがままな願いを、prototypeでかなえてくれるJavaScript「showcase」を紹介します。

via : showcase

protoFlow

カバーフローぽい画像ギャラリーJavaScript「ProtoFlow」

appleが採用して一気にメジャー化したカバーフロー。 随所で使用されるのが目に付きますが、今回紹介するProtoFlowでもprototype.jsとscriptaculous.jsを利用することで、簡単に導入可能です。

via : ProtoFlow

proPano

パノラマ写真を3Dで縮小表示するjavascript「3D Panorama」

最近のデジタルカメラはパノラマが簡単に撮影できますが、ホームページに使うとなると横幅が長過ぎるのが難点です。 Stupid JavaScript Tricks: "3D" Panoramaでは、パノラマ写真の横幅を縮めた上、3Dで回るように表示することができるjavascriptを紹介しています。 *FireFox限定

via : 3D Panorama

proLazierload

可視部分の画像のみを読み込むjavascript「lazierLoad 」

ブロードバンド環境が整いつつあるとはいえ、画像を使用しすぎるとローディングが長くなります。 lazierLoadは見えている部分の画像のみを読み込んで表示するjavascriptです。

via : lazierLoad

proiPhoto

iPhotoライクな画像ギャラリーを作成するjavascript「iPhoto-like image resizing」

iPodやiPhoneでインターフェースの良さが評価されるapple社。 そのベースとなったMacにはiPhotoという画像を収縮できるギャラリーが搭載されています。 iPhoto-like image resizingでは、iPhotoをWeb上でも 使用できるjavascriptを紹介しています。

via : iPhoto-like image resizing

proLightBox

画像ギャラリーの定番javascript「LightBox」

リリースされた時は驚きでしたが、いまやWeb2.0の代表作LightBoxです。 名前を知らない人でも体験すれば「あ~、あれか」と思う画像ギャラリーの定番javascriptです。

via : LightBox

protoMenu ブラウザ上で右クリックすると表示されるショートカットキーがあります。 これをオリジナルにしたものをコンテキストメニューと言います(多分)。 Proto.Menuではこれをprototypeで実現しています。

via : Proto.Menu

proFishEye

prototypeでFisheyeメニューを作成するjavascript「Fisheye」

アイコンを用いたメニューを収縮させて省スペースでインパクトを与えるフィッシュアイメニュー。 今回はjavascriptライブラリのprototypeで作成するFisheyeを紹介します

via : Fisheye

ploslider

アイキャッチなメニューを作成するjavascript「Menu with slider」

いわずもがな、メニューはサイトを構築する上で重要な要素の一つです。 メニューをわかりやすく表示するのはサイト開設者にとって必要不可欠であり、UDにも役立つでしょう。 AXXTMenu with sliderではアイキャッチ(目にとまる)メニューを作成できます。

via : CSS Menu with slider

proTabSlide

華麗なタブメニューjavascript「Fancy Sliding Tab Menu」

タブメニューとはその名の通りタブを利用したメニューです。 それゆえ、デザインの種類はあまり多くなく飽きられやすくなります。 Fancy Sliding Tab Menuでは、従来とはひと味変わった華麗なタブメニューを作成できます。

via : Fancy Sliding Tab Menu

glider

コンテンツをスライド表示するjavascript「glider.js」

タブやアコーディオンなどを使用することで限れられたスペースを活用することができます。 このような手法の一つにcarouselというものがあります。 glider.jsではcarouselを作成することができます。

via : glider.js

validation

フォームの値を識別するjavascript「validation.js」

送信フォームに入力してもらう時に数字にして欲しいところやe-mailを正しい形式で入力して欲しい時があります。 DexagogoReally easy field validationでは入力内容を簡単に確認することが出来るjavascript「validation.js」を公開しています。

via : Form validation

autokana

フォームで全自動でフリガナを付与するJavaScript「AutoKana.js」

巷ではフォームのフリガナを自動入力させるAutoRuby.jsが話題ですので、あえて紹介するまでもないかなと思い、これに触発されたと思われるjavascript「autoKana.js」でも取り上げてみます。

via : autoKana.js

proPassStrength

パスワード強度を視覚的に明示するjavascript「Password Strength」

フォームなどでパスワードを入力してもらう時に、登録情報の誕生日や電話番号をパスワードにしている人がいます。 このような簡単なパスワードでは訪問者だけでなく、サイト運営者にも危険が生じかねません。 Password Strengthでは入力したパスワードの強度を視覚的に明示してくれるjavascriptです。

via : Password Strength

proSelectBox

セレクトボックスを装飾するjavascript「Select Box」

フォームは閲覧者との重要な接点です。 そのためにはデザインを凝ることも必要です。 Script.aculo.us Select Boxではセレクトボックスを奇麗にすることができます。

via : Select Box

prodatepicker

script.aculo.usベースの日付選択javascript「DatePicker」

フォームで日付を選択する際にポップアップでカレンダーを表示することで訪問者のユーザビリティを向上できます。 DatePicker using Prototype and Scriptaculousでは、script.aculo.usベースで実現しています。

via : DatePicker

proResize

テキストボックスを自動で収縮するjavascript「Resizing textarea」

フォームを作成する際のテキストボックスの適切な大きさで悩むことがあります。 文字数にあわせて自動で収縮すればこんな悩みもなくなります。 Resizing form textbox example using Prototypeはprototypeベースで作成された自動収縮テキストボックス作成用スクリプトです。

via : Resizing textbox

proNewsSticker

クールなニューススティッカーjavascript「JavaScript News Sticker」

ニュース系サイトでは最新ニュースを流していくニューススティッカーという仕組みがあります。 JavaScript News Stickerでは、文字だけでなく画像をシンクロさせてニュースを流すことができます。

via : JavaScript News Sticker

plotr

prototypeベースでグラフを作成するjavascript「Plotr」

Solutoire.comPlotrは棒グラフ、円グラフ、線グラフを作成できるjavascriptです。

via : Plotr

proGame

プロキシーライクなゲームを作成するjavascript「Blocks.js」

ブロック崩しの進化版のような「プロキシー(?)」というゲームがあります。 それをjavascriptで作成したPrototype/Scriptaculous Version of Same Gameです。

via : Prototype/Scriptaculous Version of Same Game

proStarBox

星形投票システムを実現するjavascript「StarBox 」

よくブログなどでは星形の投票システムを見かけます。 StarBoxではprototypeとscript.aculo.usで実現しています。

via : StarBox

proPrototip

高機能なツールチップjavascript「Prototip」

リンクなどに説明を付与するツールチップというものがあります。 今回紹介するPrototipは、エフェクトや出す場所を調整できる高機能なjavascriptです。

via : Prototip

proAutoscroll

ページ内をスクロールさせるjavascript「auto-scrolling-page-navigation」

本文が長くなった時、1ページに収めたい時にはアンカーリンクを使い、該当箇所まで飛ばせることがあります。 しかし、アンカーはがくっと一気に遷移するのが嫌いです。 そんな方には、auto-scrolling-page-navigationを使えばスムースなスクロールが可能になります。

via : auto-scrolling-page-navigation

proPhotoColor

PhotoShopライクなカラーピッカーjavascript「Photoshop-like JavaScript Color Picker」

カラピッカーの原型はPhotoShopによって作られた(?) というわけで、今回はPhotoShopのように充実した機能をもつPhotoShop-like JavaScript Color Pickerを紹介します。

via : PhotoShop-like JavaScript Color Picker

proLayoutManager

超手軽にレイアウトを作成するjavascript「Simple Layout Manager」

サイトを作成する際にはCSSでデザインする場合が主となっていますが、floatやらclearfixやらなど非常に難しいのも事実です。 Simple Layout Managerを利用することで、超手軽にWebレイアウトを作成することができます。

via : Simple Layout Manager


gal.gif

Canvas Gallery

反射効果付きギャラリー
tree.gif

Tree.js

ツリー型メニュー
editinplace.gif

Proto.IPS

書き換え
slider.gif

Slider

スライダー
verticalmenu.gif

Vertical Menu

アコーディオン
lightview.gif

Lightview

LightBox形ギャラリー
protowindow.gif

Prototype Window Class

ウィンドウ
transmes.gif

Transparent Message

透明ウィンドウ
portal.gif

Portal

ポータルサイト作成
starrating.gif

Atar Rating Form

星形投票
datech.gif

DateChooser

時間の入力支援
scal.gif

Scal

カレンダー
tablekit.gif

TableKit

テーブルのソート&書き換え
animeedit.gif

EditInPlace.Animated.js

テキスト書き換え
carou.gif

Prototype Carousel

カルーセル
imagecrop.gif

Image Cropper

画像のトリミング
slide.gif

Slideshow

スライドショー
spotlike.gif

Spotlight-Like Search

Mac似の検索
movamouse.gif

Record mouse movement

マウスの動きを記録
bounse.gif

Bounce Effect

バウンドエフェクト
newssclo.gif

news scroller

スクロール型ティッカー
ortho.gif

Ortho

描画
tran.gif

Transitions

画像遷移のエフェクト
tra2.gif

image blending

画像遷移のエフェクト
accor.gif

simple accordion

アコーディオン
shadow.gif

The Shadower

影を付ける
tag.gif

Swappable Tags

タグ入力補助
rate2.gif

Rater

星形投票
tab.gif

prototabs

タブメニュー
protoload.gif

Protoload

イベント時にローディング画面
progress.gif

ProgressBar

進捗状況バー
richedit.gif

Place Rich Editor

高機能なテキスト書き換え
fast.gif

Fast Loader

画像の読み込みを後回し
tab2.gif

Simple tabs

タブメニュー
tab3.gif

Control.Tabs

タブメニュー
rate3.gif

AJAX Rating Stars

星形投票
graph.gif

AjaxMGraph

グラフ生成