Bonjour à tous. je souhaite vous présenter un petit plugin de compte à rebours pour Bootstrap. L'idée est venu pour un projet web et vous allez me dire des comptes à rebours circulaire il y en à plein, sauf que là c'est nettement plus poussé.
Si vous connaissez bootstrap, vous connaissez sans doute sa facilité d'intégration. De la même maniére que l'on ajoute un élément bootstrap on ajoute un compte à rebours avec CircularCountdown, le tout paramétrable et adaptable.
Les fichiers qui nous interessent sont circularcountdown(.min).css et circularcountdown(.min).js à placer respectivement dans les répertoires css/ et js/ de votre projet bootstrap.
Ensuite il faut les inclures dans votre page d'index.
<link href="css/circularcountdown.min.css" rel="stylesheet">
...
<script src="js/circularcountdown.min.js"></script>
Puis ajouter la structure du compte à rebours circulaire en n'oubliant pas de renseigner dans le bloc principal data-toggle="circularcountdown"
<div class="countdown" data-toggle="circularcountdown" data-color="belize-hole" data-to="12/25/2014">
<div class="row">
<div class="cdsjs col-lg-3 col-md-6 col-sm-12 col-xs-6"><canvas id="days"><!-- Days --></canvas></div>
<div class="cdsjs col-lg-3 col-md-6 col-sm-12 col-xs-6"><canvas id="hours"><!-- Hours --></canvas></div>
<div class="cdsjs col-lg-3 col-md-6 col-sm-12 col-xs-6"><canvas id="minutes"><!-- Minutes --></canvas></div>
<div class="cdsjs col-lg-3 col-md-6 col-sm-12 col-xs-6"><canvas id="seconds"><!-- Seconds --></canvas></div>
</div>
</div>
Le plugin permet d'afficher pour l'instant les :
- Dixiéme de secondes -> id="tenthsec"
- Secondes -> id="seconds"
- Minutes -> id="minutes"
- Heures -> id="hours"
- Jours -> id="days"
L'exemple ci-dessus affiche les jours, heures, minutes et secondes. Le systéme de grille (col-lg, col-md...) est défini dans la division parente du canvas et s'utilise comme pour tout autre élément bootstrap.
Les paramétres à passer à CircularCountdown:
data-to (String): La date au format mm/dd/YYYY
data-color (String): la couleur des cercles. Il est possible de renseigner une couleur prédéfini dans le plugin. On peut les retrouver sur le site http://flatuicolors.com/. Il est aussi possible de mettre les couleurs de votre choix au format hexadecimal data-color="#3498DB" ou au format rgb data-color="255, 255, 255". A savoir que si le paramétre n'est pas renseigné, la couleur par défaut est noir.
data-fcolor (String): La couleur de la police. Les valeurs possible sont les mêmes que pour data-color.
Voilà jespére que ce petit plugin sera utile pour les developpeurs qui utilisent Bootstrap.
See example
Retrouvez-moi aussi sur Play'nTek
Wheezy
