mootools 112 サンプル:skuare.net

JavaScriptライブラリのmootoolsのプラグインを利用して出来るサンプルです。
Ajaxライブラリの一つmootoolsは、必要十分なメソッドに抑え、軽く、早いのが特徴です。
ここでは、画像関連、メニュー関連、フォーム関連、テキスト関連、その他、日本語未解説の分類でAjaxライブラリmootoolsを紹介しています。

  • Image(19)
  • Menu(13)
  • Form(8)
  • Text(9)
  • Other(18)
  • W/O_JP(45)
moopicbox

mootoolsでLightbox「Picbox」 only 5kb

JavaScriptライブラリのmootoolsでLightboxを実現するPicboxです。 よくある感じではありますが、わずか5kbです。また拡大画像のドラッグや等倍化なども可能です。

via : Picbox

mooGallery

クールな画像ギャラリーを作成できるJavaScript「UvumiTools Gallery Plugin」

LightBoxなんてもう古い。 もっとクールに画像を見せ付けましょう。 JavaScriptライブラリmootoolsのプラグイン「UvumiTools Gallery Plugin」です。

via : UvumiTools Gallery Plugin

mooAnipan

マウスホイールで画像を拡大/縮小できるJavaScript「Animated Panel」

マウスホイールが主流となってきつつある昨今、画像だってマウスホイールで拡大/縮小したい。 そんな欲求が出てくるのも時勢かもしれません。 Animated PanelはJavaScriptライブラリのmootoolsを利用して、実現しました。

via : Animated Panel

mooStack

mootoolsでも画像をめくるように遷移させるJavaScript「mooStack」

画像をめくるように切り替えるJavaScriptをいくつか紹介してきました。 そんな便利なJavaScriptをmootoolsでも可能にしたのが、mooStackです。

via : mooStack

mParallax

画像に奥行き感をもたせられるJavaScript「mParallax」

レイヤー表示(?)JavaScript「jParallax」は、重ねたPNG画像が動くなど奥行き感を出せました。 そんな、JavaScriptのmootools版「mParallax」です。

via : mParallax

mooFlow

Appleぽい画像ギャラリーjavascript「MooFlow」

AppleのiTunesやCoverFlowで使用されているギャラリーに影響を受けたjavascriptです。 画像が多くなると滑らかではないですが、正直こんなのが欲しかったと思うスクリプトです。 その名も、MooFlowです。

via : MooFlow

mooHorizonSlider

mootoolsで、いい感じに横スクロールするJavaScript「mooHorizonSlider」

ECなどではスペースの有効活用のため、また楽しさを醸し出すために横スクロールさせる手法が多く見られます。
今回はそれをJavaScriptライブラリのmootoolsを使用して可能にした「mooHorizonSlider」を紹介します。

via : mooHorizonSlider

Sexy LightBox

セクシーなLightBoxを実現するJavaScript「Sexy LightBox」

LightBoxの亜種が様々出ています。 mootool.jsをベースとするSexy LightBoxもその一つです。 しかもセクシーという触れ込み。。。

via : Sexy LightBox

moo3dcarousel

JavaScriptライブラリ「mootools」で3Dぐるぐるさせる

最近、英語で言うところのcarousel(回転木馬)と言われる画像をぐるぐる回すのがはやっています。 これをJavaScriptライブラリ「mootools」を使用して3Dにした「Mootools 3D Carousel」を紹介します。

via :Mootools 3D Carousel

mooImageFlip

Windows Vistaライクな画像ギャラリーjavascript「ImageFlip」

最近の画像ギャラリーの進化ぶりには目を見張るものがあります。 ImageFlipはWindows Vistaからヒントを得て作られたjavascriptの画像ギャラリーです。

via : ImageFlip

mooPuzzle

javascriptライブラリ「mootools」でパズルを作成する

Slide Puzzle in JavaScript (mootools)では簡単に画像からパズルを作成するjavascriptを公開しています。

via : Slide Puzzle in JavaScript (mootools)

mooThumbnoo

簡単に画像を拡大できるjavascript「Thumbnoo」

