MooCountdown – v0.1
Mootools (v1.2.x) Countdown
Version Française
Le principe
MooCountdown est un plugin fonctionnant pour le Framework Javascript Mootools permettant de générer un compte à rebours.
Basée sur le plugin de David Walsh (http://davidwalsh.name/mootools-countdown-plugin), MooCountdown étend la classe à l’utilisation de Timestamp pour une utilisation « W jours, X heures, Y minutes, Z secondes ». Il vous est donc facile de créer un compte à rebours simple et intuitif.
/!\ Attention : Ce plugin est le premier que je réalise pour Mootools. Le code fonctionne mais n’est peut être pas encore optimisé.
Pré-requis
- Mootools 1.2.x (core et more)
- Navigateur récent (IE8, FF3.5…)
Démonstration :
Rendez-vous sur la page d’exemple du plugin MooCountdown
Utilisation :
étape 1 :
Placez les scripts mootools core 1.2, mootools more 1.2 et MooCountdown dans l’entête de la page
-
<script type="text/javascript" src="js/core.js"></script>
-
<script type="text/javascript" src="js/more.js"></script>
-
<script type="text/javascript" src="js/MooCountdown.js"></script>
étape 2 :
Instancier l’objet MooCountdown au Domready
-
<script type="text/javascript">
-
window.addEvent(‘domready’, function() {
-
new MooCountdown({futureDate:‘1293034266000′});
-
});
-
</script>
/!\ Attention : Le paramètre futureDate est un timestamp en millisecondes. Si vous le générez à partir de la fonction PHP « time() » vous obtiendrez une valeur en secondes. N’oubliez donc pas de multiplier ce chiffre par 1000. 1 seconde = 1000 millisecondes.
Étape 3 :
Placez dans le body de votre page le conteneur.
-
<div id="countdown"></div>
Documentation
Voici la liste des paramètres :
- container (string) : ID de l’élément HTML qui contiendra le compte à rebours. Défaut : ‘countdown’
- futureDate (timestamp en millisecondes) : Le départ du compte à rebours en millisecondes. Valeur minimale : 1. Défaut : empty.
- OnlySeconds (booléen) : Si la valeur est fixée à true il n’y aura pas de formatage jours/minutes/secondes. Si vous souhaitez faire un compte à rebours de quelques secondes, mettez cette valeur à true. Défaut : false
- dayText, hourText, minuteText, secondText (string): Texte pour la gestion de l’internationalisation. Défaut, valeur française : jour, heure, minute, seconde
- onCompleteText (string) : Du texte à afficher une fois le décompte terminé. Défaut : null
- startFont (string) : Taille de départ du texte pour l’effet Tween. Défaut : ‘32px’
- finishFont (string) : Taille d’arrivée du texte pour l’effet Tween. Défaut : ‘16px’
- duration (int) : durée de l’animation et du décompte des secondes. Défaut : ‘1000′
- onComplete (function) : Function personnalisée à déclencher à la fin du compte à rebours. Défaut : empty
Exemple
Instanciation de la classe :
-
new MooCountdown({
-
futureDate:‘10′, // décompte de 10 secondes
-
onlySeconds:true, //on ne veut pas de formatage
-
container:‘countdownSeconds’, //l’élément a pour ID countdownSeconds
-
onComplete: function() { // le décompte terminé, on envoie une alerte
-
alert(‘Countdown !’);
-
}
-
});
Conteneur qui accueillera le décompte :
-
<h1>Countdown : secondes</h1>
-
-
<div id="countdownSeconds"></div>
Téléchargement :
Vous pouvez télécharger :
Support :
Si vous détectez des bugs, vous pouvez me contacter via le formulaire suivant.
Pour vos questions ou petits bugs, veuillez laisser un commentaire.
A venir :
- Optimisation du code
- utilisation d’images au lieu de texte
- d’autres effets
Changelog :
Version actuelle : MooCountdown v0.1
Remerciement :
- David Walsh, son travail et sa classe countdown
- Sam et Troy de Consider: Open pour leurs tutoriels ‘30 days with mootools 1.2′
- Mon pote Joach’ pour la traduction de mon article en Anglais
- Mon pote Seb’ pour la traduction de mon article en Espagnol
English Version
The Concept:
MooCountdown is a plugin functioning for the JavaScript Mootools Framework allowing to generate a countdown.
Based on the David Walsh’s plugin (http://davidwalsh.name/mootools-countdown-plugin), MooCountdown extend the class to the use of Timestamp for an employment “W days, X hours, Y minutes, Z seconds”. It is easy to create a simple and intuitive countdown.
/!\ Warning: This plugin is the first one that I realize for Mootools. The code is functioning but it may be not optimized yet.
Prerequisite course:
- Mootools 1.2 x (core and more)
- Recent browser (IE 8, FF 3.5, …)
Demonstration:
Check the example page of MooCountdown plugin.
Use:
Step 1:
Put these following scripts in the header: mootools core 1.2, mootools more 1.2 and MooCountdown.
-
<script type="text/javascript" src="js/core.js"></script>
-
<script type="text/javascript" src="js/more.js"></script>
-
<script type="text/javascript" src="js/MooCountdown.js"></script>
Step 2:
Instantiate the MooCountdown object to the Domready
-
<script type="text/javascript">
-
window.addEvent(‘domready’, function() {
-
new MooCountdown({futureDate:‘1293034266000′});
-
});
-
</script>
/!\ Warning : The futurDate parameter is a Timestamp in milliseconds. If you generate it from the PHP function “Time ()”, you will get a value in seconds. Then don’t forget to multiply this value by 1000. 1 second = 1000 milliseconds.
Step 3:
Put the container application in your page’s body
-
<div id="countdown"></div>
Documentation:
This is the list of parameters:
- Container (string): ID of the HTML element which contains the countdown. Default : ‘countdown’
futurDate (Timestamp in milliseconds): The countdown’s start in milliseconds. Minimal value = 1. Default : empty.
- OnlySeconds (Booleans): If the fixed value is true, there will not be a formatting days/hours/seconds. If you wish to create a countdown for only few seconds, give this value at true. Default : false.
- dayText, hourText, minuteText, secondText (string): Text for the administration of internalization. Default, French value for day, hour, minute, second.
- onCompleteText (string): Text displayed after the ended of the countdown. Default : null
- startFont: starting size of the text for the tween effect. Default : ’32px’
- finishFont: arrival size of the text for the tween effect. Default : ’16px’
- duration (int): length of the animation and the count of seconds. Default : ‘1000’
- onComplete (function): Personalized function to trigger at the end of the countdown. Default : empty.
Example:
Class instantiation:
-
New Moocountdown({
-
futurDate:’10’,// 10 seconds count
-
onlySeconds:true,//we don’t want a formatting
-
container:’countdownSeconds’,//the element has countdownSeconds for ID
-
onComplete: function() { // the countdown is finish, we send an alert
-
alert(‘Countdown !’);}});
The container which hosts the count:
-
<h1>Countdown : seconds</h1>
-
-
<div id="countdownSeconds"></div>
Download:
You can download:
Support :
If you pick up bugs, you can contact me through the following form. If you have any questions or smalls bugs, please leave a comment.
Innovations still to come:
- code’s optimisation
- use of picture instead of text
- other effects
Changelog:
Actual version: Moocountdown v0.1
Thanks:
- David Walsh, his work and his countdown class
- Sam and Troy from Consider: Open for their tutorials ’30 days with mootools 1.2’
- My friend Joach’ for the translation of this article in English
- My friend Seb’ for the translation of this article in Spanish
Versión española
MooCountdown es un plugin que funciona para Framework Javascript Mootools permitiendo generar una cuenta atrás.
Basado en el plugin de David Walsh (http://davidwalsh.name/mootools-countdown-plugin), MooCountdown extiende la clase a la utilización de Timestamp para una utilización » W días, X horas, Y minutas, Z secundas « . De hecho se puede crear una cuenta atrás simple e intuitiva.
/!\ Cuidado : este plugin es el primero que creo para Mootools. El código funciona pero puede ser optimizado.
Prerrequerido
- Mootools 1.2.x (core y more)
- Navegador reciente IE8, FF3.5
Demostración:
Citijirarse a la página de ejemplo del plugin MooCountdown
Utilizacìon:
Etapa 1:
Coloque los guiones mootools core 1.2, mootools moro 1.2 y MooCountdown en el membrete de la página.
-
<script type="text/javascript" src="js/core.js"></script>
-
<script type="text/javascript" src="js/more.js"></script>
-
<script type="text/javascript" src="js/MooCountdown.js"></script>
etapa 2 :
Instanciar el objeto MooCountdown al Domready
-
<script type="text/javascript">
-
window.addEvent(‘domready’, function() {
-
new MooCountdown({futureDate:‘1293034266000′});
-
});
-
</script>
/ ! \ Cuidado : el parámetro futureDate es un timestamp en milisegundos. Si lo genera a partir de la función PHP » time () » obtiene un valor en segundos. No olvide multiplicar este por 1000. El 1 segundo = 1000 milisegundos.
Etapa 3:
Pone el body de su página el contenedor.
-
<div id="countdown"></div>
Documentación
He aquí la lista de los parámetros:
- container (string): ID del elemento HTML que contendrá la cuenta atrás. Defecto: ‘Countdown ‘
- futureDate (timestamp en milisegundos): el principio de la cuenta atrás en milisegundos. Valor mínimo: 1. Defecto: empty.
- OnlySeconds (booleano): si la valor esta fijado en « true » no habrá formateo días / minutos / segundos. Si desea hacer una cuenta atrás de unos segundos, poner este valor en « true ». Defecto: false
- DayText, hourText, minuteText, secondText (string): Texto para la gestión de la internacionalización. Defecto : valor francés.
- OnCompleteText (string): texto que aparece una vez el descuento acabado. Defecto: null
- startFont (string): Tamaño del texto al principio para el efecto Tween. Defecto: ‘32px
- finishFont (string): tamaño del texto al punto para el efecto Tween. Defecto: ‘16px’
- Duration (int): duración de la animación y del descuento de los segundos. Defecto: ‘1000′
- OnComplete (function): Funccion personalizada a activar al fin de la cuenta atrás. Defecto: empty
Ejemplo
Instanciacion de la clase:
-
New MooCountdown ({
-
futureDate: ‘10′, // descuento de 10 segundos
-
onlySeconds:true, // no queremos formateo
-
container:‘countdownSeconds ‘, // el elemento tiene para ID como countdownSeconds
-
onComplete: function () {// el descuento acabado, enviamos una alerta
-
alert (‘ Countdown! ‘);
-
}});
Contenedor que acogerá el descuento:
-
<h1>Countdown : Secundos</h1>
-
-
<div id="countdownSeconds"></div>
Cargamiento:
Se puede cargar:
Soporte:
Si detecta bugs, puedes contactarme con el formulario siguiente.
Para sus preguntas o pequeños bugs, por favor, deje un comentario
Proximamente :
- Optimización del código
- utilización de imágenes en lugar del texto
- otros efectos
Changelog :
Versión actual: MooCountdown v0.1
Agradecimiento:
- David Walsh, su trabajo y su clase countdown
- Sam y Troy de Consider: Open para su tutoriels ‘ 30 days with mootools 1.2 ‘
- Mi amigo Joach’ para la traducción de mi artículo en inglès
- Mi amigo Seb’ para la traducción de mi artículo en español
