May 122013
 

Proviamo a costruire un albero i cui elementi possono essere trascinati, potrebbe tornare molto utili per organizzare diverse informazioni.

A livello di html si tratta di costruire una lista contenente elementi di secondo livello:


<h2>Sposta gli elementi dell'albero</h2>
<ul id="target">
<li>And a list</li>
<li>With items</li>
<li>
And items containing subitems
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
<li>And more items containing subitems
<ul>
<li>Sub 4</li>
<li>Sub 5</li>
</ul>
</li>
</ul>

Useremo anche un piccolo css per creare comodo spazio di trascinamento (è bene non trascurare l’aspetto visivo):


ul {
border: 1px dashed gray;
margin: 10px;
padding: 10px 10px 10px 30px;
}

Infine rendiamo tutto operativo con jQuery UI


$(document).ready(function() {
$('ul').sortable({connectWith: 'ul'});
});

L’esempio

 

May 042013
 

Lo scopo di trascinare elementi attraverso una pagina web spesso è quello di rilasciarli in una landing area particolare.

Costruiamo una pagina con un elemento da trascinare e una landing area costituita da un div, i nostri elementi saranno opportunamente formattati tramite css:


<style>
.ui-draggable {border: 1px dashed black;}
.ui-draggable-dragging {border: 1px solid red;}
#target { width: 400px;height: 100px;border: 2px solid black;}
</style>

...

<span>SPAN</span>
<div id="target">Rilascia il tag span nel rettangolo</div>

Come nel post precedente durante il trascinamento cambieremo lo stile all’elemento trascinato.

Attiviamo lo script al document.ready:


$(document).ready(function() {
$('#target').droppable();
$('span').draggable();
});

In questo modo abbiamo definito l’elemento trascinabile e la landing area per la ricezione degli elementi trascinati.

Si tratta di gestire gli eventi del rilascio all’interno dell’area e del passaggio sul bordo, assoceremo due semplici funzioni che scriveranno all’interno del target:


$('#target').droppable({
drop: function() {
$(this).html('DROPPED!');
},
out: function() {
$(this).html('ancora un po...');
}
});

L’esempio

 

 

May 022013
 

In attesa che HTML5 possa essere utilizzato senza ricorrere a strategie di fallback troppo costose, in altre parole, inattesa che ie7 e ie8 scendano ulteriormente come quota di mercato, se vogliamo trascinare elementi in giro per la nostra pagina web possiamo utilizzare jquery UI. La libreria dovrà essere collegata alla pagina dopo jQuery:


<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>

Nell’html inseriremo alcuni elementi, senza una particolare strategia, faremo in modo che siano tutti trascinabili (draggable):


<h2>Trascina tutti gli elementi in giro per lo schermo</h2>
<p>Paragrafo trascinabile</p>
<h2>Titolo trascinabile</h2>
<ul>
<li>Prima lista</li>
<li>Seconda lista</li>
</ul>

Per renderli trascinabili al document.ready applicheremo il selettore universale e il metodo draggable di jQuery UI:


$(document).ready(function() {
$('body *').draggable();
});

Ultimo step, durante il trascinamento applicheremo un css particolare usando una classe appesa al volo da jQuery UI:


<style>
.ui-draggable {border: 1px dashed black;}
.ui-draggable-dragging {border: 1px solid red;}
</style>

L’esempio

 

Feb 132013
 

Realizzare un tooltip oggi è veramente semplice dato che questa funzionalità è stat integrata in jQuery UI, e questo, di base, ci semplifica molto il lavoro.

Ovviamente dovremo collegare jquery, jquery ui  e il tema di nostro gradimento. Dopodiché nella nostra pagina inseriremo un div appena formattato con un css semplicissimo e che conterrà nell’attributo title il testo da visualizzare nel css.


<style>
#box{ width:320px; height:240px; border:1px solid #000;}
</style>

<div id="box" title="Testo da visualizzare nel tooltip"></div>