ギャラリー系javascriptでは、拡大用とサムネイル用の画像2種類を必要とする場合があります。 しかし、いちいち作成していてはサーバー容量があっという間に満杯になってしまいます。 Thumbnooはサムネイルいらずで簡単に画像を拡大させることができます。

via : Thumbnoo

mooEfxFactory

画像に影やリフレクションを付けるjavascript「efxFactory」

サイト作成時によく使用する画像。 それを加工したいと思うのはサイト運営者の性でしょう。 efxFactoryは、画像に影やリフレクションを付与できるmootoolsベースのjavascriptです。

via : efxFactory

mooRevolver

回転式の画像ギャラリーjavascript「MooRevolver」

Eコマースなどで商品を陳列する際、一定時間で商品を変更していくケースがあります。 その場合にMooRevolverを使用すると、全商品を可視にしながらもエフェクトを付けることができます。

via : MooRevolver

mooSlideX

画像をクールに表示するjavascript「mooSlide」

ホームページなどでは画像を表示させる際に「LightBox」やその派生品を使用するケースが増えてきています。 artVipermooSlideも派生品の一つですが、表示の仕方がよりクールです。

via : mooSlide

SmoothGallery

華麗なイメージギャラリー&スライドショーを実現するjavascript「SmoothGallery」

ブログでは写真を掲載するケースが多いですが、奇麗にかつ見やすく表示するのは困難をともないます。 JonDesignが提供するSmoothGalleryでは華麗なイメージギャラリーに加えて、スライドショーも実現できます。

via : SmoothGallery

iCarousel

画像をスライド表示させるjavascript「iCarousel」

Web上には無限のスペースがあるとはいえ、やはりディスプレイの表示領域には限界があります。 Fabio Zendhi NagaoiCarouselを使用すると、ニュースティッカーや画像のスクロール表示をすることが出来ます。 今回は商品説明などでよく使われるような、画像のスライド表示を説明します。

via : iCarousel

mooMediabox

動画も対象のLightbox系javascript「Mediabox」

Web2.0の象徴といえば画像をクールに表示できる「Lightbox」があります。 しかしLightboxでは画像のみが対象でした。 MediaboxはフラッシュはもちろんYouTubeなどの動画サイト、iflameまで表示できます。

via : Mediabox

mooSlideShow

スライドショーを作成するjavascript「Slideshow」

スライドショーを作成するjavascriptのうち画像間のエフェクトを変更できるのはあまり多くありません。 Slideshowはエフェクト(種類・時間)、ナビゲーションの方法などを変更することができます。

via : Slideshow

nogray_time_picker

ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」

時間を指定できるタイムピッカーは、多くありますが、ここまでデザイン性に富んだものはなかったかと思います。
NoGray Time Pickerはサンプルをご覧いただければわかりますが、まさに時計型です。
これにより、直感的な操作でユーザビリティが向上可能です。

via : NoGray Time Picker

fValidator

フォームの項目をチェックするjavascript「fValidator」

双方向性時代になりフォームは重要性を増し、簡便性に加え入力チェックが必須となってきています。 Fabio Zendhi NagaofValidatorでは、リアルタイムにフォームの項目をチェックすることができます。

via : fValidator

mooFormCheck

フォームをリアルタイムでチェックするjavascript「FormCheck」

フォームで入力を間違われると確認のしようがなくなる可能性があります そのためにもフォームの入力項目を確認する必要があります。 Formcheck 2ではリアルタイムに入力内容を確認し、異なる場合は、ヒントを出すjavascriptを公開しています。

via : Formcheck 2

hints

フォームに吹き出しでヒントを出すjavascript「Hints.js」

フォームでは作成者と入力者の意図が一致しないときがあります。 またユーザビリティの観点からもわかりやすいフォーム制作が求められます。 Hints.jsを挿入するとフォームに吹き出しでヒントを出すことができます。

via : Hints.js

mooCalendar

超クールなカレンダーjavascript「Calendar」

これまで多くのデートピッカーと呼ばれるカレンダーを紹介してきました。 しかし、総じて地味な外見が多かったです。 今回紹介するCalendarは超クールなカレンダーを作成できるjavascriptです。

