Mootools : Styliser un input type checkbox

31-05-2013
Kevin Lancien

Vous savez probablement déjà que, de base, un élément html input de type checkbox n'est pas stylisable directement en CSS.

Afin de pouvoir donner le style que l'on souhaite à un input checkbox, il faut passer par du javascript. 

Utilisant beaucoup le framework JavaScript MooTools chez Wandi, nous avons codé certaines classes JS qui nous permettent de stylisé rapidemment ces inputs, tout en gardant le comportement normal de ceux-ci.

Voici une de ces classes: (dépendant de l'inclusion de MooTools dans votre page) 

var CustomCheckbox = new Class({
||t||initialize: function(selectorClass){
||t||||t||if (selectorClass == "")
||t||||t||||t||return false;
||t||||t||this.selectorClass = selectorClass;
||t||||t||this.checkboxes = $$('.'+this.selectorClass+' input[type="checkbox"]');

||t||||t||if (this.checkboxes.length > 0)
||t||||t||||t||this.initEvents();
||t||},

||t||initEvents: function(){
||t||||t||this.checkboxes.each(function(checkbox){
||t||||t||||t||var container = checkbox.getParent('.'+this.selectorClass);
||t||||t||||t||var label = $$('label[for="'+checkbox.get('id')+'"]')[0];

||t||||t||||t||container.addEvent('click', function(e){
||t||||t||||t||||t||e.stop();
||t||||t||||t||||t||this.select(container);
||t||||t||||t||}.bind(this));

||t||||t||||t||if (label){
||t||||t||||t||||t||label.addEvent('click', function(e){
||t||||t||||t||||t||||t||if (e.target.tagName != "A"){
||t||||t||||t||||t||||t||||t||e.stop();
||t||||t||||t||||t||||t||||t||this.select(container);
||t||||t||||t||||t||||t||}
||t||||t||||t||||t||}.bind(this));
||t||||t||||t||}
||t||||t||}.bind(this));

||t||||t||this.update();
||t||},

||t||select: function(container){
||t||||t||var checkbox = container.getElement('input[type="checkbox"]');

||t||||t||if (checkbox.checked){
||t||||t||||t||container.removeClass('checked');
||t||||t||||t||checkbox.checked = false;
||t||||t||} else {
||t||||t||||t||container.addClass('checked');
||t||||t||||t||checkbox.checked = true;
||t||||t||}

||t||||t||this.update();
||t||||t||checkbox.fireEvent('change');
||t||},

||t||update: function(){
||t||||t||this.checkboxes.each(function(checkbox){
||t||||t||||t||var container = checkbox.getParent('.checkbox');

||t||||t||||t||if (checkbox.checked && !container.hasClass('checked'))
||t||||t||||t||||t||container.addClass('checked');
||t||||t||||t||else if (!checkbox.checked && container.hasClass('checked'))
||t||||t||||t||||t||container.removeClass('checked');
||t||||t||}.bind(this));
||t||}
});

window.addEvent('domready', function(){
||t||new CustomCheckbox("checkbox");
});

Il suffit d'encapsuler notre input dans un élément HTML et de lui affecter une classe, telle que "checkbox" comme dans l'exemple ci-dessus. Ensuite, lors de l'instanciation de la classe JS, passez ce selector dans le constructeur. (l. 63 - CustomChecbox.js)

Voici ensuite à titre d'exemple le CSS que j'ai utiliser pour styliser ma checkbox :

.checkbox {
||t||cursor:pointer;
||t||width:10px;
||t||height:10px;
||t||background-color:#fff;
||t||border:1px solid #DDDDDD;
||t||border-radius:2px;
||t||float:left;
||t||margin-right:10px;
||t||position:relative;
||t||top:4px;
}
.checkbox.checked {
||t||background-color:#EEEEEE;
}
.checkbox input[type="checkbox"]{
||t||display:none;
}

 

Télécharger la démonstration/fichiers souces

Télécharger
Charles - 2013-08-08 00:27:23
this post is fantastic
Julian - 2013-08-08 00:27:23
Excellent work, Nice Design
Emily - 2013-08-10 03:31:15
Very Good Site
Michelle - 2013-08-10 03:31:15
Cool site goodluck :)

Apporter votre contribution

Expérience utilisateur

Wandi vous propose de découvrir une nouvelle approche de la navigation sur un site web...
Êtes-vous prêt ?

Démarrer l'expérience