Mootools 1.0+ Plugins, Examples, Tutorials & Demos List

Tutorials & Sample Codes / Tools / Demos & Sites

Sortable Elements

SlideShow & Photo Gallery

Rounded Corners

Lightbox / ModalBox

Drug & Drop / Slider

Editing

Imaging

Menu

Form Validater

Others

ToolTip

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}
});

.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;
    }

Accordion

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

<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>

Table Color Rows

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

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

.rows {background: #ccc;}

他リンクサイト / Other Link Sites

• Mootools Link List

更新履歴 / Changelog

2007.05.26

Others に FancyUpload, HistoryManager, Autocompleter, Demos に iScroll, Sites に DRSI を追加

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