JQuery: aprire una pagina senza refresh
Vi è mai capitato di voler far aprire un div di un’altra pagina nella vostra index in modo tale da avere tutto un sito in un unica pagina senza che avvenga mai il refresh del cambio pagina?
Attraverso i codici che troverete qui sotto imparerete a far sì che il vostro sito richiami div di altre pagine nel punto preciso che desiderate senza avvenga nessun refresh.
In questo modo dovrete creare il layout della index lasciando un div contenitore uguale per tutte le pagine.
CODICE HTML:
<div id="container">
<div id="menu">
<ul>
<li id="pagina1">Pagina 1</li>
<li id="pagina2">Pagina 2</li>
<li id="pagina3">Pagina 3</li>
</ul>
</div>
<div id="content">
CONTENUTO HOME PAGE
</div>
Il container è il contenitore del sito, il div menu rimarrà fisso in quella posizione per tutte le pagine, e il div content è invece il div che conterrà i contenuti del sito diversi per ogni pagina.
Abbiamo quindi bisogno di un .css:
<style type="text/css">
#container {
margin:auto;
width: 1020px;
overflow: hidden;
background-color: #E4E4E4;
}
#menu {
float:left;
width:220px;
background-color: yellow;
}
#content {
float:left;
width: 800px;
}
</style>
E del codice jquery che faccia funzionare l’effetto che vogliamo dare:
Da inserire dentro l’head:
<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
Da inserire in fondo al body:
<script type="text/javascript">
$("#menu ul li").click(function() {
var param = $(this).attr("id");
$.ajax({
type: "GET",
url: param + ".html",
success: function(response) {
$("#content").html(response);
}
});
})
</script>
Dovete ora creare i contenuti delle altre pagine:
PAGINA1.HTML:
<style>
p {
font-size: 1.2em;
font-weight: bold;
}
</style>
<p>Pagina 1</p>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
PAGINA2.HTML:
<style>
p {
font-size: 1.2em;
font-weight: bold;
}
</style>
<p>Pagina 2</p>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
PAGINA3.HTML:
<style>
p {
font-size: 1.2em;
font-weight: bold;
}
</style>
<p>Pagina 3</p>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
GUARDA LA DEMO
SCARICA I FILE
Promozioni
Potrebbe interessarti
Francesco: Lavora come freelance, si occupa di Web Design & Marketing, Strategie Digitali, Blogging e docenza.
Per PC Academy cura: il tutoraggio dei corsi online Scrittura Creativa e Sceneggiatura; le lezioni in aula sulla creazione del CV infografico e come Presentarsi alle Aziende in modo professionale; la redazione di molti articoli di questo portale.
Commenti