Home > {{category.CategoryName}} > MooTools core
MooTools core JavaScript App

MooTools core

by MooTools

JavaScript Framework
Helps with: JavaScript
Similar to: Mojito App Web-Toolkit App jQuery OSK App JSON-js App More...
Source Type: Open
License Types:
Supported OS:
Languages: C Java Script

What is it all about?

MooTools is an object-Oriented JavaScript framework with compact and modular code. designed to Facilitate and assist JavaScript developers. used to create Web applications based on Ajax.

Key Features

* MooTools Allows you to write powerful and flexible code with its elegant, well documented, and coherent APIs. * MooTools code is extensively documented and easy to read, enabling you to extend the functionality to match your requirements. * MooTools libraries are released under the Open Source MIT license which gives you the possibility to use them and modify them in every circumstance.


Pricing

Yearly
Monthly
Lifetime
Free
Freemium
Trial With Card
Trial No Card
By Quote

Description

free - see site

Alternatives

View More Alternatives

View Less Alternatives

Product Analysis

JavaScript

Javascript frameworks and libraries

Mootools

Mootools

By Blezel Tajor | 8/1/2016 | Product Analysis |Beginners

MooTools stands for My Object-Oriented Tools. It is an object-oriented and lightweight javascript framework that was released under the MIT License. It is officially designed as OOP thus allowing all intermediate and advanced software engineers to create more powerful and flexible applications.

 

MooTools is impressive for being a compilation of javascript utilities. Its great features convinced some major websites use MooTools as their framework which was a great privilege to the MooTools community. It concentrates on making the entire javascript language less demanding to compose in and open up a significant part of javascript’s functionality thus making MooTools also standout among the most popular javascript libraries.

 

MooTools common key features are DOM Utilities, Animation, Event Handling, CSS3 Selectors and Ajax.



What is MooTools good for?

 

MooTools is recommended for both intermediate and advanced developers since its good object-oriented features help software engineers to compose large-scale applications with minimum effort and pressure. It presents a tool to develop the general functionality of javascript so that developers can get out of his programming ways. It also helps eliminates some of the frustration a programmer might have when writing a program using pure javascript. It is very useful in that it gives great flexibility over the web outline with the goal that a developer can accomplish what he needs to.

 

Here are some of MooTools’ advantages over native javascript:

  • DOM upgrades
      • Empowering software developers to effortlessly include, change, select, and delete DOM components. Storing and recovering data with element storage is also supported.
  • Provides a lot of built-in functionality
  • Browser compatibility
  • Object oriented programming
      • A good fit from an engineering perspective
  • Built-in functionality
      • Help saves time in developing the application
  • Closely aligned with how javascript works natively

Examples and Code Snippets

 

We will make a straightforward slideshow application using MooTools.

We can not deny the fact that adding animations can make a website attractive. For this example, we will actualize a slideshow which includes pictures.

 

If you need to create a slideshow without controls or events. This might help you.

 

window.addEvent('domready',function() {

/* settings */

     var showDuration = 3000;

     var container = $('slideshow-container');

     var images = container.getElements('img');

     var currentIndex = 0;

     var interval;

     /* opacity and fade */

     images.each(function(img,i){

     if(i > 0) {

        img.set('opacity',0);

}

});

/* worker */

var show = function() {

    images[currentIndex].fade('out');

    images[currentIndex = currentIndex < images.length - 1 ? currentIndex+1 : 0].fade('in');

};

/* start once the page is finished loading */

window.addEvent('load',function(){

interval = show.periodical(showDuration);

});

});

To give you more detail of each function we make :

 

window.addEvent('domready',function() {

/* settings */

      var showDuration = 3000;

      var container = $('slideshow-container');

      var images = container.getElements('img');

      var currentIndex = 0;

      var interval;

      /* opacity and fade */

      images.each(function(img,i){

      if(i > 0) {

         img.set('opacity',0);

      }

});

In this phase, we create and characterize the duration of our slideshow, we also get the container, slideshow things and set the opacity to 0.

 

/* worker */

var show = function() {

   images[currentIndex].fade('out');

   images[currentIndex = currentIndex < images.length - 1 ? currentIndex+1 : 0].fade('in');

};

At this point, we actually set that every time the picture/slide changed it should fade out.

 

/* start once the page is finished loading */

window.addEvent('load',function(){

      interval = show.periodical(showDuration);

});

The last code, coordinates the slideshow to start when the page has finished loading.

For another example, we’ll look at an example given on Wikipedia's polymorphism page:

var Animal = new Class({
   initialize: function(name) {
       this.name = name;
   }
});

var Cat = new Class({
   Extends: Animal,

   talk: function() {
       return 'Meow!';
   }
});

var Dog = new Class({
   Extends: Animal,

   talk: function() {
       return 'Arf! Arf!';
   }
});

var animals = {
   a: new Cat('Missy'),
   b: new Cat('Mr. Bojangles'),
   c: new Dog('Lassie')
};

Object.each(animals, function(animal) {
   alert(animal.name + ': ' + animal.talk());
});

// alerts the following:
//
// Missy: Meow!
// Mr. Bojangles: Meow!
// Lassie: Arf! Arf!

So simple right?

 

Conclusion

 

For beginners who want to learn a javascript framework or library, the best way to learn it is to start with the easiest one. Unlike other javascript libraries, MooTools is more complex and therefore it is more difficult to learn. It is not recommended for beginners to learn MooTools before gaining some experience, but if you are a serious mid to high level programmer, then MooTools won’t be a problem for you. Hope going through these examples gives you motivation to give MooTools a try.

By Blezel Tajor | 8/1/2016 | Product Analysis

{{CommentsModel.TotalCount}} Comments

Your Comment

{{CommentsModel.Message}}

Top DiscoverSDK Experts

User photo
3355
Ashton Torrence
Web and Windows developer
GUI | Web and 11 more
View Profile
User photo
2340
Meir Rabinovich
Real time and embedded developer
Hardware and RT | General Libraries and 5 more
View Profile
User photo
1540
Nathan Gordon
Full Stack developer
Web | JavaScript and 1 more
View Profile
User photo
1490
Ronan McCarthy
Cross-Platform & Web developer.
Web | Mobile and 6 more
View Profile
Show All

Interested in becoming a DiscoverSDK Expert? Learn more

X

Compare Products

Select up to three two products to compare by clicking on the compare icon () of each product.

{{compareToolModel.Error}}

Now comparing:

{{product.ProductName | createSubstring:25}} X
Compare Now