Howtoweb.it » jquery

Utilizzare JQuery UI Autocomplete con PHP e Mysql

Mauro Accornero — Fri, 25 Jun 2010 08:56:36 +0000

In questo articolo vedremo come integrare facilmente il widget autocomplete di Jquery UI all’interno di pagine dinamiche.

L’utilizzo è molto semplice, come prima cosa è necessario scaricare il pacchetto completo di Jquery UI compreso di tema personalizzato o standard e collegare i rispettivi files alla pagina dinamica.

Ora possiamo aggiungere l’elemento input che utilizzero per l’autocomplete, per comodità di selezione verrà aggiunto un id.

Per ciò che riguarda javascript iniziamo applicando un autocomplete base al campo input

$(function() {var myTags = ["tag1", "tag2", "anotherTag", "simpleTag"];
$("#tags").autocomplete({source: myTags});});

In questo caso settiamo come opzione “source” che specifica come sorgente l’array “myTags”.Per rendere dinamico l’autocomplete modifichiamo la sorgente con un file dinamico che si occuperà di effettuare la ricerca

 $("#tags").autocomplete({source: "tagSearch.php"});

Di seguito un esempio per tagSearch.php:

//creazione di un array vuoto
$return_arr = array();

//dati di accesso a mysql e al db
$dbhost = 'YOUR_SERVER';
$dbuser = 'YOUR_USERNAME';
$dbpass = 'YOUR_PASSWORD';
$dbname = 'YOUR_DATABASE_NAME';

//definisco la variabile di ricerca dell'utente
$term = $_GET("term");

//connessione al a mysql
$conn = mysql_connect($dbhost, $dbuser, $dbpass)
or die ('Impossibile connettersi a Mysql');
//selezione ddb
mysql_select_db($dbname);
//se connesso
if ($conn)
{
//query select
$fetch = mysql_query("SELECT * FROM tags WHERE MATCH(tagName) AGAINST('".$term."*')");
//loop dei dati
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
$row_array['value'] = $row['tagName '];
array_push($return_arr,$row_array);
}

}
//chiudo la connessione a mysql
mysql_close($conn);
//restituisco l'array in formato json
echo json_encode($return_arr);

La variabile $terms viene ricavata dall’url, l’autocomplete di Jquery UI richiama infatti il file search.php con la variabile term (es. search.php?term=ciao) ad ogni change nel campo input.Considerato che la variabile term viene aggiornata e inviata ad ogni change del campo ho utilizzato MATCH AGAINST nella query affinchè ad ogni richiesta mysql cerchi l’input dell’utente seguito da altro.Il risultato è che a fronte di una ricerca “a” verranno restituiti tutti i dati che iniziano per “a”, aggiungendo lettere verranno restituiti solo i dati che corrispondono ai criteri della ricerca.

L’autocomplete di JQuery UI prevede una vasta serie di opzioni con le quali è possibile manipolare i dati prensenti nell’input e nei risultati, creare una cache dai dati e customizzare aspetto e animazioni dell’input.Per maggiori informazioni consiglio una lettura della documentazione disponibile sulla pagina dedicata.

Realizzare select multilingue con Jquery

Mauro Accornero — Mon, 14 Jun 2010 05:00:25 +0000

In questo articolo vedremo come realizzare un selettore multilingue con html, css e jquery, per vedere l’ esempio completo visitate la demo.

Per questo tutorial ho utilizzato world-flags-sprite, una soluzione css che offre una vasta gamma di bandiere di numerosi stati attraverso la tecnica degli sprites css, consiglio vivamente questa soluzione che permette di aggiungere facilmente le immagini per nuove lingue.
Iniziamo creando un nuovo file html in cui inseriremo il nostro markup. L’esempio qui proposto è pensato in chiave statica ma può essere facilmente applicato anche a pagine dinamiche gestendo l’output del testo e delle classi.

HTML




Italy




Usa




England




France




Spain




Germany

Definiamo una lista non ordinata con all’interno degli elementi “li” che conterranno le singole lingue. In ogni singola voce definiamo un link che conterrà l’url al sito nella rispettiva lingua.In questo esempio ogni link rimanda ad una pagina fittizia a cui viene aggiunta una variabile per la selezione della lingua. Nel link inseriremo un elemento span che utilizzaremo come contenitore per l’immagine della bandiera e il testo della lingua.

