Voici un aperçu très original proposé par rickyh.co.uk du mariage entre MooTools et CSS3 et des nouvelles possibilités qu’offrent ces deux technologies en termes d’effets visuels pour le web. Inutile de préciser qu’il est préférable de disposer d’un navigateur récent

Glissez par ici…

Nous l’attendions depuis longtemps ! La forge du framework JavaScript MooTools destinée au partage de plugins est désormais en ligne !

Celle-ci concentre déjà plusieurs dizaines de plugins et propose pour chacun d’entre eux le téléchargement des sources, une démonstration, un tutoriel et la liste des dépendances, chose qui manquait cruellement par le passé.

Pour les utilisateurs de jQuery, la forge de MooTools est comparable à la section plugins du site de jQuery.

Une petite sélection de plugins incontournables

Voici une petite sélection personnelle des meilleurs plugins actuellement disponibles sur la forge :

• LazyLoad
• MooTools FileManager
• Lighter
• ScrollSpy
• InputMask
• MeioMask
• Database

Accéder à la MooTool Forge.

What is MooEasyRollover ?

MooEasyRollover is a plugin for Mootools that allows you to make a simple rollover image without writing any code line !
The plugin is able to detect all images tagged with a specific class in order to add a rollover image behavior with an image caching.

Live Demo

Check out the MooEasyRollover live demo to see it in action !

Why this Mootools plugin ?

I was working on an old website that use the Macromedia function mm_swapimage, when I added some Mootools stuff, I thought it can be cool to be able to do the same work than mm_swapimage with a Mootools class

Installation instructions

• Download the MooEasyRollover archive.
• Then, add mootools to your page, note that the plugin requires the Assets class of the more builder.
• Add the MooEasyRollover class to your page :

<script src="/js/mooeasyrollover/mootools-1.2.2-core.js" type="text/javascript"></script>
<script src="/js/mooeasyrollover/mootools-1.2.2.2-more.js" type="text/javascript"></script>
<script src="/js/mooeasyrollover/mooeasyrollover.js" type="text/javascript"></script>

• Use this code to launch the plugin. Make sure to set options with the correct values according to your server.

window.addEvent('domready', function() {
 
        //MooEasyRollover launcher
	var MooEasyRolloverInstance = new MooEasyRollover({
		MooEasyRolloverClass : 'rollover', //Set the class which tags all buttons to rollover
		fullPath : 'http://www.domain.com/buttons/', //Set the full path to your images folder
		prefix: '-on' //Set the prefix of mouseover images
	});	
 
});

MooEasyRolloverClass is the classname used to identify images to rollover.

Fullpath is the path to the images folder to use.

Prefix is used to identify rollover images, for exemple, in order to rollover button.png you have to create a button-on.png image in the fullPath folder.

Download

Click here to download MooEasyRollover.

Suite à un tweet de @cpojer j’ai pris le temps de traduire son excellent plugin MooTools FileManager.

Pour utiliser MooTools FileManager en français, téléchargez le fichier de langue et rajoutez le à la liste des scripts inclu dans votre page HTML :

<script type="text/javascript" src="../Source/Language/Language.fr.js"></script>

Utilisez ensuite le paramètre ‘fr’ lors de l’instanciation du plugin :

	/* Simple Example */
	var manager = new FileManager({
		url: 'manager.php',
		assetBasePath: '../Assets',
		language: 'fr',
		uploadAuthData: {session: 'MySessionId'}
	});
	$('example3').addEvent('click', manager.show.bind(manager));

C’est tout

Je vous invite également à lire la documentation de Mootools FileManager.

I was looking for a simple but elegant effect to highlight a menu item to announce a new feature on one of my websites.

I made a simple Mootools based script that switch periodically the color of a text element in order to create an elegant highlight effect.

This code has been tested under mootools 1.2.1 core and mootools 1.2 more builds.

Support and feedback are both available in English and in French.

Any feedback would be appreciated !

The Mootools script

var highlight = true;
 
var periodicalFunction = function(){
	if(highlight) {
		this.tween('color', '#F89838'); //Change to your custom color
		highlight = false;
	} else {
		this.tween('color', '#000000'); //Change to your custom color
		highlight = true;
	}
}
 
window.addEvent('domready', function() {
 
	if($defined($$('.highlight'))) {
		var passedVar = $$('.highlight');
		var periodicalFunctionVar = periodicalFunction.periodical(700, passedVar); //Change to your custom time
	}
 
});

The HTML

<ul>
	<li>No highlighted</li>
	<li class="highlight">Highlighted</li>
	<li>No highlighted</li>
	<li class="highlight">Also highlighted</li>
</ul>

Live showcase

• No highlighted
• Highlighted
• No highlighted
• Visit www.kromack.com

Download showcase