Sito dinamico con jQuery
Posted by k8 - Articolo di k8. June 30, 2008, 1:07 pm
IProgrammatori.it

Creazione di un sito dinamico con jQuery, senza caricamenti appunto, usando ajax.

In questa guida spiegherò come creare un semplice sito dinamico utilizzando jQuery.
I 3 passi principali saranno:
  • Impostazione dello stile del sito con il css style.css
  • Impostazione delle funzioni javascript con il file src.js
  • Impostazione dell'index.php
Come primo passo dobbiamo creare un file css per lo stile del sito.
Il codice del css d'esempio è il seguente:

* { padding: 0; margin: 0; }
body { font-family: monospace; font-weight: bold;}
h1 { padding-left: 5px;}
div#menu,div#content,div#footer {
width: 500px; padding: 2px; margin-left: auto; margin-right: auto; border: 4px solid black;
}
div#menu { height:20px; margin-top: 100px;}
div#content { height:100px; }
div#footer { height:20px;}
Non c'è molto da spiegare, basta avere una minima conoscenza dei css.
Adesso impostiamo il file src.js con le relative funzioni per caricare dinamicamente le pagine con ajax e jQuery.
Il codice:
	
function in_array(pagina,arraydipagine){
for(n in arraydipagine){
if(arraydipagine[n] === pagina){
return true;
}
}
return false;
}

function ShowPage(pagina,idcontent){
var pagine = new Array("pagina1.php","pagina2.php");
if(in_array(pagina,pagine)){
var page;
page = $.ajax({
url: pagina,
async: false
}).responseText;
$("#"+idcontent).html(page);
} else {
alert('Non Puoi.');
}
}
Spiegazione delle 2 funzioni.
La funzione in_array(pagina,arraydipagine) è una reimplementazione della funzione in_array di PHP.
Riceve come primo parametro una stringa e come secondo un array.
Ritorna true se la stringa passatogli (pagina)è contenuta nell'array(arraydipagine).
Effettua semplicemente un ciclo all'interno dell'array, ed in caso di uguaglianza tra l'elemento n-esimo dell'arraydipagine e pagina ritorna true.
Altrimenti a ciclo terminato,ritorna false.
Questa funzione ci servirà per controllare le pagine passate alla funzione seguente:
ShowPage(pagina,idcontent)
Questa funzione invece riceve come primo parametro la pagina da caricare dinamicamente senza il ricaricamento della pagina,
mentre come secondo parametro l'id del div (idcontent)che conterrà il contenuto della pagina caricata.
Nell'array pagine presente nella funzione ShowPage andranno inserite tutte le pagine che potranno essere caricate dalla funzione,
in questo esempio, pagina1.php && pagina2.php.
Adesso entra in gioco jQuery con il metodo ajax a cui passo come url pagina e setto la richiesta asincrona a false.
Poi tramite il metodo responseText 'prelevo' il testo della pagina di cui ho fatto il GET e lo inserisco nel div tramite il metodo html .
Adesso impostiamo l'index.php con il seguente codice:
	
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta name="description" content="Sito dinamico con l'uso di jQuery.">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jQuery.com/jquery-latest.js"></script>
<script type="text/javascript" src="src.js"></script>
<title>Realizzare un sito dinamico con jQuery & Ajax.</title>
</head>
<body>
<h1>Sito dinamico con l'uso di jQuery</h1>
<div id="menu">
| <a OnClick="ShowPage('pagina1.php','content');">Pagina1</a> |
| <a OnClick="ShowPage('pagina2.php','content');">Pagina2</a> |
</div>
<div id="content">
</div>
<div id="footer">
Esempio prelevato da
<a href="http://sorgenti.big-bug.net" title="Download Sorgenti Gratuito">http://sorgenti.big-bug.net</a>
</div>
</body>
</html>
E come si vede nel div menu c'è il richiamo alla funzione ShowPage(pagina,idcontent) nell'evento OnClick degli a.
Naturalmente nelle pagine .php potrete inserirci ciò che vogliate anche codice PHP ovviamente.
Qua trovate un esempio completo.
Questo è tutto.
Per problemi,chiarimenti,bug commentate. ^^'

Condividi
Stats
Voti 1
Voto medio 3
Visite 3518
Visite uniche 2953
Num.Download 115
DownloadDisponibile.
Spazio Visitatori
Prima di inviare il tuo commento assicurati che:
  • sia in tema con l'articolo e contribuisca alla discussione in corso
  • non abbia contenuti offensivi nei confronti di chicchessia
  • non abbia contenuti che violini le leggi italiane
  • non contenga indirizzi e-mail








Vota Pessimo 1 / 5 Migliorabile 2 / 5 Buono 3 / 5 Interessante 4 / 5 Speciale  5 / 5
Visualizza Commenti. (1)
Commenti
Matteo [01 April 2009 - 11:04:57] Una funzione utilissima e geniale. GRAZIE!!!!!
Tag Cloudjquery ajax sito × sito dinamico jquery × jquery ajax esempi ×

Advertisement

Iprogrammatori.it
| I contenuti di questo sito sono rilasciati sotto Licenza Creative Commons |