Mootools 1.0+ Plugins, Examples, Tutorials & Demos List

Mootools version1.0以降のものを使ったプラグインとごくごく簡単なサンプルのリスト。moo.fxやversion1.0以前で動くものは除外してます。(一部除く)
tracやforumを常に追っている方にはあまり有用では無いかも。

項目をクリックすれば表示されます。コメントなどは下の記事へ。

* 勉強も兼ねているので、エフェクトがちょっと鬱陶しいかもしれませんがご容赦ください。更新履歴 (Changelog) は一番下にあります。
リンクをクリックする際は、新しくタブで開くことをオススメします。

Font Size:

References / Articles

References

Articles

Tutorials & Sample Codes / Tools / Demos & Sites

その他のチュートリアルとかサンプルコードとかデモなどは一応下にリストしておきます。

Tutorials & Sample Codes

Tools

Demos

Sites

to Top

Sortable Elements

Please Refer to these Sites.

Table Element

List Element

to Top

SlideShow & Photo Gallery

Please Refer to these Sites.

to Top

Rounded Corners

Please Refer to these Sites.

to Top

Lightbox / ModalBox

Please Refer to these Sites.

to Top

Drug & Drop / Slider

Please Refer to these Sites.

to Top

Editing

Please Refer to these Sites.

to Top

Imaging

Please Refer to these Sites.

to Top

Menu

Please Refer to these Sites.

to Top

Form / Form Validater

Please Refer to these Sites.

to Top

Calendar / Date Picker

Please Refer to these Sites.

Others

Please Refer to these Sites.

to Top

ToolTip

Documentation::Tips.js

Demo

HTML, CSS

Code

mootools:

  • Core: Moo, Utility
  • Native: Array, String, Function, Element, Event
  • Addons: Common
  • Effects: Fx.Base, Fx.CSS, Fx.Style
  • Plugins: Tips

Javascript:

var as = [];
$$('.tips a, .tip').each(function(a){
  if (a.getAttribute('title')) as.push(a);
});

new Tips(as, {
  maxTitleChars: 25,
  onShow: function(tip){
    tip.setStyle('opacity', '0.8');
  },
  onHide: function(tip){
    tip.setStyle('visibility', 'hidden');
  },
  offsets: {'x': -10, 'y': 15}
});

CSS:

.tool-tip {
  width: 200px;
  color: #eee;
  text-align: center;
  overflow: hidden;
  }
  .tool-tip .tool-title {
    font-size: 11px;
    font-weight: 900;
    margin: 0;
    padding: 10px 10px 0;
    background: #222;
    }
  .tool-tip .tool-text {
    margin: 0;
    padding: 10px;
    font-size: 11px;
    background: #222;
    }

to Top

Accordion

Documentation::Accordion.js

Demo

First Toggle

This is First Content

Second Toggle

This is Second Content

Third Toggle

This is Third Content

Menu1 Toggle

Menu2 Toggle

Code

mootools:

  • Core: Moo, Utility
  • Native: Array, String, Function, Element
  • Addons: Common
  • Effects: Fx.Base, Fx.CSS, Fx.Elements (Optional: Fx.Transitions)
  • Plugins: Accordion

Javascript:

var demoBox = $$('.toggle');
var demoBoxOpen = $$('.toggler');
var demoAccordion = new Accordion(
  demoBox, demoBoxOpen, {
    duration: 500,
    opacity: false,
    alwaysHide: true
  }
);

(X)HTML:

<h4 class="toggle">First Toggle</h4>
<div class="toggler"><p>This is First Content</p></div>
<h4 class="toggle">Second Toggle</h4>
<div class="toggler"><p>This is Second Content</p></div>
<h4 class="toggle">Third Toggle</h4>
<div class="toggler"><p>This is Third Content</p></div>

<h4 class="menu toggle">Menu1 Toggle</h4>
<ul class="menu toggler">
<li><a href="./" title="....">....</a></li>
<li><a href="./" title="....">....</a></li>
<li><a href="./" title="....">....</a></li>
</ul>
<h4 class="menu toggle">Menu2 Toggle</h4>
<ul class="menu toggler">
<li><a href="./" title="....">....</a></li>
<li><a href="./" title="....">....</a></li>
<li><a href="./" title="....">....</a></li>
</ul>

