lorenzo, Author at Appunti e tutorial su front-end web technology

lorenzo

jquery grep()

Jan 072013

In questo post cercheremo di illustrare la funzione grep() di jQuery che serve per fare delle ricerche all’interno di un array avendo come risultato un nuovo array.
Nell’html della pagina prepareremo due semplici contenitori, uno per il primo array e uno per il secondo array che contiene i nomi dei mesi che al loro interno hanno la lettera r.


La funzione grep()
 <h2>I mesi</h2>
 <h2>Mesi che nel nome contengono la lettera r</h2>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
 ...
</script>

La parte centrale del nostro esercizio è costituita dallo script dove abbiamo la definizione dell’array dei mesi, la funzione grep che creerà l’array rInMonth andando a cercare dentro l’array arr i nomi che hanno almeno una r, il risultato sarà un altro array.
A questo punto sarà sufficiente iniettare nei due contenitori con il metodo html gli elementi dell’array uniti a un br

 $(document).ready(function() {
 var arr = ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre',  'Novembre', 'Dicembre'];
 var rInMonth = $.grep(arr, function(value, index) {return value.indexOf('r') >= 0;});
 $('#all-months').html(arr.join('
 '));
 $('#vitamin').html(rInMonth.join('
 '));
 });

L’esempio

jQuery index

JQuery No Responses »

Jan 042013

In questo breve post vedremo la funzione index che useremo per farci restituire l’indice dell’elemento su cui faremo click. Prepareremo quindi una pagina html con 5 paragrafi:


<!DOCTYPE html>
<html lang="en">
<head>
<title>La funzione index()</title>
</head>
<body>
<h1>Fai click sul paragrafo per vedere l'indice dell'elemento</h1>
<p>Primo</p>
<p>Secondo</p>
<p>Terzo</p>
<p>Quarto</p>
<p>Quinto</p>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
...
</body>
</html>

Tramite il nostro jQuery andremo ad associare il click sui paragrafi alla visualizzazione di un alert che mostrerà l’indice dell’elemento su cui abbiamo cliccato (this)


<script>
$(document).ready(function() {
$('p').click(function() {
alert('L\'Indice del paragrafo clickato: ' + $(this).index())
});
});
</script>

L’esempio

La funzione index()" data-image="" data-button=""> Share

jQuery array con map()

JQuery No Responses »

Jan 022013

Una funzione di jQuery per manipolare gli array è map().

map() dovrebbe essere utilizzato al posto di each ogni volta che vogliamo restituire un array, per esempio per convertirlo in una stringa JSON.

Iniziamo dall’html:

<!DOCTYPE html>
<html lang="it">
<head>
<title>La funzione map()</title>
</head>
<body>
<h2>Esempio d'uso della funzione map()</h2>
<p id="before">Prima di map():</p>
<p id="after">Dopo map():</p>
</body>
</html>

Nel codice javascript prepariamo un array e lo stampiamo come JSON,

successivamente lo manipoliamo con map() e lo ristampiamo sempre con JSON


<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
var arr = [1, 2, 3, 4, 5];
$('#before').append(JSON.stringify(arr));
arr = $.map(arr, function(value, index) {
return 'fai qualcosa con ' + value;
});
$('#after').append(JSON.stringify(arr));
});
</script>

L’esempio

" data-image="" data-button=""> Share

jQuery: ciclo each su un array

JQuery No Responses »

Dec 302012

Una delle basi necessarie per lavorare agevolmente con jQuery è padroneggiare gli array. In questo esempio vedremo come aggiungere alla pagina gli elementi dell’array scorrendolo tramite un ciclo each.

Partiamo dall’html:

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <title>La funzione each()</title>
 </head>
 <body>
 <h2>Questo esempio mostra come usare la funzione each() per appendere una lettera prima di ogni paragrafi</h2>
 <p>Primo</p>
 <p>Secondo</p>
 <p>Terzo</p>
 </body>
 </html>

Lo script verrà aggiunto alla fine dell’html prima della chiusura del tag body: questo darà come vantaggio un più veloce rendering dell’html senza attendere il download delle risorse altrimenti poste nel tag head.

 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script>
 $(document).ready(function() {
 var values = ['a', 'b', 'c', 'd'];
 });
 </script>

Posizionarci alla fine dell’html non ci dispensa dall’utilizzare il $(document).ready
L’ideale sarebbe mettere tutto questo codice in un file esterno.
Dichiarato l’array, possiamo procedere con il primo ciclo:

 $.each(values, function(index, value) {
 values[index] = value.toUpperCase();
 });

Con questo ciclo trasformamo in lettere maiuscole gli elementi del nostro array,
l’esempio evidenzia sia l’indice del ciclo, sia l’elemento (value) in esame nello step.

Il secondo ciclo aggiunge un trattino prima di ogni paragrafo, infatto si tratta di un ciclo sui ‘p’:

 $('p').each(function(index, el) {
 $(el).prepend(' - ');
 });

Infine il terzo ciclo, sempre sui paragrafi, aggiunge l’elemento preso dall’array:

 $('p').each(function(index) {
 $(this).prepend(values[index]);
 });

L’esempio

" data-image="" data-button=""> Share

Animazione crossfade con CSS3

CSS3 No Responses »

Dec 282012

Fare un’animazione cross-fade con css3 è cosa relativamente semplice.

Mettiamo in una pagina all’interno di un box due immagini:

 <div id="cf">
 <img src="images/41b98.jpg">
 <img src="images/b4b92.jpg">
 </div>

Poi prepariamo il nostro div che contiene le immagini in modo classico:

 #cf {
 position:relative;
 height:145px;
 width:200px;
 margin:0 auto;
 }

Quindi prepariamo la transizione sulla nostra immagine:

 #cf img {
 position:absolute;
 left:0;
 -webkit-transition: opacity 1s ease-in-out;
 -moz-transition: opacity 1s ease-in-out;
 -o-transition: opacity 1s ease-in-out;
 transition: opacity 1s ease-in-out;
 }