Le classi presenti sull’elemento “ul” sono relative al layout della lista (.langSelect) e al template applicato (“.black”,”.white” oppure “.grey”). Le classi “.f16″ e “flag” sono relative a flags16.css e servono per mostrare l’immagine delle rispettive bandiere.

CSS

La prima parte del css è dedicata al template. Colori, bordi e immagini di fondo sono gestiti dalle classi “.black” , “.white” e “.grey”.

/*black theme*/
.black{background-color:#000;border:1px solid #444;}
.black li:first-child{background-position:right top;}
.black a{color:#fff;}
.black a:hover{background:#111;}
.black li:first-child + li{border-top:1px solid #444;}
/*white theme*/
.white{background-color:#eee;border:1px solid #bbb;}
.white li:first-child{background-position:right -25px;}
.white a{color:#333;}
.white a:hover{background:#ddd;}
.white li:first-child + li{border-top:1px solid #bbb;}
/*grey theme*/
.grey{background-color:#ccc;border:1px solid #eee;}
.grey li:first-child{background-position:right -50px;}
.grey a{color:#000;}
.grey a:hover{background:#999;}
.grey li:first-child + li{border-top:1px solid #aaa;}

La seconda parte del css gestisce il layout della lista definendo dimensioni, spaziature e larghezza.

.langSelect{
    width:150px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    text-align:left;
    list-style:none;
}
.langSelect li{
    line-height:25px;
    position:relative;
}
.langSelect a{
    padding-left:35px;
    position:relative;
    text-decoration:none;
    display:block;
}
.langSelect li:first-child a:hover{
    background:transparent;
}
.langSelect li:first-child{
    background-image:url(../img/bg_lang_select.png);
    background-repeat:no-repeat;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}
.langSelect li:last-child a:hover{
    -moz-border-radius:0 0 10px 10px;
    -webkit-border-radius:0 0 10px 10px;
    border-radius:0 0 10px 10px;
}
.langSelect a span{
    width:16px;
    height:16px;
    position:absolute;
    top:50%;
    margin-top:-8px;
    left:10px;
}

In questo modo è possibile creare stili customizzati in poco tempo e senza dover metter mano al layout.

JQUERY E JAVASCRIPT

Prima di inizare con il codice javascript assicuratevi di aver incluso la libreria jquery nella pagina, la potete trovare sul sito di jquery o in alternativa caricarla attraverso le Google AJAX Libraries API.
Lo script può essere incluso sia internamente che esternamente alla pagina html.

Il codice verifica innanzitutto il caricamento della pagina.

 $(function() {

Una volta certo della presenza degli elementi nel DOM inizia nascondendo tutti gli elementi “li” successivi al primo.

$(“.langSelect li:first-child”).nextAll().hide();

La seguente istruzione verifica l’hover del mouse sulla lista.

 $(".langSelect").hover(function(){

Al mouseover anima gli elementi successivi al primo “li” mostrandoli.

 $(this).find("li:first-child").nextAll().not(":animated").slideDown(500);

Mentre al mouseout li nasconde

 $(this).find("li:first-child").nextAll().not(":animated").slideUp(500);

Una piccola nota su questo passaggio, è possibile notare l’utilizzo di .not(“:animated”) questa aggiunta impedisce che le animazioni partano o si ripetano quando gli elementi sono ancora animati.
Una volta completate le istruzioni sull’animazione definiamo il codice da eseguire al click della singola voce.

 $(".langSelect li").click(function(){

Come prima cosa è necessario verificare se la voce cliccata sia quella già selezionata.

 if($("li").index(this) == 0){

in quel caso annulliamo la chiamata del link e non eseguiamo ulteriori istruzioni

 return false;

In questo caso return false sull’elemento li annulla la chiamata del link al suo interno impedendo la chiamata alla pagina su cui l’utente già si trova.
Nel caso l’utente clicchi su una lingua diversa da quella selezionata spostiamo questa voce come prima della lista.

 $(this).prependTo($(this).parent("ul"));

Subito dopo animo il menu per nascondere le altre lingue.

 $(this).parent("ul").find("li:first-child").nextAll().slideUp(400,

E aggiungo una funzione di callback che al completamento dell’animazione rimanda l’utente all’url presente nel link della lingua cliccata.

 function (){
 location.href = $(this).find("a").attr("href");
 });

Per concludere annullo la chiamata del link tradizionale ed evitare l’immediata chiamata alla pagina in questione.

 return false;

Per vedere l’ esempio completo visitate la demo.

Integrare le API di Youtube con PrettyPhoto

Mauro Accornero — Mon, 10 Aug 2009 05:00:34 +0000

L’integrazione del video nei siti web è ormai diventata una pratica comune, l’inserimento in una pagina web è molto semplice soprattutto se supportato da un servizio che ospita e gestisce i contenuti video come Youtube.

Nell’articolo di oggi mostrerò una semplice integrazione tra le Youtube API e il plugin per JQuery Prettyphoto per ottenere una galleria di video in stile Youtube da inserire nella pagina del proprio sito.

Le Youtube API non sono altro che librerie messe a disposizione degli sviluppatori per gestire con semplicità i contenuti di Youtube su un sito esterno. E’ possibile integrarle con diversi linguaggi e tecnologie, nell’esempio di oggi vedremo com’è possibile utilizzarle con javascript. Per ulteriori informazioni è possibile consultare la relativa documentazione.

PrettyPhoto è un plugin per jquery simile in tutto e per tutto a Lightbox (per prototype e scriptaculus) ulteriori informazioni sono disponibili sul sito ufficiale di PrettyPhoto.

Per questa soluzione sono partito dall’esempio fornito da Youtube nella rispettiva documentazione. Lo script proposto carica dal canale desiderato le thumbnails dei video e il rispettivo titolo, caricando inoltre il player che esegue il filmato sul quale viene cliccato.

Nel nostro caso desidero mantenere le thumbnails e i titoli ma preferisco evitare che il player occupi spazio nella pagina, modificherò quindi lo script per permettere l’apertura del video in un div grazie al plugin PrettyPhoto.

Per iniziare creiamo la nostra pagina html, avendo l’accortezza di lasciare un div con id nel quale verranno caricate le thumbnails dei video.

Caricare i dati da Youtube

Ora possiamo iniziare a creare il javascript che richiamerà i dati necessari da Youtube.

Per prima cosa inseriamo un link alle api di youtube, dove specificheremo che cosa selezionare (nel nostra caso andremo a prelevare tutti i video del canale di GoogleDevelopers).

Questo link ci permette di selezionare tutti i feed di un determinato utente (GoogleDevelopers) esenguendo una funzione javascript di callback (getVideos).

Andiamo quindi a definire la nostra funzione nella pagina.

All’interno di questa funzione filtreremo i dati e li utilizzeremo per ottenere l’output desiderato.

Per prima cosa definiamo un array per i dati ottenuti

var feed = data.feed;
var entries = feed.entry || [];

Ora possiamo estrarre i dati utilizzando un ciclo for

for (var i = 0; i < entries.length; i++) {
}

All’interno del quale ricaviamo i dati che ci servono

var entry = entries[i];
var title = entry.title.$t.substr(0, 35);
var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
var videoUrl = entries[i].media$group.media$player[0].url;

Per gestire in maniera corretta l’output salviamo i dati relativi ai feed all’interno delle rispettive vairabili, in seguito raggruppiamo i dati con il codice html necessario all’impaginazione.

html.push('',
'','',
'',title,'...
');

Il risultato per ogni output del ciclo nell’html sarà:






[TITOLO VIDEO]...

L’ultima riga stamperà il risultato nell’elemento con l’id specificato

document.getElementById('videoContainer').innerHTML = html.join('');

Aggiungiamo PrettyPhoto

Avendo già inserito gli attributi rel per i link non resta che aggiungere Jquery e il plugin PrettyPhoto nella pagina

ed inserire le opzioni per il desiderato funzionamento di PrettyPhoto

$(function() {
$("a[rel^='prettyPhoto']").prettyPhoto({
animationSpeed: 'normal',
padding: 40,
opacity: 0.35,
showTitle: true,
allowresize: true,
counter_separator_label: ' di ',
theme: 'light_square',
callback: function(){}
});
});

Il risultato è visibile in questa demo.

Realizzare slideshow complessi con jquery cycle

Mauro Accornero — Mon, 27 Jul 2009 12:10:44 +0000

Tempo fa avevamo parlato di come realizzare un semplice slideshow con jquery, oggi vediamo come creare in poco tempo uno slideshow completamente customizzabile e compatibile grazie a jquery e jquery cycle.

Cos’è jquery cycle?

Jquery cycle è una libreria per jquery che permette la realizzazione di slideshow con molteplici effetti di transizione garantendo una buona customizzazione a livello funzionale tramite le opzioni messe a disposizione dagli sviluppatori.

Jquery cycle è scaricabile da qui.

Come funziona?

Per iniziare creiamo una pagina html ed inseririamo le immagini della nostra galleria all’interno di un div, al quale daremo delle regole css per dimensioni e stile.

Fatto questo colleghiamo la nostra pagina html alla libreria di jquery e al plugin di jquery cycle.

(ovviamente i percorsi andranno definiti in base alla struttura della cartella)

A questo punto inseriamo la funzione cycle che farà funzionare il nostro slideshow

In questo codice applichiamo la funzione cycle al div #photos definendo un effetto di transizione fade, una velocità di transizione di un secondo (speed: 1000) ed un timeout di due secondi (timeout:2000).

Per vedere la demo clicca qui.

Come aggiungere le thumbnails delle immagini

Per aggiungere le thumbnails delle immagini possiamo utilizzare l’opzione pager per ottenere una paginazione numerica delle immagini e la funzione di callback pagerAnchorBuilder per sostituire i numeri alle rispettive thumbnails.

Creiamo quindi un div #thumbnails dove andremo a collocare le immagini

Aggiungiamo quindi l’opzione pager per dichiarare a jquery cycle dove desideriamo collocare le anteprime

$('#photos').cycle({
  fx:     'fade',
  speed:  1000,
  timeout: 2000,
  pager:  '#thumbnails ul',
});

Per alleggerire l’esecuzione di javascript ho preferito aggiungere manualmente i tag

ma è possibile aggiungere questi tag attraverso jquery nel funzione pagerAnchorBuilder che andiamo ad aggiungere.

$('#photos').cycle({
fx:     'fade',
speed:  1000,
timeout: 2000,
pager:  '#thumbnails ul', 

pagerAnchorBuilder: function(idx, slide) {
return '';
}
});

La funzione pagerAnchorBuilder la normale paginazione di jquery cycle con le immagini contenute nello slide show.

Questo permette di visualizzare l’immagine scelta cliccando sulla thumbnail, viene inoltre messa a disposizione la classe .activeSlide presente sull’immagine attualmente visualizzata.

Questa soluzione molto comoda renderizza però due volte la stessa immagine, appesantendo notevolmente la pagina, in un contesto dinamico sarebbe opportuno gestire le thumbnails lato server per evitare ridimensionamenti da css che non riducono il peso dell’immagine.

Per vedere la demo clicca qui

Aggiungere una navigazione direzionale

Oltre alle thumbnails potrebbe essere utile aggiungere la possibilità all’utente di passare alla foto successiva o di tornare a quella precedente.

Per farè ciò è sufficiente creare due link con id da associare a jquery cycle

e aggiungere le opzioni prev e next al nostro script

[...]
next:   '#next',
prev:   '#prev',
[...]

In questo modo i due link porteranno sempre all’immagine precedente o successiva.

Da notare che entrambi i link sono contenuti nel div #navPhotos a questo viene assegnato un posizionamento assoluto e uno z-index elevato poichè jquery cycle utilizza la proprietà z-index per mostrare le immagini. Diventa dunque indispensabile settare uno z-index che sia sempre superiore al numero di immagini per poszionare i due link sopra lo slideshow.

Per vedere la demo clicca qui

Aggiungere una descrizione alle immagini

Per aggiungere una descrizione alle immagini è possibile sfruttare l’attributo alt del tag .

Con l’aiuto dell opzioni before e after è possibile richiamare delle funzioni prima e dopo il caricamento dell’immagine.

Definiamo quindi una div #description dove andremo ad inserire le descrizioni

E aggiungiamo al nostro script le opzioni after e before che richiameranno le funzioni onAfter e onBefore

[...]
before:  onBefore,
after:   onAfter,
[...]

Ora definiamo le funzioni onBefore e onAfter per caricare il testo contenuto nell’attributo alt del tag

function onBefore() {
  $('#description p').fadeOut('1000');
}
function onAfter() {
  $('#description p').fadeIn('1000');
  $('#description').html('' + this.alt + '');
}

Queste due funzioni andranno definite al di fuori della funzione cycle poichè vengono valutate ad ogni caricamento della singola immagine.

Per il div #description è stata creata una regola css simile a #navPhotos in modo che la descrizione sia posta sopra lo slideshow con uno z-index superiore al numero di immagini presenti.

Per vedere una demo clicca qui

In conclusione

Come abbiamo visto jquery cycle mette a disposizione un numero elevato di opzioni per realizzare slideshow, è possibile inoltre aggiungere dei pulsanti per mettere in pausa o far ripartire lo slideshow, caricare contenuto diverso da immagini, settare un tempo di delay per sincronizzare più slideshow e customizzare i numerosi effetti presenti.

Per maggiori informazioni sulle possibilità di customizzazione esiste una sezione demo ed esempi sul sito di jquery cycle sicuramente molto utile.

Inoltre grazie alla gestione dello stile da css e al semplice markup è possibile creare valide alternative senza javascript per migliorarne l’accessibilità rendenfo questa una delle migliori soluzioni per realizzare slideshow in contesti statici e dinamici.

Realizzare una semplice galleria immagini con jquery

Mauro Accornero — Mon, 01 Jun 2009 05:00:52 +0000

Realizzare una galleria immagine è un’operazione abbastanza comune per il buon web designer, di norma la sfida più grande consiste nel rinnovarsi e nell’aggiungere un approccio creativo ai vari progetti.

Per trovare una facile applicazione alle soluzioni più creative ci viene incontro jquery che mette a disposizione numerosi effetti e semplifica notevolemente l’utilizzo di javascript.

Vediamo come realizzare una semplice galleria di immagini in pochi passi.

Per prima cosa creiamo la nostra pagina html ed inseriamo all’interno un div con i relativi contenuti (nel nostro caso le immagini della galleria).

Una struttura così semplice ci permetterà in seguito di creare alternative accessibili o per media che non supportano questa soluzione.

Fatto questo partiamo con jquery, come sempre iniziamo definendo la partenza dello script al caricamento della pagina con la funzione ready.

$(document).ready(function(){

});

Come seconda mossa definiamo un evento che porterà l’utente a vedere l’immagine successiva. Nel nostro caso il click sul div (o meglio sulla prima immagine visualizzata).

$(document).ready(function(){
$('div#contenitore div').click(function () { 

});
});

Ora possiamo definire il codice che farà scomparire l’immagine attuale e mostrerà l’immagine successiva

$(this).fadeOut(200, function() {$(this).next().fadeIn( 200);});

In questo modo definiamo un fadeOut sul div contenitore dell’immagine su cui abbiamo appena cliccato e definiamo come funzione di callback un fadeIn sull’immagine successiva.

Rimane un unico problema da risolvere, quando si arriva all’ultima immagine questa deve scomparire e far apparire la prima. Per risolvere utilizziamo un semplice if che valuterà se l’elemento cliccato è l’ultimo del div oppure no.

if ($(this).is(":last-child")) {
}else{
}

Per vedere lo script in funzione guarda questo esempio.

Realizzare un rollover sull’immagine con Jquery in meno di un minuto

Mauro Accornero — Tue, 12 May 2009 05:00:42 +0000

Realizzare un effetto rollover per le immagini di un sito è un’operazione molto semplice ma diventa complessa quando dobbiamo applicare questo effetto ad un numero elevato (e soprattutto differente) di elementi.

Come prima cosa aggiungiamo un link nella pagina alla libreria di jquery.

Iniziamo il nostro codice con $(document).ready che attenderà il caricamento completo della pagina prima di eseguire il codice

$(document).ready(function() {

)};

Al suo interno iniziamo a definire la prima funzione

$("img").each(function() {
rollsrc = $(this).attr("src");
rollON = rollsrc.replace(/.jpg$/ig,"_over.jpg");
$("").attr("src", rollON);
});

Questa funzione salva il valore dell’attributo src nella variabile rollsrc per ogni immagine presente nella pagina, nella variabile rollON utilizza l’url dell’immagine e aggiunge la stringa “_over”. Nell’immagine dell’esempio cliccami.jpg diventa cliccami_over.jpg. Questa funzione serve per precaricare le immagini prima che siano utilizzate nelle successive funzioni.

$("a").mouseover(function(){
imgsrc = $(this).children("img").attr("src");
matches = imgsrc.match(/_over/);
if (!matches) {
imgsrcON = imgsrc.replace(/.jpg$/ig,"_over.jpg");
$(this).children("img").attr("src", imgsrcON);
}
});

La seconda funzione inizia all’over del mouse sul link, verifica che l’elemento sia figlio dell’elemento e salva in una variabile l’url, verifica se all’interno della variabile esiste la parte “_over” in caso negativo sostiutisce il nome dell’immagine da nomeimmagine.jpg a nomeimmagine_over.jpg. Questo serve per evitare che javascript ripeta l’effetto rollover se il mouse è già sopra l’immagine.

Come ultima funzione definiamo il rispristino dell’url con l’evento mouseout

$("a").mouseout(function(){
$(this).children("img").attr("src", imgsrc);
});

Sarà sufficiente questa funzione per applicare un’effetto rollover su ogni immagine linkata di una pagina. Basterà fare attenzione a salvare le immagini per l’effetto rollover con con lo stesso nome ed in aggiunta “_over” prima del formato del file.

Per un vedere lo script in azione vedi l’esempio.

Realizzare un contatore di battute con Jquery

Mauro Accornero — Thu, 23 Apr 2009 05:00:56 +0000

Molto tempo fa realizzai un contatore di battute per un cms che limitava il testo inseribile dall’utente. Oggi questa soluzione è diventata obsoleta e anche poco accessibile, ma visto il successo di twitter che limita i caratteri inseribili a 140 e l’integrazione possibile sulle pagine html potrebbe tornare utile un esempio basato su Jquery.

VEDI ESEMPIO

Lo scopo dello script è quello di verificare la lunghezza del testo inserito dall’utente e mostrare quanti caratteri abbia ancora a disposizione.

Per realizzare questo utilizzeremo un textarea che ci mette a disposizione più spazio per testi lunghi ma la soluzione è ugualmente applicabili ad un campo .

Iniziamo con Jquery e definiamo document ready affinchè lo script inizi al caricamento completo della pagina.

(document).ready(function(){});

Definiamo una variabile battute che definirà la lunghezza massima del testo

var battute = 140;

In origine l’intezione era quella di definire l’attributo maxlenght su <textarea> ma nelle specifiche W3C questo elemento non supporta tale attributo. Nel caso si definisse potremmo prelevare il valore con Jquery ed inserirlo nella variabile battute.

In seguito definiamo il testo che comunicherà all’utente quante battute a disposizione gli restano.

$('textarea').after("
Hai ancora "+ (battute - $('textarea').val().length)+" caratteri disponibili
");

La funzione after inserisce un contenuto dopo l’elemento specificato. Nel nostro caso inseriamo un paragrafo che riporta all’utente quante battute restano. In questo modo nel caso l’utente aggiorni la pagina e rimanga del testo nel textarea, il valore sarà aggiornato al numero di caratteri corrente.

Ora possiamo definire un evento sul keyup che servirà per aggiornare il valore.

$('textarea').keyup(function(){})

Al rilascio del mouse sul textarea avverranno le azioni successivamente dichiarate.

if($(this).val().length > battute){
$(this).val($(this).val().substr(0, battute));
}

Con questo controllo verifichiamo se il numero di battute è superiore a quello specificato, nel caso Jquery accorcia il testo inserito al numero di battute dichiarato al rilascio del pulsante.

Nell’ultima parte definiamo il messaggio all’utente con le battute rimanenti.

$(this).parent().find('p.avviso').html(
"Hai ancora "+ (battute - $(this).val().length)+" caratteri disponibili
");

L’inserimento dell’ultimo paragrafo avviene totalmente da jquery nel caso in cui javascript fosse disattivato non ci sarebbe alcun controllo sul numero di caratteri inserito.

Come tutti i controlli sui form javascript ha il solo scopo di facilitare l’inserimento e di comunicare in maniera amichevole con l’utente le specifiche d’inserimento, un controllo sui dati inseriti deve avvenire sempre lato server per ragioni di sicurezza.

VEDI ESEMPIO

Come realizzare slide animate con jquery

Mauro Accornero — Fri, 17 Apr 2009 05:00:40 +0000

Succede spesso che chi desidera un sito web voglia mostrare nelle pagine qualche animazione e richiede quindi un sito totalmente in flash. L’utilizzo di questa tecnologia va valutata attentamente in quanto comporta dei pro e dei contro, prima di valutare questa scelta possiamo dunque cercare delle alternative come ad esempio jquery.

Cos’è jquery?

Jquery è una libreria javascript che ci mette a disposizione una serie di funzioni che possiamo utilizzare in maniera comoda e compatibile nelle pagine web.

Esistono molte librerie javascript ed ognuna manifesta la propria “attitudine” verso determinate operazioni, per iniziare possiamo vedere come jquery possa tornare utile per “dare movimento” alle nostre pagine.

Iniziamo creando una pagina html con il seguente codice:



Lorem ipsum[...]
Lorem ipsum[...]
Lorem ipsum[...]



Primo
Secondo
Terzo

La struttura è identica a quella utilizzata per un layout a tre colonne e le differenze appaiono più evidenti nel css.

div#contenitore{
margin:0px auto;
width:600px;
height:300px;
background-color:#ffffff;
overflow:hidden;
}

div#contenuto{
margin:0px;
width:1800px;
height:300px;
background-color:#ffffff;
float:left;
display:inline;
}

div#contenuto div#primo{
margin:0px;
width:600px;
height:300px;
background-color:#cc0000;
float:left;display:inline;
}

div#contenuto div#secondo{
margin:0px;
width:600px;
height:300px;
background-color:#ffffff;
float:left;
display:inline;
}

div#contenuto div#terzo{
margin:0px;
width:600px;
height:300px;
background-color:#cccccc;
float:left;
display:inline;
}

div#menu{
margin:0px auto;
width:600px;
background-color:#ebebeb;
}

Notiamo subito che il contenitore ha settata una proprietà overflow:hidden e la larghezza dei contenuti supera quella dell’elemento padre. Questa scelta ci serve per ottenere l’effetto slide dove al click di ogni link avremo una pagina che si muove e fa apparire la seguente.

Per animare le pagine è sufficiente inserire nella pagina un link alla libreria di jquery e qualche riga per definire le azioni desiderate.

Il codice inizia con

$(document).ready(function()

Questa funzione serve a capire quando la pagina è caricata ed è possibile eseguire lo script, per chi usa javascript è l’equivalente di onload.

$("#menu a.primo").click(function (event) {

Con questa funzione definiamo un evento con il quale far partire l’azione, al click del link con classe “primo” nel menu, javascript farà partire l’azione

$("#contenuto").animate({ marginLeft: "0px"}, 500 );

Con l’utilizzo della funzione animate, modifichiamo il margine sinistro del div contenuto facendolo muovere nella posizione corrispondente al contenuto desiderato. Avendo i tre div larghezza di 600px sarà sufficiente sottrarre 600px di margine al div con id contenuto per mostrare il seguente div.

VEDI ESEMPIO

L’ultima parte del codice ha come scopo quello di inibire il link in modo che al click non il browser non vada in un altra pagina.

event.preventDefault();

Questo ci permette di ottenere un’alternativa accessibile al sito per coloro che hanno i javascript disabilitati, al click sul link si aprirà una pagina uguale ma con il margine sinistro di contenitore settato per la visualizzazione del contenuto desiderato.

E’ inoltre possibile sfruttare animate per animare il contenuto sia in orizzontale che in verticale.

VEDI ESEMPIO CON SLIDE VERTICALI

VEDI ESEMPIO CON SLIDE ORIZZONTALI

Lo script può essere notevolmente migliorato agendo sui tag ed evitando di impostare troppe classi o id, inoltre è possibile definire un ciclo per creare un array degli elementi nella pagina e applicare l’effetto ad ogni link del menu associandolo al rispettivo div con contenuto. Prossimamente vedremo come applicare queste modifiche ed utilizzare jquery per migliorare l’esperienza dell’utente sulle nostre pagine web.