Learning Mootools
When I needed to finish your work as soon as possible, jQuery was there for me, especially with my 'very' limited javascript knowledge :)
However, Mootools has always been "the javascript framework I wanted to learn". And recently I've been trying to learn more about it. Trying it out for this site was the most logical for me to learn faster and after a long long day, I tried successfully to convert the 'easy' javascript implementations on my blog to use Mootools instead of jQuery.
Seriously, it was fun. Anyway, here's the resulting Mootools class. The class is very basic. It just allows the 'Search' text on this blog's Search input to disappear when you focus on it and returns it when you lose focus.
var search = new Class({
initialize: function(input) {
this.input = $(input);
this.default = this.input.get('value');
this.attach();
},
attach: function() {
this.input.addEvent('focus', function(event){
event.preventDefault();
console.log('you clicked on me!!');
this.input.set('value', '');
}.bind(this));
this.input.addEvent('blur', function(event) {
event.preventDefault();
console.log('please click on me now!!');
this.input.set('value', this.default);
}.bind(this));
}
});
It's easy to use. Next time I need something with this functionality, I'd just type include the class and type in:
window.addEvent('domready', function(){
new search('searchtext');
});
Not the neatest implementation you could probably find but I think I'll get there.
Categories: Site News, Web Development
Tags: javascript, mootools
No Comments
