jQuery UI: spinner

Che cos’è uno spinner? Uno spinner è una funzione che migliora un input di testo per l’immissione di valori numerici, con l’aggiunta della gestione  dei tasti su / giù e il tasto di gestione freccia.

In questo breve esempio predisporremo due campi di input che conterranno le coordinate in cui centrare un google maps, modificanto le coordinate dall’input migliorato dallo spinner sposteremo la mappa.

Iniziamo ad inserire nel nostro file html tutte le librerie di cui abbiamo bisogno, jquery, jquery ui, il suo css, google maps, il plugin di jquery mousewheel:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Poi passiamo ad inserire nell’html della pagina i due campi di input e il div che ospiterà la mappa:

<label for="lat">Latitude</label>
<input id="lat" name="lat" value="44.797">
<br />
<label for="lng">Longitude</label>
<input id="lng" name="lng" value="9" >
<div id="map"></div>

Lo stile della mappa, giusto le dimensioni:

#map {width:500px;height:500px;}

Ora entriamo nel vivo: come prima cosa al document ready prepariamo una funzione che restituisca latitudine e longitudine prese dai dui input

function latlong() {
return new google.maps.LatLng( $("#lat").val(), $("#lng").val() );
}

Come secondo step creiamo una funzione per centrare la mappa in base al valore restituito dalla funzione precedente:

function position() {
map.setCenter( latlong() );
}

Creiamo la mappa nel modo consueto

var map = new google.maps.Map( $("#map")[0], {
zoom: 8,
center: latlong(),
mapTypeId: google.maps.MapTypeId.ROADMAP
});

E l’ultimo elemento cruciale: trasformiamo i due campi di input con lo spinner e predisponiamo l’incremento con il parametro step e poi agli eventi change e stop riposizioniamo la mappa con la funzione position()

$( "#lat, #lng" ).spinner({
step: .001,
change: position,
stop: position
});

L’esempio