via : Calendar

mooMultiUpload

フォームで複数ファイルを送信するjavascript「Multiple file upload」

通信環境の発展で画像や動画をアップロードする機会が増えています。 Multiple file uploadはフォームから複数のファイルを送信することができるjavascriptを公開しています。

via : Multiple file upload

mooFancyForm

フォームを彩るjavascript「mooFancyForm」

フォームを外見をデザインすることで、訪問者のコンタクト率の上昇が期待できます。 FancyFormを使用すれば、checkboxとradioの印象を良くすることができます。

via : FancyForm

jmooTextLimit

javascriptライブラリ「mootools」でtextareaの文字数を制限する

フォームなどでのフリーアンサーは文字数を指定したいことがあります。 textLimitではmootoolsベースで、文字数を制限する方法を紹介しています。

via : textLimit

mooTexteffect

JavaScriptライブラリ「mootools」でテキストにエフェクトをかける

Mootools Function Chainingにて面白い表現が紹介されていました。 JavaScriptライブラリ「mootools」を使用し、テキストにエフェクトをかける方法です。

via : Mootools Function Chaining

fontsize

フォントの大きさを変更するjavascript「fontSize.js」

ユニバーサルデザインという言葉がWeb業界でも言われ、フォントのサイズを3段階に変更できるサイトも増えています。 しかし、開設者側の見やすさと閲覧者が望む見やすいフォントサイズは果たして一致しているのでしょうか。 justinmaierでは、既存の概念とはひと味違う方法でフォントの大きさを変更できる「fontSize」を公開しています

via : fontSize

fontselector

フォントの種類を変更するjavascript「Selector.js」

ホームページを作成する時に悩むのがフォントの種類。 見る環境や人によって最良のフォントは変わってきますので、非常に難しいところです。 justinmaierでは、Web上でフォントの種類を変更できる「fontSelector.js」を公開しています。

via : fontSelector.js

テキストの書き換えを可能にするjavascript「inLineEdit.js 2」

オンライン上でテキストの変更が可能になればサイトの管理がしやすくなるでしょう。 またブログなどで閲覧者が投稿したコメントを閲覧者自身が書き換えたい時などにも効果的です。 justinmaierで公開しているテキスト変換script「inLineEdit.js 2」による上記のような課題を解決することができます。

via : inlineEdit Plugin

inLineEdit2

テキストを書き換え可能にするjavascript「inLineEdit Plugin」

テキストの書き換えを可能にするjavascript「inLineEdit.js 2」は複数行に渡る書き換えができないことや書き換えられる範囲がわかりづらいことが難点でした。 justinmaierがこれを解決するinLineEdit Pluginを提供しています。

via : inlineEdhit.js 2

mooEditInPlace.gif

高機能な文字書き換えjavascript「class.editInPlace.js」

WEB2.0と言われる昨今、サイト上で文字を書き換えられるケースが増えています。 class.editInPlace.jsはEditInPlaceと呼ばれる文字を書き換えられるjavascriptを公開しています。

via : class.editInPlace.js

growtext

テキストボックスを伸縮させるjavascript「resizeTextarea」

ディスプレイの表示領域は使用環境によって異なってきます。 そのため、限れられたスペースを有効活用することが求められます。 Eject MediaではmootoolsベースのresizeTextareaを公開し、テキストボックスの伸縮を可能にしています。

via : resizeTextarea

moodropshadow

テキストに影をつけるjavascript「text drop shodow」

文字や画像を強調したい時に影をつけることがあります。 画像はWeb上でもできましたが、テキストではできませんでした。 pr0digy.comでは、テキストに影を付けられるMootools text drop-shadowを公開しています。

via : text drop-shadow

mooNavBar

javascriptライブラリ「mootools」でリンクを目立たせる」

メニューなどリンクを張っているテキストは出来れば目立たせたいです。 CSSでa:hoverで変化を付け加えることが出来ますが、できればもう少しという欲張りな方へ。 javascriptライブラリ「mootools」でリンクを目立たせる方法を紹介します。

via : Sample Nav Bar

テキストや画像をアスキーアートにするJavaScript「MooAsciiArt 」

