MooTools

15 Must See MooTools Techniques

Molto spesso ci siamo occupati di risorse e tutorial su jQuery ma non dimentichiamo che non esiste solo jQuery, oggi infatti ci occupiamo di MooTools mostrandovi 15 tecniche che vi stupiranno per le loro funzioni o per il loro impatto estetico sul vostro sito o su quello dei vostri clienti!

Tool Tip Examples

Ultra-versatile slider for websites (Made in Italy, we like it! :D )

In this tutorial it’s explained a simple step-by-step way to implement an ultra versatile slider with horizontal scrolling and animated effects using MooTools. Live preview

Ultra versatile slider for websites

Ultra versatile slider for websites

Duplicate the jQuery home page tool tips using MooTools

The jQuery homepage has a pretty suave tooltip-like effect. Here’s how to accomplish this same effect using MooTools. View Demo

Duplicate the jQuery Homepage Tooltips Using MooTools Example

Duplicate the jQuery Homepage Tooltips Using MooTools Example

Slider Examples and Demos

MooTools CSS-styled scroll bar

How to create a css styled scrollbar from the Mootools (version 1.2b2) Slider class. This is light version of a scrollbar class for Mootools. If you only need one or two bars, try this. The example page shows three div elements with a styled horizontal and/or vertical scrollbars.

MooTools CSS-styled scroll bar

MooTools CSS-styled scroll bar

A better Pagination with MooTools

It is only a little script that can turn your ugly looking numbers into a nice looking Slider and quite frankly, MooTools does most of the work for us already. See the Example

A better Pagination with MooTools

A better Pagination with MooTools

MooTools Slider with two knobs

Mootools Slider With Two Knobs (Double Pinned Slider) with Range Indicator. You can very easily change the look and feel of the  range indicator, slider knob, the slider track by modifying the slider.css! View Version 2.2 Demo

MooTools Slider with two knobs

MooTools Slider with two knobs

Navigation Examples

Create a Simple, Powerful Product Highlighter with MooTools

How to create a flexible tool for highlighting your sites products or services using the MooTools javascript framework. Live demo here.

Create a Simple, Powerful Product Highlighter with MooTools

Create a Simple, Powerful Product Highlighter with MooTools

File Upload Examples and Demos

Fancy Upload

FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. Live Demo

FancyUpload

FancyUpload

Multiple file uploader

Script for creating a prettier way to include multiple file elements on a page. Creates a form in which users can upload more than one file using MooTools. Demo here.

Multiple file uploader

Multiple file uploader

Slideshow Examples and Demos

noobSlide

noobSlide is a lightweight “class” written with the mootools library with which you can build “slides” from simple to complex, clear that to get the maximum benefit you need to learn how to work with mootools.

noobSlide

noobSlide

Form Examples and Demos

Form.Check

FormCheck  allows you to validate a form by performing different tests before submission. Demo here.

FormCheck

FormCheck

Table Examples

TableGear

TableGear is a software package for working with data on the web. It is designed get your data into a web page, and let you work with it quickly and easily, the way you would in powerful desktop applications like Excel. View the Demo

TableGear

TableGear

Others

Morph effect on mouseenter/mouseleave

In this tutorial, we will see how to add some amazing effects to an unordered list on mouseover with the Element Method: morph and to make the whole list item region clickable with Mootools 1.2. The goal is to take a boring unordered list and to turn it into something fun to click.

Morph Effect on mouseenter/mouseleave with Mootools 1.2

Morph Effect on mouseenter/mouseleave with Mootools 1.2

Animated AJAX Record Deletion Using MooTools

You click the delete link, the menu item animates red, and the item disappears. Here’s how to achieve that functionality with MooTools javascript. Demo

Record Deletion Using MooTools

Record Deletion Using MooTools

AJAX username availability checker using MooTools

Why make the user submit their form if you can just use Ajax to let them know if it’s available right away? Here’s how you can implement a username available checker using MooTools 1.2. Demo

Username Availability Checker Using MooTools

Username Availability Checker Using MooTools

AJAX page loads using MooTools Fx.Explode

When you click on any of the designated Fx.Explode elements, the elements “explode” off of the screen. Click again and they magically reappear. Demo

Page load effect using MooTools

Page load effect using MooTools

More info:

MooTools website

WebAir Tutorial

6 Helpful MooTools Video Tutorials

50 Excellent AJAX Tutorials

Comments are welcome!