Infine l’evento che genererà l’effetto, ovvero l’over sull’immagine:

 #cf img.top:hover {opacity:0;}

L’esempio

Poi prepariamo il nostro div che" data-image="" data-button=""> Share

CSS3: giustificare un paragrafo (hyphens)

CSS3 No Responses »

Dec 272012

Una cosa sempre richiesta nell’ambito dei siti web e sostanzialmente fino ad ora mai soddisfatta, è la possibilità di giustificare un testo. La causa è da ricercare nel fatto che non essendo i browser in grado di sillabare i testi l’esito grafico spesso era disastroso: due righe adiacenti potevano contenere diverse quantità di sillabe e compensare questa differenza dilatando gli spazi bianchi: esito pessimo.

Con CSS3 e in particolare la proprietà hyphens le cose cambiano, vediamo come.

Prepariamo un div con un paragrafo e del testo:


<div id="contenitore">
 <p lang="it" class="hyphenate">I consumi elettrici in Italia ...</p>
 </div>

Si noti l’attributo, de facto obbligatorio, lang valorizzato con la lingua del testo.

Il foglio di stile contiene il contenitore “solito”:

 #contenitore{ border:1px solid #000; padding:5px; width:300px;}

Ma soprattutto il paragrafo con il nuovo attributo css3, al momento supportato solo con il prefisso:

 #contenitore p{
 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 hyphens: auto;
 text-align:justify;
 }

Il codice in sé sarebbe finito, ma così funzionerà , in questo momento solo su firefox,
problema noto con il css3 e in particolare con questa specifica che ha avuto una gestazione piuttosto travagliata.
Quindi? Approntiamo una strategia per gli altri browser!
Che passa innanzitutto per l’inclusione di un file js per fornire supporto ai browser che non l’hanno nativo.

<script src="js/hyphenator.js"></script>

E poi prima della chiusura del body lo usiamo:

 Hyphenator.config({
 displaytogglebox : true,
 minwordlength : 4
 });
 Hyphenator.run();

L’esempio completo

da php a json 02

PHP No Responses »

Dec 232012

Una seconda possibilità per produrre un output JSON è a partire da un oggetto php. Pertanto dichiariamo la classe user con tre proprietà public che verranno valorizzate dalla funzione crea_user() quando istanziamo il nostro oggetto. Una volta istanziato l’oggetto e chiamata la funzione possiamo semplicemente stampare la variabile oggetto con json_encode:


error_reporting(0);
require('include/mysql.inc.php');