テキストや画像をアスキーアートにするJavaScript「MooAsciiArt 」

J久しぶりにmootoolsからの紹介です。 MooTools ASCII Artは、その名の通り、テキストや画像をアスキーアート化します。

via:MooTools ASCII Art

クールな動きで時間を表示するJavaScript「Learn how to Create a Retro Animated Flip-Down Clock」

クールな動きで時間を表示するJavaScript「Learn how to Create a Retro Animated Flip-Down Clock」

JavaScriptライブラリのmootoolsを使用して、時間をめくるような感じで表示します。 この動きはティザーサイトのカウントダウンに使えそうですね。

via:Learn how to Create a Retro Animated Flip-Down Clock - Nettuts+

mooCage

JavaScript「MooCage」でカウントダウンさせる

JavaScriptライブラリのmootoolsを利用して、カウントダウンをさせます。

via:MooCage

mookonami

JavaScriptライブラリmootoolsでもコナミコマンド「Konomi_Mootools」

以前紹介したjQueryでコナミコマンドをJavaScriptライブラリのmootoolsでも実現してみましょう。

via:Konomi_Mootools

mooavriBubble

要素に重力を与えられるJavaScript「AvriBubble」

WEBは平面的ですが、そこに重力を加えられると表現の幅が広がりそうです。 AvriBubble : a very ligth 2D engine based on Mootoolsは要素に重力のようなものを与えられます。

via : AvriBubble

mooExpandingBoxes

mootoolsで複数エレメントを操作する「Fx.Presets」

JavaScriptライブラリのmootoolsベースであるFx.Presetsを利用すると複数エレメントの動きを操作できます。 今回は動きが面白いExpanding Boxesを紹介します。

via : Fx.Presets

mooMocha

mootoolsでコードをシンタックスハイライトさせるJavaScript「Lighter.js」

サイト上でhtmlやjsなどを紹介する時に、わかりやすく表示できると見る人もうれしいでしょう。 Lighter.jsはJavaScriptライブラリmootoolsを利用してシンタックスハイライトを可能にします。

via : Lighter.js

mooMocha

クールなウィンドウを表示できるjavascript「Mocha」

ユーザーインターフェースは訪問者の印象を左右する重要な要素です。 MooTools Mocha UIを使用することでクールなウィンドウを表示できます。

via : MooTools Mocha UI

mooErastic

テーブルの表を伸縮させるjavascript「ElasticTable」

テーブルで多くの項目を作りたいけどスペースが・・・ という悩みは、このjavascriptで解消されそうです。 ElasticTableはテーブルで作成した各項目を自在に伸縮してくれます。

via : ElasticTable

mooSorter

既存のテーブルを簡単にソートさせるjavascript「Table-Sort」

テーブルで作成した表をソートさせるjavascriptは多くありますが、内部を少しいじらなければならないケースが多いです。 Table-Sortは、既存の仕組みでそのまま簡単にソートさせることができるjavascriptです。

via : Table-Sort

mooCSS

javascriptでCSSを操る「Dynamic CSS via JavaScript」

便利なのかわかりませんが、CSSをjavascriptで指定できるDynamic CSS via JavaScriptです。 javascriptなどの各プログラミング言語を使用してる人にとっては、ループや条件分岐できて便利なのかな。

via : Dynamic CSS via JavaScript

mooFlippy

クールにロールオーバーするjavascript「flippyMOO」

マウスをロールオーバーするとコンテンツが表示される方法は数多くあります。 しかし、flippyMOOのようにクールなのも少ないでしょう。

via : flippyMOO

カラーピッカー

色をHEX、RGB、HSBで表示するカラーピッカーjavascript「mooRainbow」

Webでの色の指定は16進法を意味するHEXで指定することになります。 しかしHEXはRGBなどと比較すると一般的ではなく、色の指定が難しいことがあります。 mooRainbowというサイトでは、色指定をHEXで簡単に行えるカラーピッカーと呼ばれるjavascriptを公開しています。

via : mooRainbow

mooColorPicker

色を選択するカラーピッカーjavascript「Mootools Colo(u)r picker」