to Top

Table Color Rows / Zebra Tables

Demo

 ------   ------ 
 ------   ------ 
 ------   ------ 
 ------   ------ 
 ------   ------ 
 ------   ------ 
 ------   ------ 
 ------   ------ 

Code

mootools:

  • Core: Moo, Utility
  • Native: Array, String, Function, Element

Javascript:

var rowTr = $$('.demo table tr');
var l = 0;

for (var i = 0; i < rowTr.length; i++) {
  if (l%2) {
    rowTr[i].addClass('rows');
  }
  l++;
}

CSS:

.rows {background: #ccc;}

to Top

他リンクサイト / Other Link Sites

更新履歴 / Changelog

2007.09.10
Sites に Chilia, Imaging に Pamoorama, Menu に mooZoomMenu, Others に heySilver, MooPanes, Shady, Moostick, AutoAccordion を追加. FancyForm, FormCheck2, mediabox, Splitter for MooTools の日本語記事を追加
2007.09.01
SlideShow & Photo Gallery に mootools gallery with XML parser, Editing に class.editInPlace.js, Menu に contextMenoo, Form / Form Validater に FancyForm, mooMask, Others に Progress Bar for Mootools, Fx.CashRegister, Fx.Marquee, IconMenu, MooScroller を追加. fontSelector.js, MooTabs, mootools gallery with XML parser, FancyForm の日本語記事を追加
2007.08.26
Menu に PearMenu, Others に MooTips を追加. Grow a textarea, fontSize, Hints.js の日本語記事を追加
2007.08.19
Lightbox / ModalBox に dm_moviebox.js, Editing に EditInPlace(EIP), Others に moopop, dm_popelement.js を追加. Mootools text dropshadow の日本語記事を追加
2007.08.12
Demos に regextastic, Selecteur, Scrollbar, Imaging に IIPImage, Panorama.js, SlideShow & Photo Gallery に Joomlicious Mootools SlideShow, Menu に PBB Dock, Editing に Editable Text, Form / Form Validater に Mootools Form Hints, validate.js, Others に mooTimer, mooItems, Visual Preloader, mootools shadows, JibberBook, XRegExp を追加. 今更ですが References / Articles の項目を追加し、いくつかのリファレンスと記事を追加. Articles は日本語の紹介記事を中心に、単体のプラグイン記事は該当項目に追加します
2007.08.09
Demos に Mootools Slide Effect, Fx.CSS.Clip - Test, mooPager, Simple menu, SlideShow & Photo Gallery に MooPix, Editing に ownCMS WYSIWYG Editor. Others に Mootools text dropshadow, Brooser, Multiple file uploader(Mootools version), Splitter for MooTools, SimpleSlide, flippyMOO を追加. mooSlide, fValidator, iCarousel, Sexy Sliding Side Bar 2つ, inlineEdit Plugin, inlineEdit.js 2 の日本語記事を追加
2007.08.08
Demos に Countdown.js, Table-Sort, Sliding Tabs, Sites に Mutiny Web Design, mini u2b, Darcy's - preview version, Rounded Corners に softrRounded, Lightbox / ModalBox に Mediabox, Drug & Drop / Slider に Slider.Range, Editing に Edit in Place, Form / Form Validator に FormCheck2, Compact and Accessible Forms, Focus.js, SimpleCheck.js, Calendar / Date Picker に softrCalendar, Fancy MooTools Date Picker, Date Picker vs.02, MooCal, Mootools DatePicker lite, PBBDatePicker, Calendar for mootools, Others に iTable.js, MooStripes.js, Cross browser marquee, PBB AcpBox を追加.
Smoothbox, Window.Growl 2.0, Packito MooTools v1.1, mooRainbow の日本語記事を追加. Demos の mooTree2 を Menu に移動. Form Validator を Form / Form Validator に変更し、フォーム関連の物を移動. 新しく Calendar / Date Picker の項目を作成し、関連項目を移動.
2007.08.06
Tools に SlickSpeed Selectors Test, mootools 1.1 - cheat sheet, Demos に SmoothGallery + Slightbox Extension demo, Sites に Sabrefox.com, Technoskop, Intabill, Sortable Elements に datagrid.js, Lightbox / ModalBox に mooSlide, ReMooz, Imaging に Thumb Generator, Menu に Simple Tabs, Form Validator に Form Validator(Luciano Amodio), Others に Test custom Form Elements, Window.Growl 2.0, Hints.js, DOM.js, Calendar.js を追加. Menu の Mootabs のデモを4つ, Fancy Menu の日本語記事を2つ, Others の Windoo の日本語記事を追加
2007.05.26
Others に FancyUpload, HistoryManager, Autocompleter, Demos に iScroll, Sites に DRSI を追加. fValidator の日本語記事を追加
2007.05.23
Form Validator に fValidator, Others にMooRemote, mooCanvas, Sites に d/vision, Suzuki GB Motorcycles/ATVs を追加
2007.05.19
Others に Simple Window class, Demos に Blue Diamond, Sites に Hotel Oxford, PR Design, Magnus Ottosson Photos を追加
2007.05.13
Editing に Grow a textarea, Demos に Vanthia, TipsX3 playground, Sites に Oons ambacht を追加. Tutorials & Sample Codes / Demos & Sites の下に Tools の項目を作って Packito MooTools v1.1 を追加
2007.05.11
Tutorials & Sample Codes に free Video Tutorials , Editing に inlineEdit.js 2, Others に iCarousel を追加
2007.05.09
mootools version1.1 がリリースされましたので、サイト名を少し変更しました. Tutorials & Sample Codes に mootools demos(official), Sites に Leno 'n Lab, Patrick Yan を追加
2007.05.06
Menu に submenu.js, Sexy Sliding Side Bar, Sites に QUERIDODESIGN, ComplementaryDuo を追加
2007.05.02
SlideShow & Photo Gallery に Imago, Imaging に Slide Puzzle, Demos に Autocompleter, Autocomplete, wyzzie, Sites に WhistlerBase を追加. Table Color Rows の Code 部分が間違っていたので修正
2007.04.25
Editing に inlineEdit Plugin +save, Others に Drag.Multi, Drag.Resize, and Windoo Mootool Extensions, Demos に mooEdit v 1.0, shoppingCart, webBox, Sites に graffiti, Spiga.com.mx を追加
2007.04.20
Others に fontSelector.js, Demos に Mootools examples(Joablen), croppr を追加
2007.04.14
Menu に Kwick Sliding Menu, Demos に Mootools Sortable List Example と Mootools Sortable List Example, Sites に G4Designs を追加
2007.04.11
SlideShow & Photo Gallery に RokSlideshow, Demos に mootree 2 のサンプル5つ, Sites に Ten Ships Jungle Gym を追加
2007.04.09
Lightbox / ModalBox に blackcube 2, Others に Fx.Extensions と y-webmailer, Sites に Step Muther を追加. 更新通知用 Feed の配信を開始
2007.04.05
SlideShow & Photo Gallery に Slide Show, Demos に mooTree 2 を追加. 更新履歴の上に 他リンクサイト / Other Link Sites の項目を追加
2007.04.03
Others に JavaScript Color Picker, Editing に PostEditor の日本語記事を追加
2007.04.02
Others に Super-simple Mootools-Datepicker と mooRainbow を追加
2007.03.28
Lightbox に Videobox と Google Maps Lightbox, Others に Moodows, SlideShow & Photo Gallery に SimpleView Gallery, Demos に Color Picker と Accordion(.mac), Sites に notemyplan を追加. Modalbox を Lightbox に統合
2007.03.23
Menu に MooTabs, Others に Mootools Ext Adapter, Demos にFisheye Menuを追加
2007.03.20
Menu に iFishEye, Demos にいくつか追加
2007.03.19
Lightbox に Smoothbox, Tutorials~ に Sites の項目を追加
2007.03.16
Menu とDemos にいくつか追加
2007.03.14
Demos にいくつか追加
2007.03.11
初版

to Top