Personalizzare una Select Box !

Gregorio — Mon, 05 Jul 2010 21:26:22 +0000

Non tutti i componenti del form sono personalizzabili al 100%, a volte è possibile modificare solo alcune caratteristiche come il colore del testo e dello sfondo .

La select box difficilmente viene personalizzata via css perchè molti browser non accettano pienamente questa funzione .
Impariamo a creare una select box tutta nostra con l’ausilio del nostro amato framework Jquery !

Per l’occasione ho preparato questo semplice form che è costituito da una textbox , una select box e un submit .

La select box si presenta come un div (.selectBox) con i segunti nodi figli :

.input Qui viene visualizzato il testo scelto dell’utente nel menu a tendina
input hidden Il valore scelto viene copiato in questa field per poter essere inviato durante il submit del form
.arrow Pulsantino per aprire il menu a tendina
.hoverBox Una lista (ul) contenente i valori di scelta

Seleziona un valore
    
    
    
      item 1
      item 2
      item 3
      item 4
      item 5

Vediamo cosa fa il seguente codice jquery che regola il funzionamento di tutta la selectbox

<script type="text/javascript">
$(document).ready(function(){
// Funzione che viene chiamata quando la pagina si carica
 
// Gestione freccia Select Box
 
$(".selectbox .arrow").click(function(){
 
// Quando utente clicca sulla freccia ...
 
$(this).parent().children(".hoverBox").show();
 
 
});
// Quando utente fa click il box scompare
$(".selectbox .hoverBox").mouseup(function(){
	$(this).hide();
})
// Quando utente clicca su un link , il valore viene copiato nello SPAN nell hidden
$(".selectbox .hoverBox a").click(function(){
	var value = $(this).text();
        $(this).parent().parent().parent().children("input").val(value);
    $(this).parent().parent().parent().children(".input").text(value);															 
								});
 
						    });
			script>

Quando l’utente fa click nella freccia ( .arrow ) viene visualizzato il box contenente i link .

$(this).parent().children(".hoverBox").show();

Se l’utente preme un link il valore viene copiato sia nello span , per la visulizzazione grafica , e sia nell’input hidden .

	var value = $(this).text();
        $(this).parent().parent().parent().children("input").val(value);
        $(this).parent().parent().parent().children(".input").text(value);

Centrare un div al centro della pagina con JQuery/JavaScript

Gregorio — Mon, 11 Jan 2010 13:11:02 +0000

Oggi vi mostrerò come allineare perfettamente un box(div) al centro di una pagina web con l’ausilio di Jquery, una delle librerie più usate per programmare in javascript.

La funzione che ci permette di fare ciò è la seguente :

<script type="text/javascript">
function centerDiv(div){
  	var DIVwidth = $(div).width();	
	var DIVheight = $(div).height();
	var SCREENwidth = $(document).width();
	var SCREENheight = $(window).height();	
	var SCREENscrolltop = $(window).scrollTop();
    $(div).hide();
	$(div).css({"position":"absolute","left":(SCREENwidth-DIVwidth)/2+"px","top":(SCREENheight-DIVheight)/2+SCREENscrolltop+"px"});
	$(div).show();
 
}
var div = "#boxCenter";
$(document).ready(function(){
	centerDiv(div);
});
$(window).scroll(function(){
	centerDiv(div);
});
$(window).resize(function(){
	centerDiv(div);
});
script>

Lo script al primo accesso calcola le coordinate e le imposta al div selezionato . Se l’utente modifica le dimensioni della finestra vengono calcolate delle nuove coordinate e aggiornate.

Proviamo a commentare il cuore del programmino :

	$(div).css({"position":"absolute","left":(SCREENwidth-DIVwidth)/2+"px","top":(SCREENheight-DIVheight)/2+SCREENscrolltop+"px"});

$().css è una funzione JQuery usata per modificare lo stile ( css ) di un elemento html. Ha la seguente sintassi :

$("selettore").css({"proprietà":"valore","proprietà2":"valore",ecec});

Le coordinate X del div viene calcolata grazie a questa espressione :

(SCREENwidth-DIVwidth)/2

Sottraendo la larghezza del DIV alla larghezza del documento otteniamo i due margini , quello sinistro e destro. Per avere un margine occorre quindi dividere tutto per due .

Stesso procedimento per la cordinata Y del box , cambia solo un piccolo particolare perché bisogna sommare lo scroll verticale della pagina :

(SCREENheight-DIVheight)/2+SCREENscrolltop

Vedi esempio – Scarica

IoSmanetto.it - Blog programmazione e webdesign » jquery

Personalizzare una Select Box !

Centrare un div al centro della pagina con JQuery/JavaScript