MooTools Tutorial for Designers-..:: Programmer Kingdom ::..

This article inspired by "jQuery Tutorials for Designers. It contains a couple of useful examples for beginners. All examples working with current mootools release – MooTools v1.2

MooTools Tutorial for Designers

1. Basics

- mootools.net– official mootools site
- docs.mootools.net– detailed documentation
- mootools.net/download– here you can download latest version of mootools

Ok, i assume you already download js source. Now you need to add it to your pages. Best place to add it is head tag

	
			1
			<html>
		
			2
			  <head>
		
			3
			    ...
		
			4
			    <script type="text/javascript" src="mootools.js"></script>
		
			5
			    ...
		
			6
			  </head>
		
			7
			  ...
		
			8
			</html>

As soon as the DOM is ready mootools fires ‘domready’ event, and that means “it’s time to run our code”

	
			1
			window.addEvent('domready', function() {
		
			2
			...
		
			3
			});

1	$('someID').addEvent('click', function(e) {})

Show/hide panel
We have 2 divs – one with id=”top” – contain panel, second – with id=”top2″ – contain link that toggle panel.
Panel will be toggled with help of “Slide” effect.

	
			1
			window.addEvent('domready', function() {
		
			2
			    var myHeight = new Fx.Slide('top').hide();
		
			3
			    $$('#top2 a').addEvent('click', function(e) {
		
			4
			        e.stop();
		
			5
			        myHeight.toggle();
		
			6
			    });
		
			7
			});

e.stop(); – use it if you want to prevent default event behaviour, we use it to make link only open/close panel and nothing else

Smooth scroll to some place on page
We have many paragraphs on page and some sort of content table in the top. By clicking on link you scroll page to corresponding paragraph. Code to do it is very simple.

	
			1
			window.addEvent('domready', function() {
		
			2
			    var mySmoothScroll = new SmoothScroll();
		
			3
			});

Delete some block from webpage
To delete some block ( p, div, etc ) we add a link with class=”delete” inside it. When you click on link block will be faded and then removed from DOM after 1 sec delay.

	
			1
			window.addEvent('domready', function() {
		
			2
			    $$('a.delete').addEvent('click', function(e) {
		
			3
			        e.stop()
		
			4
			        var p = this.getParent();
		
			5
			        p.fade(0);
		
			6
			        (function(){ p.destroy(); }).delay(1000);
		
			7
			    });
		
			8
			});

Add/remove field(s) to form
Imagine you have form to upload files. You don’t know how many files you wish to upload, so you want to have ability to add/remove additional fields.
To accomplish this we add two buttons
- button with name “plus” – to add field
- button with name “minus” – to remove field

	
			1
			<div id="uploadBlock">
		
			2
			    <label for="upload">
		
			3
			      File to upload:
		
			4
			      <br />
		
			5
			    </label>
		
			6
			    <input name="upload[]"/>
		
			7
			    <br />
		
			8
			</div>

	
			01
			window.addEvent('domready', function() {
		
			02
			    $('uploadForm').getElement('input[name=plus]').addEvent('click', function(){
		
			03
			        var clone = $('uploadBlock').clone().injectAfter('uploadBlock');
		
			04
			    });
		
			05
			    $('uploadForm').getElement('input[name=minus]').addEvent('click', function(){
		
			06
			        if ( $('uploadForm').getElements('input[name^=upload]').length == 1 )
		
			07
			            return false
		
			08
			        else
		
			09
			            $('uploadBlock').getNext().destroy();
		
			10
			    });
		
			11
			});

When you click on ‘+’, block with input is cloned and injected after first input
After clicking on ‘-’ we check if we have more than one input and delete one input

Tips
Tips is nice solutions when you want to show additional info about some element, but you cant find place for it on page.
Tip is showed on rollover event. Mootools has native plug-in for Tips. Here you can see standard example, example using custom css and example with fixed tip.

	
			01
			window.addEvent('domready', function() {
		
			02
			    var tip_img = new Tips($$('.img'));
		
			03
			    var tip_link = new Tips($$('.link'), {
		
			04
			        className: 'custom'
		
			05
			    });
		
			06
			    var tip_link_fixed = new Tips($$('.link_fixed'), {
		
			07
			        className: 'custom',
		
			08
			        fixed:true
		
			09
			    });
		
			10
			});

	
			1
			<h3 class="title">Title</h3>
		
			2
			<div class="content">
		
			3
			    Content
		
			4
			</div>

	
			1
			window.addEvent('domready', function() {
		
			2
			    var myAccordion = new Accordion($('accordion'), 'h3.title', 'div.content');
		
			3
			});

Morph
Morph is one of Effects. It allows to transition any number of CSS properties for an element.
You can specify css properties in class and pass it to morph function.

	
			1
			window.addEvent('domready', function() {
		
			2
			    $('morphForm').addEvent('submit', function(e) {
		
			3
			        e.stop();
		
			4
			        if ( $('username').get('value') == 'elpaso' &amp;&amp; $('password').get('value') == 'password' )
		
			5
			            $('loginMsg').set('text','Successful login').morph('.success');
		
			6
			        else
		
			7
			            $('loginMsg').set('text','Wrong Data').morph('.error');
		
			8
			    });
		
			9
			});

Make all links external
Links on page can be internal ( they linked to some page on your site ) or external ( go away from your site ). In this example we add “rel=’nofollow’” to all external links and make them open in new window

	
			1
			window.addEvent('domready', function() {
		
			2
			    $$('a').each( function(item, index){
		
			3
			        if ( !( (/^http://(?:www.)?cult-f.net/i).test(item.href) ) )
		
			4
			            item.setProperties({
		
			5
			                rel: 'nofollow',
		
			6
			                target: '_blank'
		
			7
			            });
		
			8
			    });
		
			9
			});

Image gallery
We have two divs – ‘frame’ – to which we load big photo & ‘photos’ – contain small previews.
First we load images using Asset plugin, you can see progress in frame where big photo will appear
After all loaded, we assign click events to thumbs and show first photo