L’attivazione della funzionalità avviene nel solito modo di jquery UI: $(selettore).metodo, ovvero, nel nostro caso, $(‘#box’).tooltip8):

ma noi arrichiremo l’esperienza aggiungendo un effetto fade di transizione e gestendo la durata:


$("#box").tooltip({ hide: { effect: "fade", duration: 1000 } });

L’esempio

Jan 212013
 

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

Nov 142012
 

Proseguiamo il lavoro impostato nel precendete post e concretizziamo il drag&drop memorizzando le informazioni con opportune chiamate ajax.
Andremo ad aggiungere anche alcune funzionalità piuttosto comuni.

Ci portiamo nell’area droppable e aggiungiamo l’evento drop:

drop:function(event,ui){
var id=ui.draggable.attr(‘id’);

recuperiamo l’id dell’elemento trascinato, quindi lo mandiamo al server web per l’inserimento nel db:

$.ajax({
type:’GET’,
url:’dati/inserisci.php?id=’+id,
success:function(str){
if(str==’OK’){

se va tutto bene aggiungiamo l’elemento alla landing area, insieme a un campo quantità e a un link elimina:


if(str==’ok’){
$(‘<div id=”elemento_’+id+’”></div>’)
.append(ui.draggable.html())
.append(‘<input type=”text” id=”qt_’+id+’” value=”1″ /><br />’)
.append(‘<a href=”#’+id+’”>Elimina</a>’)
.appendTo(‘#landing_area’)
$(‘#’+id).fadeOut(2000);
}

infine nascondiamo l’elemento dalla lista dei draggable

Restano da gestire l’input della quantità e il link elimina.
Useremo il metodo live perché vengono creati runtime, anche se sarebbe preferibile usare on

Quindi procediamo con 3 operazioni relative all’elimina:
1. rimettiamo l’elemnto nella lista
2. lo rimuoviamo dalla landing area
3. lo cancelliamo dal database:

$(‘#landing_area a’).live(‘click’, function(){
var id=$(this).attr(‘href’);
$(id).fadeIn(2000);
$(this).parent().remove();
//rimuovere dal db
$.get(‘data/test.php?id=’+id,function(){/**/})
})

si noti la forimula this parente per rimuovere l’elemnto padre del link

Per quanto riguarda la quantità molto più semplicemente si tratta di fare un update:

$(‘#landing_area input’).live(‘blur’, function(){
var id=$(this).attr(‘id’);
var qt=$(this).val();
//aggiorna qt su db
$.get(‘data/test.php?id=’+id+’&qt=’+qt,function(){/**/})
})

quindi leggo i valori e li invio al server web.

L’esempio

Nov 112012
 

Vediamo come trascinare determinati elementi all’interno di un’area di atterraggio selezionata.
Nell’html andiamo ad impostare, all’interno di un contenitore, 5 div che trascineremo e un’area di atterraggio:

<div id="contenitore"><div id=”box1″><p>Prodotto 1</p></div>
<div id=”box2″><p>Prodotto 2</p></div>
<div id=”box3″><p>Prodotto 3</p></div>
<div id=”box4″><p>Prodotto 4</p></div>
<div id=”box5″><p>Prodotto 5</p></div>
<div id=”landing_area”></div></div>
<div>

Per comodità i div da trascinare hanno id e la medesima classe, questo velocizzerà anche la creazione del css:

.box{ width:100px; height:60px; border:1px solid #000; margin-bottom:10px; padding:5px; z-index:1;}
#box1{ background-color:#FC0;}
#box2{ background-color:#9CF;}
#box3{ background-color:#96F;}
#box4{ background-color:#6C9;}
#box5{ background-color:#9F3;}
#landing_area{ width:200px; height:300px; position:absolute; top:8px; left:200px; padding:5px; border:2px solid #900; z-index:0; }

Lo stile è spartano, serve solo per distinguere gli oggetti.
Si noti però che gli elementoi da trascinare hanno uno z-index superiore all’area di atterraggio.

Per la nostra attività necessitiamo di Jquery e jQuery UI:


<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script>
<script src=”http://code.jquery.com/ui/1.9.0/jquery-ui.js”></script>

che includiamo nell’head della pagina insieme al css di default:


<link rel=”stylesheet” type=”text/css” href=”http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css” />

A questo punto rendiamo trascinabile tutti gli elementi di classe box:

$(document).ready(function(e) {
$(‘.box’).draggable();
})

Se vogliamo arricchire i comportamenti, possiamo aggiungere una classe che rende trasparente l’oggetto appena iniziamo a trascinarlo e facciamo in modo che una volta rilasciato torni al suo posto:

$(‘.box’).draggable({
revert:true,
start:function(event,ui){$(this).addClass(‘movimento’);},
stop:function(event,ui){
$(this).removeClass(‘movimento’);
}
});

La classe movimento aggiunge solo l’opacità:

.movimento{ opacity:0.5;}

al rilascio ovviamente la togliamo

Volete sapere dove avete rilasciato il vostro oggetto?
La pagina è un piano cartesiano, quindi:

var top=ui.position['top'];
var left=ui.position['left'];
alert(top+’ ‘+left);

Infine predisponiamo l’area di atterraggio:

$(‘#landing_area’).droppable({
accept:’.box’,
tolerance:’fit’
});

Dove stabiliamo gli elementi che accettiamo, tutta la classe box e quando li possiamo considerare all’interno dell’area
con il parametro tolerance, a volte potrebbe bastare toccare le pareti, altre volte bisognerà essere completamente all’interno

Esempio

Nov 082012
 

Fra le animazioni previste dal core di jQuery allo stato attuale non è possibile laovrare con il colore,

per esempio per modificare il colore di sfondo. Per raggiungere questo effetto è necessario fare ricorso a jQuery UI

Prepariamo una pagina con il collegamento al tema base a jQuery e a jQuery UI:


<link rel=”stylesheet” href=”http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css” />
<script src=”http://code.jquery.com/jquery-1.8.2.js”></script>
<script src=”http://code.jquery.com/ui/1.9.0/jquery-ui.js”></script>

Inseriamo nell’html un link trasformato in pulsante e un div sul quale applicare l’effetto:


<a href=”#” id=”button” class=”ui-state-default ui-corner-all”>Cambia colore</a>
<div id=”effect”><p>Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.</p></div>

Lo stile ci servirà solo per determinare le dimensioni:


<style>
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; background: #fff; }
</style>

Al caricamento potremo associare il click sul nostro bottone che animerà il div modificando il colore di sfondo:


$( “#effect” ).animate({backgroundColor: “#aa0000″,color: “#fff”}, 1000 );

Se poi vogliamo ripristinare la situazione possiamo usare una variabile state e gestire tutto nello stesso click:


$(function() {
var state = true;
$( “#button” ).click(function() {
if ( state ) {$( “#effect” ).animate({backgroundColor: “#aa0000″,color: “#fff”}, 1000 );}
else {$( “#effect” ).animate({backgroundColor: “#fff”,color: “#000″}, 1000 );
}
state = !state;
});
});

L’esempio

Nov 062012
 

Proviamo alcuni effetti contenuti nella nota libreria jQuery UI.

Come prima cosa prepariamo nell’html della pagina un bottone e un elemento sul quale applicare il nostro effetto:


<a href=”#” id=”button”  class=”ui-state-default ui-corner-all”>Run Effect</a>
<div id=”effect”  class=”ui-widget-content ui-corner-all”>
<p>Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.</p>
</div>

Come si può notare  sia al link sia al div sono state applicate delle classi standard dei temi di jQuery UI per ottenere degli effetti un po’ più gradevoli dove questi sono supportati.

Lo stile è essenziale e nemmeno troppo significativo nel nostro esempio:


<style>
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; }
</style>

Mentre da non trascurare è l’inclusione del tema e delle librerie nell’head della nostra pagina:


<link rel=”stylesheet” href=”http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css” />
<script src=”http://code.jquery.com/jquery-1.8.2.js”></script>
<script src=”http://code.jquery.com/ui/1.9.0/jquery-ui.js”></script>

Quindi al caricamento dell’html possiamo mappare l’evento click sul link e lanciare l’animazione:


$(document).ready(function(){
$(“#button”).click(function() {
$(“#effect”)
…
})
});

L’animazione userà il metodo animate() di jQuery esteso da effetti presenti in jQuery UI:


.animate({height: “hide”}, 1500, “easeOutBounce”)

easeOutBounce mi serve per dare l’effetto “rimbalzo”

A questo punto aspettimao un momento prima di srotolare nuovemnte il nostro div:


.delay( 800 )
.animate({height: “show”}, 1500, “easeOutBounce”)

L’esempio

Oct 292012
 

Oltre che ordinare una lista con il drag&drop e salvare sul nostro server la nuova sequenza,

possiamo far eun’operazione analoga con due liste collegate fra di loro,

L’html dovrebbe risultare abbastanza intuitivo:


<ul id=”mialista_1″>
<li id=”lista_1″>Lista 1</li>
<li id=”lista_2″>Lista 2</li>
<li id=”lista_3″>Lista 3</li>
<li id=”lista_4″>Lista 4</li>
<li id=”lista_5″>Lista 5</li>
</ul>
<ul id=”mialista_2″>
<li id=”lista_6″>Lista 6</li>
<li id=”lista_7″>Lista 7</li>
<li id=”lista_8″>Lista 8</li>
<li id=”lista_9″>Lista 9</li>
</ul>

due liste sostanzialmente identiche formattate con un css:


#mialista_1{ margin:0; padding:0; list-style-type:none; width:150px; float:left; background-color:#09F;}
#mialista_1 li{ padding:5px; margin:5px;}
#mialista_2{ margin:0; padding:0; list-style-type:none; width:150px; float:left; background-color:#FC3; min-height:100px;}
#mialista_2 li{ padding:5px; margin:5px;}

è raccomandabile usare min-height per evitare che una lista, una volta svuotata, non possa più accogliere elementi.

Al document.ready creiamo due elementi sortable:


$(‘#mialista_1, #mialista_2′).sortable()

e soprattutto specifichiamo la possibilità di passare elementi da una lista all’altra:


connectWith:’.mialista’

all’evento stop, mandiamo al server, in modo molto schematico,

le nostre due liste:


var ordine1=$(‘#mialista_1′).sortable(‘serialize’);
var ordine2=$(‘#mialista_2′).sortable(‘serialize’);
$.get(‘data/inserisci2.php?’+ordine1,function(data){})
$.get(‘data/inserisci2.php?’+ordine2,function(data){})

Qui l’esempio