tag:blogger.com,1999:blog-89262118023670363672024-03-13T21:21:45.340-07:00Incontri tecnologiciPromemoria di "incontri tecnologici" interessantiDanilohttp://www.blogger.com/profile/18260827863860854440noreply@blogger.comBlogger11125tag:blogger.com,1999:blog-8926211802367036367.post-64404466787477160562011-09-28T07:04:00.000-07:002011-12-12T08:16:14.989-08:00jQuery-AJAX con $.get() e $.post()Pagina in aggiornamento<br />
<br />
$.post(<em> url [, data] [, success(data, textStatus, jqXHR)] [, dataType]</em> )<br />
<br />
<strong>url</strong>: stringa contenente l'url verso il quele è inviata la richiesta.
<br />
<strong>data</strong>: stringa o array chiave:valore contenente i dati da inviare al server insieme alla richiesta.
<br />
<strong>success(data, textStatus, jqXHR)</strong>: callback function che viene eseguita se la richiesta ha avuto successo.
<br />
<strong>dataType</strong>: Tipo di dato in risposta alla richiesta. Default: Intelligent Guess (xml, json, script, text, html).Danilohttp://www.blogger.com/profile/18260827863860854440noreply@blogger.com0tag:blogger.com,1999:blog-8926211802367036367.post-188816203757461852011-09-27T07:02:00.000-07:002011-12-12T07:54:50.616-08:00jQuery-AJAX con $.load()La chiamata AJAX con il metodo $.load() carica codice HTML contenuto o generato da un file remoto in un elemento (solitamente un "div") della pagina HTML.<br />
La richiesta è di default di tipo GET ma è possibile utilizzare il POST impostando i dati della chiamata con il formato coppia chiave/valore.<br />
<br />
La sintassi è la seguente:
<br />
<pre>$(document).ready(function(){
$("a#link_che_attiva_la_chiamata_ajax").click(function(){
$("div#dove_inserisco_il_codice_ricevuto").load(
url,
{data},
function(){
// funzione callback da eseguire alla fine
});
});
});
</pre>
I parametri che possono essere gestiti sono:<br />
<table align="center" border="1"><tbody>
<tr><td align="center"><strong>Nome Opzione</strong></td><td align="center"><strong>Tipo </strong></td><td align="center"><strong>Default</strong></td><td align="center"><strong>Descrizione </strong></td></tr>
<tr><td align="center">url</td><td align="center">String</td><td align="center"></td><td>L'URL della pagina contenente l'HTML da caricare.</td></tr>
<tr><td align="center">data (opzionale)</td><td align="center">Map, String</td><td></td><td>Coppia di dati in formato chiave/valore. Sono i dati da inviare al server. Può essere anche passata una stringa come dato. Quando è utilizzata una stringa i dati sono passati tramite il metodo GET, se invece si usa il formato chiave/valore allora il metodo utilizzato è il POST. </td></tr>
<tr><td align="center">callback (opzionale)</td><td align="center">Callback</td><td align="center"></td><td>Funzione richiamata quando la chiamata AJAX è completata, anche se non ha successo. Ha tre parametri: la risposta, lo stato e l'oggetto XMLHttpRequest.<br />
La callback può anche essere utilizzata senza paramentri se questi non servono.<br />
Es: <em>function (responseText, textStatus, XMLHttpRequest)</em>. </td></tr>
</tbody></table>
<br />
Vediamo un esempio costituito dal file HTML contenente la chiamata "chiamante.html" e il file chiamato "remoto.php".<br />
<br />
File "chiamante.html":
<pre class="brush:html">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery - Test funzione load()</title>
<script type="text/javascript" src="/scripts/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a#ancoraAjax").click(function(){
$("div#contenutoAjax").load(
"remoto.php",
{numero: 10, stringa: 'pippo'},
function(){
alert('dati caricati');
});
});
});
</script>
</head>
<body>
<a id="ancoraAjax" href="#">mostra</a>
<div id="contenutoAjax"></div>
</body>
</html>
</pre>
<br />
Il file "chiamante.html", attraverso la funzione $(...).load(...) effettua una chiamata ajax al file "remoto.php" passandogli due valori (in formato chiave/valore), inserisce nel div "contenutoAjax" il contenuto html che riceve in risposta e alla fine esegue la funzione "alert" che avverte che i dati sono stati inseriti.
<br />
File remoto.php:
<pre class="brush:php">
<?
$stringa = $_REQUEST["stringa"];
$numero = $_REQUEST["numero"];
echo '<p>hello mondo<br />Stringa:'.$stringa.'<br />Numero:'.$numero.'</p>';
?>
</pre>
Il file "remoto.php", una volta chiamato legge i parametri passati in modalità post (in quanto passati in formato chiave/valore) e crea il codice html da restituire alla chiamata.
<br />
<br />
La guida ufficiale può essere consultata all'indirizzo <a href="http://docs.jquery.com/Ajax/jQuery.ajax"><span style="color: #2288bb;">http://docs.jquery.com/Ajax/jQuery.ajax</span></a>Danilohttp://www.blogger.com/profile/18260827863860854440noreply@blogger.com0tag:blogger.com,1999:blog-8926211802367036367.post-91521427429998971092011-09-26T06:42:00.000-07:002011-12-12T07:56:32.241-08:00jQuery-AJAX con $.ajax()Il framework jQuery mette a disposizione diversi metodi per implementare AJAX.<br />
<br />
Incominciamo dal metodo più articolato <strong>$.ajax(options)</strong> che restituisce XMLHttpRequest e presenta la seguente implementazione: <br />
<br />
<pre class="brush:js">$.ajax({
nome_opzione1: valore_opzione1,
nome_opzione2: valore_opzione1,
...
nome_opzioneN: valore_opzioneN
})
</pre>
<br />
Ecco di seguito una tabella delle principali options che possono essere utilizzate:<br />
<table border="1"><tbody>
<tr><td align="center"><strong>Nome Opzione</strong></td><td align="center"><strong>Tipo </strong></td><td align="center"><strong>Default</strong></td><td align="center"><strong>Descrizione </strong></td></tr>
<tr><td>async</td><td>Boolean</td><td align="center">true</td><td>Imposta se la chiamata deve essere asincrona (default) o sincrona. </td></tr>
<tr><td>beforSend </td><td>Function </td><td></td><td>Modificare XMLHttpRequest, passato come argomento, prima che sia inviato.<br />
Es: <em>function (XMLHttpRequest){....}</em></td></tr>
<tr><td>cache</td><td>Boolean</td><td align="center">true (false per dataType "script" e "jsonp")</td><td>Se settato su false forza la pagina a non utilizzare la cache del browser </td></tr>
<tr><td>complete </td><td>Function </td><td></td><td>Funzione da eseguire dopo che la richiesta è finita. Tale funzione è eseguita <u>dopo</u> che le funzioni di successo e errore sono eseguite.<br />
Es: <em>function (XMLHttpRequest, textStatus){.....}</em></td></tr>
<tr><td>contentType</td><td>String </td><td align="center">"application/x-www-form-urlencoded" </td><td>Imposta il conten-type dei dati inviati al server. Il valore di default va bene quasi in ogni caso. </td></tr>
<tr><td>data</td><td>Object, String</td><td></td><td>Dati inviati al server. L'oggetto deve essere una coppia chiave/valore. Essi sono convertiti in stringhe se non lo sono già. I dati sono inseriti nell'URL e possono essere prelevati tramite il metodo GET. Si possono passare anche array. </td></tr>
<tr><td>dataType</td><td>String</td><td align="center">xml o html</td><td>Tipo di dato che ci si aspetti ritorni il server. Se non è specificato si basa sul MIME type della risposta.<br />
Tipi ammessi: "xml", "html", "script", "json", "jsonp" e "text". </td></tr>
<tr><td>error</td><td>Function</td><td></td><td>La funzione da eseguire nel caso la richiesta fallisse. La funzione ha 3 argomenti: l'oggetto XMLHttpRequest, una stringa che descrive l'errore e un'exception object.<br />
Es: <em>function (XMLHttpRequest, textStatus, errorThrown){.....} </em></td></tr>
<tr><td>ifModified </td><td>Boolean </td><td align="center">false</td><td>La richiesta ha successo solo se la risposta è cambiata dall'ultima richiesta, controllando tale informazione nell'header. Normalmente questo non è così, perciò di default il valore è false e si ignora l'header. </td></tr>
<tr><td>password</td><td>String </td><td></td><td>Password da usare in risposta ad una richiesta di autenticazione HTTP.</td></tr>
<tr><td>success </td><td>Function</td><td></td><td>La funzione da eseguire quando la chiamata ha successo. La funzione ha due argomenti: i dati ritornati dal server formattati in accordo con il dataType; e una stringa che descrive lo stato.<br />
Es: <em>function (data, textStatus) {....}</em></td></tr>
<tr><td>timeout </td><td>Number</td><td></td><td>Timeout locale in millisecondi per la richiesta. Questo sovrascrive il valore globale settato tramite $.ajaxSetup(). Questa funzione è molto utile per differenziare i timeout delle varie richieste </td></tr>
<tr><td>type</td><td>String </td><td align="center">"GET"</td><td>Il tipo di richiesta ("POST" o "GET"). Anche altri metodi HTTP sono utilizzabili (PUT, DELETE, ...) ma non tutti i browser li supportano. </td></tr>
<tr><td>url</td><td>String</td><td align="center">pagina corrente</td><td>L'URL da chiedere. Esso deve essere una stringa e NON un Location Objec.<br />
SI: <em>document.location.href</em><br />
NO: <em>document.location</em></td></tr>
<tr><td>username</td><td>String </td><td></td><td>Username da usere in risposta ad una richiesta di autenticazione HTTP.</td></tr>
</tbody></table>
<br />
Vediamo un esempio in cui il file "chiamante.html" effettua una chiamata ajax al file "remoto.php" passandogli due parametri; il file "remoto.php" crea il codice html con i parametri passati e lo restituisce al file "chiamante.html"; al ricevimento del codice il file chiamante lo inserisce nel div "contenutoAjax" e avverte che il compito è stato fatto.
<br /><br />
File chiamante.html
<pre class="brush:html">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery - Test funzione ajax()</title>
<script type="text/javascript" src="/scripts/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a#ancoraAjax").click(function(){
$.ajax({
type: "POST",
url: "remoto.php",
data: "numero=10&stringa=Boston",
success: function(html){
$("#contenutoAjax").append(html);
alert('fatto');
}
});
});
});
</script>
</head>
<body>
<a id="ancoraAjax" href="#">mostra</a>
<div id="contenutoAjax"></div>
</body>
</html>
</pre>
File remoto.php
<pre class="brush:php">
<?
$stringa = $_REQUEST["stringa"];
$numero = $_REQUEST["numero"];
echo '<p>hello mondo<br />Stringa:'.$stringa.'<br />Numero:'.$numero.'</p>';
?>
</pre>
La guida ufficiale può essere consultata all'indirizzo <a href="http://docs.jquery.com/Ajax/jQuery.ajax">http://docs.jquery.com/Ajax/jQuery.ajax</a>Danilohttp://www.blogger.com/profile/18260827863860854440noreply@blogger.com0tag:blogger.com,1999:blog-8926211802367036367.post-19643411387898863472011-09-23T06:04:00.000-07:002011-12-09T06:27:17.666-08:00jQuery - Effetti fadingCon effetto fading si intende quella trasformazione di un elemento della pagina HTML che, lavorando sull'opacità (che varia da 0 a 1), prococa la sua scomparsa o apparizione senza modificarne posizione e dimensione.<br />
<br />
I metodi che jQuery mette a disposizione per effettuare il fading di un oggetto sono fadeIn(), fadeOut() e fadeTo().<br />
<br />
Anche in questo caso come per i metodi relativi agli effetti grafici è possibile
definire la durata dell'effetto attraverso i valori predefiniti "slow", "normal"
e "fast" o impostando direttamente il tempo in millisecondi.<br />
$("#div_fade").fadeIn(); // aumento dell'opacità dell'elemento con id
"div_fade" fino alla sua visibilità totale<br />
<br />$("#div_fade").fadeOut("fast"); // diminuzione dell'opacità dell'elemento con id "div_fade" fino alla sua scomparsa totale con durata "fast" dell'effetto <br />
<br />
$("#div_fade").fadeTo(1000, 0.50); // modifica dell'opacità dell'elemento con id "div_fade" fino al 50% in un tempo di 1 secondoDanilohttp://www.blogger.com/profile/18260827863860854440noreply@blogger.com0tag:blogger.com,1999:blog-8926211802367036367.post-72313487028100506612011-09-22T02:01:00.000-07:002011-12-09T02:16:24.861-08:00jQuery - Effetti di slidingGli effetti di sliding offrono la possibilità di muovere un elemento della pagina HTML a cascata verso l'alto, verso il basso o in modo "toogle".<br />
I metodi che il framework mette a disposizione sono slideDown(), slideUp() e slideToogle().<br />
<br />
Anche in questo caso come per i metodi show(). hide() e toogle() è possibile definire la durata dell'effetto attraverso i valori predefiniti "slow", "normal" e "fast" o impostando direttamente il tempo in millisecondi.<br />
<br />
$("#div_mobile").slideDown(); // slide verso il basso dell'elemento con id "div_mobile"<br />
$("#div_mobile").slideUp("fast"); // slide verso l'alto dell'elemento con id "div_mobile" con durata "fast"<br />
$("#div_mobile").slideToogle(2000); // slide in modo alternato verso l'alto e verso il basso dell'elemento con id "div_mobile" con durata 2 secondiDanilohttp://www.blogger.com/profile/18260827863860854440noreply@blogger.com0tag:blogger.com,1999:blog-8926211802367036367.post-46239980244015715002011-09-21T01:35:00.000-07:002011-12-09T06:29:27.629-08:00jQuery - Mostra e nascondiTra gli effetti grafici che il framework jQuery mette a disposizione dello sviluppatore i primi che troviamo danno la possibilità di mostrare, nascondere o l'alternare dei due effetti di un elemento strutturale della pagina.<br />
<br />
Per mostrare un elemento viene utilizzato il metodo show().<br />
<br />
$("p").show(); // mostra gli elementi "p" nascosti delle pagina<br />
<br />
Per nascondere un elemento viene utilizzato l metodo hide().<br />
<br />
$("p").hide(); // nasconde gli elementi "p" della pagina<br />
<br />
Per alternare mostra e nascondi vine eutilizzato il metodo toggle().<br />
<br />
$("p").toggle(); // mostra e nasconde in successione gli elementi "p" della pagina.<br />
<br />
E possibile manipolare la durata temporale dell'effetto mostra o nascondi fornendo all'effetto i valori predefiniti "slow", "normal" e "fast" o il valore di durata in millisecondi.<br />
<br />
$("p").show("slow"); // mostra gli elementi "p" nascosti delle pagina con durata slow<br />
$("p").toggle(1000); // mostra o nasconde gli elementi "p" nascosti delle pagina con durata 1 secondo<br />
<br />
<u>Altri esempi</u><br />
<br />
<em>I esempio</em>: cliccando sull'elemento con id "pulsante" modifica la visibilità dell'elemento "mostranascondi" con una durata dell'effetto di 2 secondi.<br />
$("#pulsante").click(function () {<br />
$("#mostranascondi").toggle(2000); //2 secondi<br />
});Danilohttp://www.blogger.com/profile/18260827863860854440noreply@blogger.com0tag:blogger.com,1999:blog-8926211802367036367.post-34969396248580717612011-09-16T08:20:00.000-07:002011-12-09T23:24:00.133-08:00jQuery - I filtriOltre ai selettori già visti jQuery mette a disposizione altri strumenti per migliorare e semplificare le operazione di ricerca degli elementi su cui operare; questi elementi sono detti filtri e possiamo in base all'oggetto del filtraggio:<br />
<br />
<u>Filtri tramite parole chiave e contenuti</u><br />
Le parole chiave che possiamo utilizzare sono:<br />
<ul>
<li>odd o even per selezionare gli elementi pari o dispari</li>
<li>first o last per lesezionare il primo o l'ultimo elemento</li>
<li>lt(n), gt(n) o eq(n) se si volgiono selezionare tutti gli elementi rispettivamente presecenti successivi o uguali all'ennesimo (n) elemento.</li>
<li>first-child o last-child seleziona il primo o l'ultimo figlio di un elemento</li>
<li>only-child seleziona gli elementi singoli</li>
<li>nth-child seleziona elementi figli in base al contenuto tra parentesi</li>
<li>not() seleziona elementi in base all'assenza di contenuti </li>
<li>has(), contain(), hidden seleziona elementi in base a contenuti o attributi </li>
</ul>
Ogni parola chiave deve essere preceduta dal tag di riferimento e dal carattere ":"<br />
<pre class="brush:js">
// Seleziono l'ultima riga della tabella
$("tr:last");
// seleziona i figli dispari degli elementi "li"
// contenuti nell'elemento "ul" con id "navglob"
$("ul#navglob li:nth-child(odd)");
// seleziono tutti gli elementi "li" che contengono
// un link all'interno del'elemento con id "elenco"
$("#elenco li:has(a)");
// selezioni tutti i div nascosti
$("div:hidden");
// seleziono tutti i div che non appartengono alla
// classe "commento"
$("div:not(.commento)");
</pre>
<br />
<u>Filtri tramite attributi</u><br />
La selezione degli elementi viene basata sul valore degli attributi:<br />
<pre class="brush:js">
// seleziono gli elementi "a" con title "icona"
$("a[title='icona']");
// seleziono gli elementi "a" con title che inizia
// con "icona"
$("a[title^='icona']");
// seleziono gli elementi "a" con title che
// finisce con "icona"
$("a[title$='icona']");
// seleziono i link che non aprono nuove finestre
$("a[target!='_self']");
// seleziono i link che hanno un attributo "target"
// impostato
$("a[target]");
// seleziono i link con title "icona" e contemporaneamente
// con target "_blank" (selettori concatenati)
$("a[title='icona'][target='_blank']");
</pre>
<br />
<u>Filtri per elementi form</u><br />
<pre class="brush:js">
// seleziono tutti gli elementi password del form
$("input[type='password']");
// seleziono tutti gli elementi password del form
$(":password")
</pre>Danilohttp://www.blogger.com/profile/18260827863860854440noreply@blogger.com0tag:blogger.com,1999:blog-8926211802367036367.post-25573859102976630242011-09-09T07:22:00.000-07:002011-12-06T14:27:26.912-08:00jQuery - I selettoriNel framework jQuery i selettori degli elementi del codice HTML possono per comodità essere suddivisi in due gruppi.<br />
I <strong>selettori di base</strong> utlizzano il tag name, l'id o la classe per individuare gli elementi.<br />
I <strong>selettori gerarchici</strong> utilizzano l'organizzazione gerrchica delle pagina per individuare gli elementi.<br />
<br />
<u>Esempio di selettore di base</u>:<br />
$("a"); // selezione tutti i tag "a" della pagina;<br />
$("#id_elemento"); // seleziono l'elemento con id "id_elemento";<br />
$(".classe_elemento"); // seleziono gli elementi con classe "classe_elemento";<br />
<br />
<u>Esempio di selettori gerarchici</u>:<br />
$("#header a"); // seleziono tutti i tag a interni al div con id "header";<br />
$("ul#navglob > li"); // seleziono tutti gli elementi li direttamente discendenti dal tag ul con id "navglob";<br />
$("h1 + h2"); // seleziono tutti i tag h2 preceduti da h1:<br />
$("id_elemento ~ div") // seleziono tutti i div adiacenti all'elemento con id "id_elemento"<br />
<br />
In considerazione del fatto che il selettore più interno viene attivato prima e quindi che la selezione avviene da destra verso sinistra (scartando dall'insieme trovato con il primo criterio gli elementi che non soddisfano il secondo criterio) è bene impostare i selettori più significativi all'interno o a destra in modo da velocizzare le operazioni di selezione.<br />
<br />
$("p#header strong"); // NO - Seleziono prima tutti gli elementi "strong" della pagina e poi li scarto tutti ad eccezione di "p#header".<br />
$("strong ", $("p#header")); // SI - Seleziono l'elemento "p#header" e scarto tutti gli elementi interni non racchiusi in tag "strong".<br />
$("p#header").find("strong"); // SI -Danilohttp://www.blogger.com/profile/18260827863860854440noreply@blogger.com0tag:blogger.com,1999:blog-8926211802367036367.post-65882557461038868522011-06-09T07:15:00.000-07:002011-06-09T07:50:15.448-07:00Una raccolta di fotogallery di sicuro effetto<div><div>Interessante il sito <a href="http://www.webdesignshock.com/">http://www.webdesignshock.com</a> in quanto presenta una carrellata di layout per fotogallery di dasign accattivante e moderno e, a quanto pare, di semplice installazione.<br />Da vedere.</div></div>Danilohttp://www.blogger.com/profile/18260827863860854440noreply@blogger.comtag:blogger.com,1999:blog-8926211802367036367.post-69815522104741967882010-02-03T07:41:00.001-08:002010-02-09T02:11:36.630-08:00Fotogallery con effetto slide senza usare flashGrazie a jquery e a jCarousel Lite è possibile realizzare una fotogallery con effetto slide senza usare flash.<br /><a href="http://www.gmarwaha.com/jquery/jcarousellite/">Ecco</a> una pagina di esempio.<br /><br /><strong>Downloads</strong><br />jCarousel Lite: <a href="http://www.gmarwaha.com/jquery/jcarousellite/#download">http://www.gmarwaha.com/jquery/jcarousellite/#download</a>Danilohttp://www.blogger.com/profile/18260827863860854440noreply@blogger.com0tag:blogger.com,1999:blog-8926211802367036367.post-91332004239451658852010-02-03T07:26:00.000-08:002010-02-09T02:10:03.296-08:00Slideshow con jquery e cycle pluginjquery associato al suo plugin cycle consente di realizzare slideshow con "effetti speciali" con poche righe di codice.<br /><a href="http://malsup.com/jquery/cycle/">Ecco</a> dove trovare una pagina di esempi.<br /><strong></strong><br /><strong>Downloads</strong><br />jquery: <a href="http://docs.jquery.com/Downloading_jQuery">http://docs.jquery.com/Downloading_jQuery</a><br />cycle plugin: <a href="http://malsup.com/jquery/cycle/download.html">http://malsup.com/jquery/cycle/download.html</a>Danilohttp://www.blogger.com/profile/18260827863860854440noreply@blogger.com0