class User{
public $id;
public $nome;
public $cognome;
public function __construct($id){
$this->id=$id;
}
public function crea_user(){
$sql='select nome, cognome from utenti where id='.$this->id. ' limit 1';
$fetch=mysql_query($sql);
$row=mysql_fetch_array($fetch, MYSQL_ASSOC);
$this->nome=$row['nome'];
$this->cognome=$row['cognome'];
}
}

$utente=new User(1);
$utente->crea_user();
echo json_encode($utente);

L’esempio

da php a json 01

PHP No Responses »

Dec 202012

Attualmente uno dei formati più popolari per l’interscambio dei dati è JSON, che abbina l’economia nella quantità dei dati veicolati a una struttura semplice ma efficace.

Vediamo come prelevare dei dati da un database mysql con php e convertirli in un formato JSON. La cosa è straordinariamente semplice dato che possiamo convertire un array nel formato JSON.


error_reporting(0);
 require('include/mysql.inc.php');
 $return_arr=array();
 $sql='select id, nome, cognome from utenti where 1 order by nome';
 $fetch=mysql_query($sql);
 while($row=mysql_fetch_array($fetch, MYSQL_ASSOC)){
 $row_array['myid']=$row['id'];
 $row_array['mynome']=$row['nome'];
 $row_array['mycognome']=$row['cognome'];
 array_push($return_arr,$row_array);
 }
 mysql_close($conn);
 echo json_encode($return_arr);

La porzione di codice fino al ciclo while dovrebbe essere estremamente famigliare a chiunque conosca il php, la prte interessante è la costruzione dell’array associativo usando degli alias per nascondere i nomi dei campi. Una volta creato il nostro array non ci resta che stamparlo con json_encode.

Il risultato

jquery mobile changepage

jQuery Mobile No Responses »

Dec 172012

Il metodo di jQuery Mobile change page serve per cambiare pagina, la cosa è banale se non fosse per il meccanismo ajax che governa il passaggio.

Prepariamo dunque la nostra solita pagina e invece di incorporare il link nell’html lo gestiamo da programmazione.


<!DOCTYPE html>
<html>
<head>
<title>Change Page</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
...
</script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>Change page</h1></div>
<div data-role="content"><a href="#" id="change" data-role="button">Change Page</a></div>
</div>
</body>
</html>

Il binding dell’evento per gestire tutto da programmazione lo facciamo con javascript:

$(document).ready(function() {
$(‘#change’).on(‘click’, function(event) {
$.mobile.changePage(’43b-change-page.html’,{transition: ‘fade’});
});
});

usiamo il metodo on che è quello da preferire.

Per visualizzare il meccanismo ajax la pagina di destinazione conterrà solo l’html senza i link alle librerie:


<!DOCTYPE html>
<html>
<head>
<title>Linked Page</title>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Linked File</h1>
</div>

<div data-role="content">
<p><a href="43-change-page.html">Link to an original
file</a></p>
</div>

</div>
</body>
</html>

Tramite l’esempio si può vedere come venga applicato il parsing di jquery mobile e di conseguenza come ci sia un’iniezione di contenuti via ajax.

jQuery Mobile: show load meassage

jQuery Mobile No Responses »

Dec 142012

Nello scenario di un massiccio ricorso ad ajax da parte di jQuery Mobile, è opportuno considerare lla necessità di visualizzare un messaggio che avverta del caricamento in corso delle nostra pagina chiamata, in modo che anche chi accederà con connessioni lente non abbia il dubbio che la pagina non stia funzionando debitamente.

jQuery Mobile dispone già di tutto il necessario perché questo avvenga e sarà quindi necessario solamente intercettare l’evento e utilizzare la funziona opportuna.

Nella pagina predisporremo dunque due bottoni uno per mostrare il messaggio e l’altro per nasconderlo:

<a href="#" id="show" data-role="button">Show</a>
<a href="#" id="hide" data-role="button">Hide</a>

e mediante il metodo on andremo ad associare al click sui bottoni la visualizzazone del messaggio di attesa oppure la sua rimozione:

$('#show').on('click', function(){$.mobile.showPageLoadingMsg();})
$('#hide').on('click', function(){$.mobile.hidePageLoadingMsg();})

Questo link per fare il test.

Older Entries Newer Entries