フォームで色を指定させることがあれば、色を選択できるカラーピッカーが有効です。 視覚的に明度や色相を判別でき、感覚的なHEXでの色入力が可能です。 Mootools Colo(u)r pickerではmootoolsベースのカラーピッカーを公開しています。

via : Colo(u)r picker

mooDatePicker

日本語OKの日付選択javascript「PBBDatePicker」

フォームで日付を選択してもらう際に便利な日付選択javascriptデートピッカー デートピッカーを用いれば視覚的に年月はもちろん数年先の曜日も判明します。 PBBDatePickerでは、mootoolsベースのデートピッカーを公開しています。

via : PBBDatePicker

mooDatePicker2

カレンダー表示&日付選択させるjavascript「Fancy MooTools Date Picker」

申込フォームなどでは、よく日付を入力してもらうことがあります。 これを簡単にかつ奇麗なデザインで実現したFancy MooTools Date Pickerを紹介します。

via : Fancy MooTools Date Picker

mooTimelinef

タイムライン作成javascript「Timeline」

年表などを作成するとき時系列で並べると便利ですが、長くなりすぎるとページに収まりません。 そこでTimelineを使用すると、ある一部分のみを表示することができます。

via : Timeline

mooRoundedCorners

画像も角丸にするjavascript「roundedcorners」

今回はjavascriptライブラリ「mootools」で角丸を実現します。roundedcornersでは、画像も角丸にできるjavascriptを公開しています。*画像も使用しているので少し煩雑かもしれません。

via : roundedcorners

mooVRotatingMenu

mooVRotatingMenu

amazonライクにぐるぐる回る
moosocializer2.gif

mooSocialize

画面遷移せずにブックマークできるウィジェット
m_wysiwyg.gif

WysEditor

WYSIWYG
m_imagecrop

AJAX image crop

画像リサイズ
timespinner.gif

TimeSpinner

時間選択
uitab.gif

Mootools UI Tabs

タブメニュー
rating.gif

Rabid Ratings

投票
box.gif

multibox

LightBox形
tbsort.gif

mooTblSort

テーブルのドラッグ
dialog.gif

Dialog

ダイアログ
contextmenu.gif

Mootools UI menu

コンテキストメニュー
dropdown.gif

drop-down menu

ドロップダウンメニュー
newsticker.gif

Horizontal and Vertical News Tickers

ニュースティッカー
moosound.gif

MooSound

音楽再生
ddmenu.gif

ddmenu

コンテキストメニュー
minimalsort.gif

A sorting table

テーブルソート
upload.gif

FancyUpload

ファイルアップローダー
fisheye.gif

Fisheye

フィッシュアイメニュー
mootree.gif

mooTree2

ツリーメニュー
colorpicker.gif

Color Picker

カラーピッカー
box.gif

AcpBox

ウィンドウ
win2.gif

Moognify.js

ウィンドウ
cal2.gif

Calendar Component

カレンダー
tp.gif

Time Picker

タイムピッカー
month.gif

MooMonth

伸縮カレンダー
acco.gif

accordion

アコーディオン
windoo.gif

windoo

ウィンドウ
drada.gif

DrasticData

テーブルソート
window2.gif

window.Growl

ウィンドウ
tootip.gif

MooTips

ツールチップ
edit.gif

srcEditor

書き換え
wysi.gif

ownCMS WYSIWYG

WYSIWYG入力支援
edit2.gif

sLedit

高機能な書き換え
imagemenu.gif

Image Menu

画像伸縮メニュー
imgedit.gif

imageEditor

オンライン画像編集
fisheye2.gif

iFishEye

フィッシュアイメニュー
imago.gif

Imago

画像ギャラリー
moopix.gif

MooPiX

Flickr用ギャラリー
slide.gif

Slide Show

画像ギャラリー
gal.gif

SimpleViewGallery

画像ギャラリー
auto.gif

Autocomplete

オートコンプリート
slide2.gif

accordeon and effects

メニュー
round.gif

softrRounded

角丸
round.gif

Slide Effect

スライド
bird.gif

click the birds

画像伸縮メニュー