15 Must See MooTools Techniques
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! 😀 )
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
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
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
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
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
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
File Upload Examples and Demos
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
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
Slideshow Examples and Demos
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
Form Examples and Demos
FormCheck allows you to validate a form by performing different tests before submission. Demo here.
FormCheck
Table Examples
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
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
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
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
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
More info:
6 Helpful MooTools Video Tutorials
Comments are welcome!