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
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
<html>
<head>
...
<script type="text/javascript" src="mootools.js"></script>
...
</head>
...
</html>
As soon as the DOM is ready mootools fires ‘domready’ event, and that means “it’s time to run our code”
window.addEvent('domready', function() {
...
});
To get an element with id=’someID’ use
$('someID')
To get collection of elements, for example links inside some div, use
$$('#someID a'))
If you want to execute your function on some event, for example on click, use
$('someID').addEvent('click', function(e) {})
That’s all you need to know to start using mootools
Show/hide panel
Demo
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.
window.addEvent('domready', function() {
var myHeight = new Fx.Slide('top').hide();
$$('#top2 a').addEvent('click', function(e) {
e.stop();
myHeight.toggle();
});
});
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
Demo
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.
window.addEvent('domready', function() {
var mySmoothScroll = new SmoothScroll();
});
Delete some block from webpage
Demo
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.
window.addEvent('domready', function() {
$$('a.delete').addEvent('click', function(e) {
e.stop()
var p = this.getParent();
p.fade(0);
(function(){ p.destroy(); }).delay(1000);
});
});
Add/remove field(s) to form
Demo
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
Block that we will clone
<div id="uploadBlock">
<label for="upload">
File to upload:
<br />
</label>
<input name="upload[]"/>
<br />
</div>
We mark block we will clone with id=”uploadBlock”
window.addEvent('domready', function() {
$('uploadForm').getElement('input[name=plus]').addEvent('click', function(){
var clone = $('uploadBlock').clone().injectAfter('uploadBlock');
});
$('uploadForm').getElement('input[name=minus]').addEvent('click', function(){
if ( $('uploadForm').getElements('input[name^=upload]').length == 1 )
return false
else
$('uploadBlock').getNext().destroy();
});
});
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
Demo
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.
window.addEvent('domready', function() {
var tip_img = new Tips($$('.img'));
var tip_link = new Tips($$('.link'), {
className: 'custom'
});
var tip_link_fixed = new Tips($$('.link_fixed'), {
className: 'custom',
fixed:true
});
});
Accordion
Demo
Accordion contain sections, each of them has such structure:
<h3 class="title">Title</h3> <div class="content"> Content </div>
window.addEvent('domready', function() {
var myAccordion = new Accordion($('accordion'), 'h3.title', 'div.content');
});
Morph
Demo
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.
window.addEvent('domready', function() {
$('morphForm').addEvent('submit', function(e) {
e.stop();
if ( $('username').get('value') == 'elpaso' && $('password').get('value') == 'password' )
$('loginMsg').set('text','Successful login').morph('.success');
else
$('loginMsg').set('text','Wrong Data').morph('.error');
});
});
Make all links external
Demo
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
window.addEvent('domready', function() {
$$('a').each( function(item, index){
if ( !( (/^http://(?:www.)?cult-f.net/i).test(item.href) ) )
item.setProperties({
rel: 'nofollow',
target: '_blank'
});
});
});
Image gallery
Demo
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
window.addEvent('domready', function() {
var images = [];
var img_paths = ['img/img1.jpg','img/img2.jpg','img/img3.jpg','img/img4.jpg','img/img5.jpg'];
var loader = new Asset.images(img_paths, {
onProgress: function(counter,index) {
$('frame').set('html','loaded '+ (counter + 1) * (100 / img_paths.length) + '%');
},
onComplete: function() {
//fill our img array
img_paths.each(function(im) {
images[im] = new Element('img', {
'src': im,
'styles': {
'visibility': 'hidden',
'opacity': '0',
'border': 'none'
}
});
});
//assign click events
$$('#photos a').addEvent('click', function(e) {
e.stop();
$('frame').empty();
images[this.rel].set('opacity','0').inject($('frame')).fade(1);
});
//show first img in frame
$('frame').empty();
images[ img_paths[0] ].set('opacity','0').inject($('frame')).fade(1);
}
});
});
