Creare una web app moderna utilizzando jQuery
La guida semplice per creare una web app
Cosa intendo con creare una web app con jQuery?
Si tratta semplicemente di un sito web, ovviamente responsive, che funziona su singola pagina simulando un programma o un app per smartphone.
Questo significa che quando l’utente clicca su un link non vi è nessun re-indirizzamento o ricaricamento della pagina ma semplicemente una transizione da un contenuto all’altro.
Un esempio di web app? Il nostro Editor HTML5 Online Italia!
Come potete vedere le varie sezioni e elementi della pagina si alternano, facendo uso di animazioni, senza ricaricare nulla!
Come fare a ottenere una cosa del genere? Basta jQuery!
jQuery infatti fornisce tutto quello che serve per gestire le animazioni.
Noi non dobbiamo fare altro che racchiudere tutto il contenuto del nostro sito in un’unica pagina, suddividendo le “pagine” in diversi div.
Poi tramite jQuery e JavaScript andiamo a gestire cosa deve apparire e cosa deve scomparire.
Ecco un semplicissimo esempio:
<html>
<head>
<!-- Robe varie.. -->
<!-- Libreria jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
/* Regole CSS per la barra di navigazione */
ul
{
width: 100%;
heigth: 50px;
padding: 0;
text-align: center;
}
ul > li
{
display: inline;
}
ul > li > a
{
padding: 0 20px;
text-decoration: none;
color: black;
font-family: "verdana", sans-serif;
}
ul > li > a:hover
{
color: purple;
}
/* Rendo visibile la prima pagina/sezione e nascondo le altre */
#sezione_pagina_1
{
display: block;
}
#sezione_pagina_2
{
display: none;
}
#sezione_pagina_3
{
display: none;
}
</style>
</head>
<body>
<ul>
<li><a id="pagina_1" class="link_menu">Pagina 1</a></li>
<li><a id="pagina_2" class="link_menu">Pagina 2</a></li>
<li><a id="pagina_3" class="link_menu">Pagina 3</a></li>
</ul>
<div class="sezione_pagina attiva" id="sezione_pagina_1">
<h1>Pagina 1</h1>
</div>
<div class="sezione_pagina" id="sezione_pagina_2">
<h1>Pagina 2</h1>
</div>
<div class="sezione_pagina" id="sezione_pagina_3">
<h1>Pagina 3</h1>
</div>
<script>
/* Al click del collegamento del menu stabilisco qual'è la pagina da mostrare.
Nascondo la pagina attiva (mostrata).
Rimuovo dal div nascosto la classe che indicava che fosse attivo.
Mostro il div che rappresenta la pagina da mostrare
Aggiungo al nuovo div mostrato la classe che indica che è attivo*/
$(".link_menu").click(function(){
var ID_sezione_pagina = "#sezione_" + $(this).attr("id");
$(".attiva").fadeOut(500, function(){
$(".attiva").removeClass("attiva");
$(ID_sezione_pagina).delay(300).fadeIn(500);
$(ID_sezione_pagina).addClass("attiva");
});
});
</script>
</body>
</html>
Potete provare l’esempio in nuovo file HTML oppure direttamente nel nostro editor.
Buon divertimento!
