1 / 16

MooTools ________________________________ Aakash Juneja Truc Pham

MooTools ________________________________ Aakash Juneja Truc Pham. Introduction. MooTools is a lightweight abstraction layer between the browser and the code was authorized and released in September 2006 by Valerio Proietti. MooTools’ Components. Core : A collection of utility functions

gemma-cantu
Download Presentation

MooTools ________________________________ Aakash Juneja Truc Pham

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. MooTools ________________________________ Aakash Juneja Truc Pham

  2. Introduction MooTools • is a lightweight abstraction layer between the browser and the code • was authorized and released in September 2006 by Valerio Proietti.

  3. MooTools’ Components • Core: A collection of utility functions • More: An official collection of add-ons • Class: The base library for Class object • Natives: A collection of JavaScript Native Object enhancements. • Element: enhancements to the HTML Element object. • Fx: An advanced effects-API to animate page elements. • Request: Includes XHR interface, Cookie, JSON, and • Window: Provides a cross-browser interface to client-specific information.

  4. Getting started Need to know Javascript • Elements var myElement = new Element(“div”); myElement.set(“html”, “I am new”); myElement.setStyle(“border”, “1px solid #519CE8); $(“myBox”).grab(myElement); • Adding text to elements is easy too $(“myBox”).set(“html”, “Hi there, how are you?”);

  5. Elements (continued) • $(“someElementID”); • $(“anyElement”).getElement(“any css selector”); Examples: $(“anyElement”).getElement(“span”); $(“anyElement”).getElement(“a”); $(“anyElement”).getElement(“input[type=text]”);

  6. The $function • //classical method for getting an element var myElement = document.getElementByID(“myElement”); • //MooTools’ way: var myBetterElement = $(“myElement”); • //this returns reference as an Array of all tags on the page var ps = $$(“p”);

  7. Set Properties • //setting properties is easy in MooTools $(“myElement”).setProperty(“title”, “I am your element”); • //removing works almost the same way $(“myElement”).removeProperty(“title”); • //getting values is easy $(“myElement”).getProperty(“id”); • //similar methods setProperties, removeProperties, getProperties

  8. The core of MooTools • MooTools stands for My Object Oriented Tools. • Emphasizes modularity and code reuse with MooTools Class object. • Class is an object of key/value pairs that can contain either properties or methods.

  9. Inheritance 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'; } });

  10. Inheritance 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!

  11. A SlideShow app using MooTools var SimpleSlideShowDemo = new Class({ Implements: [Options, Events],         options: {                 slides: [],                 startIndex: 0,                 wrap: true         },         initialize: function(options){                 this.setOptions(options);                 this.addSlides(this.options.slides);                 if(this.slides.length) this.showSlide(this.options.startIndex);         },     …………

  12. A SlideShow app using MooTools addSlides: function(slides){                 $$(slides).each(function(slide){                         this.slides.include($(slide)); slide.addEvent('click', this.cycleForward.bind(this)); ………… cycleForward: function(){   if($chk(this.now) && this.now < this.slides.length-1) this.showSlide(this.now+1);                 else if ((this.now) && this.options.wrap) this.showSlide(0); else if(!$defined(this.now)) this.showSlide(this.options.startIndex);         },

  13. A SlideShow app using MooTools showSlide: function(iToShow){                 if (this.fading) return;                 var now = this.now;                             var currentSlide = this.slides[now];                 var slide = this.slides[iToShow];                 var fadeIn = function (s){                         this.fading = true;                         s.setStyles({                                 display:'block',                                 visibility: 'visible',                                 opacity: 0                         });                         s.get('tween').start('opacity', 1).chain(function(){                                 this.fading = false; this.fireEvent('onShow', [slide, iToShow]); ……………..

  14. A SlideShow app using MooTools window.addEvent('domready', function(){         new SimpleSlideShowDemo({                 slides: $$('div.slide')         });         new SimpleImageSlideShowDemo({                 imgUrls: [                         "http://download.com/i/dl/media/dlimage/10/87/78/108778_medium.jpeg",                         "http://download.com/i/dl/media/dlimage/10/87/79/108779_medium.jpeg",                         "http://download.com/i/dl/media/dlimage/10/87/81/108781_medium.jpeg"                 ],                 container: $('imgContainer')         }); }); http://mootorial.com/wiki/mootorial/09-howtowriteamootoolsclass window.addEvent('domready', function(){         new SimpleSlideShowDemo({                 slides: $$('div.slide')         });         new SimpleImageSlideShowDemo({                 imgUrls: [                         "http://download.com/i/dl/media/dlimage/10/87/78/108778_medium.jpeg",                         "http://download.com/i/dl/media/dlimage/10/87/79/108779_medium.jpeg",                         "http://download.com/i/dl/media/dlimage/10/87/81/108781_medium.jpeg"                 ],                 container: $('imgContainer')         }); }); http://mootorial.com/wiki/mootorial/09-howtowriteamootoolsclass

  15. Why choose MooTools? • MooTools can do all jQuery (sorry for picking on you) can do. Frameworks Mottos jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API. • MooTools focuses on inheritance model. • MooTools encourages code reuse and modular designs

  16. Some of the best MooTools examples http://www.electricprism.com/aeron/slideshow/ http://digitarald.de/project/remooz/1-0/showcase/flickr-big/ http://www.efectorelativo.net/laboratory/noobSlide/ http://www.nogray.com/time_picker.php.

More Related