info@nebulosaweb.com

Search box stile Twitter con jQuery

search box

La nuova versione di Twitter offre un’interfaccia più dinamica al passo con l’attuale linea evolutiva del web. Tra le tante novità si può notare un searchbox animato che si estende quando riceve il focus e che torna alle sue dimensioni originali quando lo perde.
L’effetto è abbastanza semplice da realizzare avvalendosi del framework jQuery (tra l’altro utilizzato anche dallo stesso Twitter).

Innanzitutto scaricate l’ultima versione di jQuery disponibile dal sito ufficiale e inseritela nell’head del vostro sito.

<script src="http://tuosito.it/cartellaScripts/jquery.js" type="text/javascript"></script>
<!--Ricordate di cambiare l'url-->

A questo punto abbiamo bisogno di un box di ricerca su cui applicare l’effetto che sarà sostanzialmente come quello di seguito riportato.

<div id="searchbox">
	<form method="get" id="searchform" action="scriptRicerca.php">    
		<input class='sBox' type="text" value="" name="s" id="s" />
		<input class='sButton' type="image" alt="Cerca" src="http://tuosito.it/cartellaImmagini/search.png" />   
	</form>
</div>

Prima di animare questo form abbiamo però bisogno che abbia l’aspetto da noi desiderato, in questo caso i bordi rotondi, il box-shadow e l’immagine della lente interna all’input text.
Nel nostro esempio ci avvarremmo del seguente CSS.

#searchbox {
    position: relative;
}

#searchbox form {
    display: inline;
}

.sBox {
    background: #695D53;
    border: none;
    border-radius: 15px;
    box-shadow: 2px 2px 5px #151515;
    color: #AAAAAA;
    height: 30px;
    outline: medium none;
    padding: 0 30px 0 5px;
    position: absolute;
    right: 25px;
    width: 70px;
}

.sButton {
    border: none;
    box-shadow: none;
    position: absolute;
    right: 30px;
    top: 3px;
}

Come ogni esempio è tutto relativo al template, e dimensioni e padding sono settati per posizionare al meglio l’immagine della lente 24×24, vanno quindi rivisti in base alle vostre scelte.

Passiamo ora alla parte saliente di questa guida, cioè lo script che permetterà al box di animarsi, che andremo ad inserire nell’head sotto alla libreria jQuery.

var $jq = jQuery.noConflict();//<- in caso di conflitto
$jq(document).ready(function(){			
	$jq("#s").val("Cerca...");
	//animazione searchbox
	$jq("#s").bind("focus blur", function(event){
		if(event.type == "focus"){
			$jq(this).animate({
				"width" : "+=100px"
				},
				"fast"
			);
			if($jq(this).val() == "Cerca..."){
				$jq(this).val("");
			}
		}
		else{
			$jq(this).animate({
				"width": "-=100px"
				},
				"fast"
			);
			if($jq(this).val() == ""){
				$jq(this).val("Cerca...");
			}
		}
	});
});

La prima riga di codice serve se avete intenzione di applicare questo script su WordPress o altri CMS, in quanto la funzione $() andrebbe in conflitto con altri script. Se state invece applicando lo script su una vostra opera potete saltare questa riga e utilizzare il $ senza il jq che lo succede.
Nello script sopra riportato potete senza grossa familiarità con jQuery settare a vostro piacimento il width (+= allunga, -= accorcia), la velocità di animazione (slow, normal, fast o millisecondi) e il testo all’interno del searchbox quando non ha il focus.

A chi ha poca familiarità con jQuery consiglio di approfondire la conoscenza di questo fantastico framework che permette con poche righe di codice di ottenere ottimi risultati compatibili con tutti i maggiori browser sulla piazza.

Autore: Fabio Di Stasio

Web Designer Freelance specializzato in sviluppo web, realizzazione di template responsive, creazione di temi e plugin WordPress e purista degli standard W3C.