Articoli,howto,guide di programmazione & Informatica generale.
Sito dinamico con jQuery
Posted by k8 - Articolo di k8.
June 30, 2008, 1:07 pm
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:
Il codice del css d'esempio è il seguente:
Adesso impostiamo il file src.js con le relative funzioni per caricare dinamicamente le pagine con ajax e jQuery.
Il codice:
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:
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. ^^'
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
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;}
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. ^^'
Navigazione
Link
Cerca