Login New user

Come creare Check Box con CSS e jQuery

come-creare-checkbox-con-jquery-e-css

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

demo check box con css e jquery

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


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Check Boxes con CSS e jQuery | iwebdesigner Demo</title>

<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="jquery.iwdCheckbox/jquery.iwdCheckbox.css" />

</head>
<body>

<div id="page">

<form method="get" action="./">
<ul>
<li><label for="ch_effects">Effetti Display: </label><input type="checkbox" id="ch_effects" name="ch_effects" data-on="Mostra effetti" data-off="Nascondi effetti" /></li>
<li><label for="ch_location">Attiva la localizzazione: </label><input type="checkbox" id="ch_location" name="ch_location" checked /></li>
<li><label for="ch_showsearch">Inserisci nei risultati di ricerca: </label><input type="checkbox" id="ch_showsearch" name="ch_showsearch" /></li>
<li><label for="ch_emails">Notifiche per Email: </label><input type="checkbox" id="ch_emails" name="ch_emails" data-on="ON" data-off="OFF" /></li>
</ul>
</form>

<!-- You are free to remove this footer -->

<div id="footer">
<h2>Check Boxes con CSS e jQuery</h2>
<a href="http://www.iwebdesigner.it">Leggi il BLog</a>
</div>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="jquery.iwdCheckbox/jquery.iwdCheckbox.js"></script>
<script src="js/script.js"></script>

</body>
</html>

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 = $('<span>',{
className    : 'iwdCheckBox '+(this.checked?'checked':''),
html:    '<span>'+labels[this.checked?0:1]+
'</span><span></span>'
});

// 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.

download check box demo

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!

Condividi
Facebook Twitter Digg Linkedin Reddit Stumbleupon Tumblr Posterous Email

Potrebbe interessarti anche:

Ancora nessun commento. Se vuoi inserisci il tuo!

Lascia un Commento

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>