MooTools basics - useful tips

.set()

$('content').set('text','some text'); /*text, html*/

.get()

$('content').get('text');

.getElement()

$('body_wrap').getElement('a');
$('body_wrap').getElement('#special_anchor');
$('body_wrap').getElement('.special_anchor_class'); 

.getElements()

$('body_wrap').getElements('a'); 
$('body_wrap').getElements('.special_anchor_class'); 

.setStyle()

$('content').setStyle('background-color','#000');
$('content').setStyle('color','#fff');          

.setStyles()

$('content').setStyles({'background-color':'#000','color':'#fff'});

.getStyle()

$('content').getStyle('background-color');  

.getStyles()

$('content').getStyles('background-color','color');  

new Element - Image

var images = 'image.jpg';
new Element('img',{ src:images, width:70, height:70 }).inject($('box'));

var my_img = new Element('img',{'src':'image.jpg','style':'width:200px;border:3px solid red'});

new Swiff - Flash

var obj = new Swiff('flash.swf', {
	width:  100, 
	height: 100, 
	container: $('flash_div'),
	params: {
		wmode: 'opaque',
		bgcolor: '#ff3300',
		menu:'false'
    }
});  

Click href link

<a class='click' href='#'>link</a>  

$$('.click').addEvents({'click': function(e){ /* dblclick, mouseenter, mouseleave, mouseover */
new Event(e).stop();
alert('OK');
}}); 

Creating an new anchor with an Object

var myAnchor = new Element('a', {
    href: 'http://mootools.net',
    class: 'myClass',
    html: 'Click me!',
    text :'text'
    styles: {
        'display': 'block',
        'border': '1px solid black',
        'background-image':'url(image.png)',
        'background-position':'100px 0'
        
    },
    events: {
        click: function(){
            alert('clicked');
    },
        mouseover: function(){
            alert('mouseovered');
        }
    }
});

var href = this.getElement('a').href;

window.addEvent

window.addEvent('domready', function(){fun();}); /* domready, resize, load, mousewheel, scroll */

String method: toInt

'4em'.toInt(); // returns 4
'10px'.toInt(); // returns 10

Events

var textArea = $('content');
	textArea.addEvents({
		'keyup': function(){
			console.log('keyup');
		},
			
		'keydown': function(){
			console.log('keydown');
		},
		
		'blur': function(){
			console.log('blur');
		}
	});

Events class

this.box.addEvent('click',this.show.bind(this,a));

this.box.addEvents({'click':function(){this.show(a);}.bind(this)});

this.li.each(function(el,i){
/* code */
},this);

Delay

(function() {$$('.alert').fade('out');}).delay(2000);