Come creare Check Box con CSS e jQuery

Oggi con questo tutorial vediamo come costruire delle caselle check box nuove sia nella forma che nel design.

Partiamo a bomba analizzando il codice Html, come ossatura del nostro progetto

Check Boxes con CSS e jQuery | iwebdesigner Demo











Effetti Display: 
Attiva la localizzazione: 
Inserisci nei risultati di ricerca: 
Notifiche per Email: 






Check Boxes con CSS e jQuery
Leggi il BLog

La parte principale di questo codice e’ ID page; al suo interno abbiamo inserito un’elenco non ordinato con una serie di elementi che rappresentano le caselle di controllo.

CODICE CSS

Naturalmete esiste un style.css, che se fate il download della demo potete controllare, ma quello che ci interessa per il nostro esempio e’ il codice contenuto in JQUERYIWDCHECKBOX.CSS:

.iwdCheckBox{
background:url('background.png') no-repeat right bottom;
display:inline-block;
min-width:60px;
height:33px;
white-space:nowrap;
position:relative;
cursor:pointer;
margin-left:14px;
}

.iwdCheckBox.checked{
background-position:top left;
margin:0 14px 0 0;
}

.iwdCheckBox .iwdCBContent{
color: white;
line-height: 31px;
padding-right: 38px;
text-align: right;
}

.iwdCheckBox.checked .iwdCBContent{
text-align:left;
padding:0 0 0 38px;
}

.iwdCBPart{
background:url('background.png') no-repeat left bottom;
width:14px;
position:absolute;
top:0;
left:-14px;
height:33px;
overflow: hidden;
}

.iwdCheckBox.checked .iwdCBPart{
background-position:top right;
left:auto;
right:-14px;
}

L’elemento iwbCheckBox e’ posizionato come inline-block, quindi rimane sempre sulla stessa linea; ha una posizione relativa perche’possiamo utilizzare la tecnica di sovrapposizione, cosi’ che il iwdCBPart si faccia vedere con l’altro colore di sfondo. A seconda se mostriamo le funzioni acceso o spento, l’elemento iwdCPContent si allinea a sinistra o a destra.

CODICE JQUERY

Il codice jQuery attribuito al nostro esempio e’ contenuto nel file JQUERY.IWDCHECKBOX.JS. Ecco il codice:

(function($){
$.fn.iwdCheckbox = function(options){

// Default On / Off labels:

options = $.extend({
labels : ['ON','OFF']
},options);

return this.each(function(){
var originalCheckBox = $(this),
labels = [];

// Checking for the data-on / data-off HTML5 data attributes:
if(originalCheckBox.data('on')){
labels[0] = originalCheckBox.data('on');
labels[1] = originalCheckBox.data('off');
}
else labels = options.labels;

// Creating the new checkbox markup:
var checkBox = $('',{
className    : 'iwdCheckBox '+(this.checked?'checked':''),
html:    ''+labels[this.checked?0:1]+
''
});

// Inserting the new checkbox, and hiding the original:
checkBox.insertAfter(originalCheckBox.hide());

checkBox.click(function(){
checkBox.toggleClass('checked');

var isChecked = checkBox.hasClass('checked');

// Synchronizing the original checkbox:
originalCheckBox.attr('checked',isChecked);
checkBox.find('.iwdCBContent').html(labels[isChecked?0:1]);
});

// Listening for changes on the original and affecting the new one:
originalCheckBox.bind('change',function(){
checkBox.click();
});
});
};
})(jQuery);

Questa e’ la funzione  JavaScript che permette di cambiare da ON a OFF.

Il plugin che serve per cambiare lo stato delle nostre caselle da ATTIVO a DISATTIVO e’ contenuto nel file script.js:

$(document).ready(function(){

$('input[type=checkbox]').iwdCheckbox({labels:['Attiva','Disattiva']});
});

Cosi’ le nostre check box sono complete e vengono attivate con il jQuery.

Questo plugin puo’ tornare utile per modificare pannelli amministrativi o di configurazione dei nostri progetti web. Puo’ essere anche utilizzato per la creazione di applicativi per il mobile. Naturalmente se un utente ha disattivato il codice JavaScript vedra’ le classiche caselle checkbox.

Alla prossima!