Leggerai questo articolo in: 2 minuti

Oggi ti segnalo un simpatico plugin jQuery. Si tratta di Ascensor!

Ascensor è un plugin grazie al quale è possibile creare un sistema di navigazione che ci permetterà di spostarci velocemente ovunque vogliamo.

Ascensor jquery

Ascensor è basato sul plugin scrollto per chi volesse dargli un occhio si trova qui.

Vediamo come farlo funzionare:

Prima di tutto abbiamo bisogno della libreria jQuery e il scrollTo.
E’ possibile scaricare il plugin qui o ascensor versione minified qui.

Una volta ottenuto tutto il necessario la prima cosa da fare è importare i file .js nel nostro sito: (facendo attenzione a mettere i percorsi corretti)

1
2
3
4
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo.js" type="text/javascript"></script> 
<script src="js/jquery.ascensor.js" type="text/javascript"></script>
<script src="js/myscript.js" type="text/javascript"

Semplice codice Html: Ipotizziamo 5 livelli da poter visitare.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="house">
        <div><!-- Livello1-->
                <div id="ContentName"></div><!-- Contenuto livello 1-->
        </div>
        <div><!-- Livello2-->     
                <div id="ContentName"></div><!-- Contenuto livello 2-->
        </div>
        <div><!-- Livello3-->
                <div id="ContentName"></div><!-- Contenuto livello 3-->
        </div>  
        <div><!-- Livello4-->
                <div id="ContentName"></div><!-- Contenuto livello 4-->
        </div>
        <div><!-- Livello5-->
                <div id="ContentName"></div><!-- Contenuto livello 5-->
        </div>
</div>

Per richiamare lo script sul nostro div (nel nostro caso “house”) basterà utilizzare jQuery:

1
$('#house').ascensor();

Ovviamente possiamo personalizzare alcuni aspetti:

1
2
3
4
5
6
7
8
9
10
11
12
$('#house').ascensor({
  AscensorName:'house',
                //possiamo scegliere il nome che definirà id e classi(default:'maison')
        WindowsFocus:true,
                //scegliamo se partire dalla prima finestra(default:true)
        WindowsOn:'0',
                //Nel caso non volessimo partire dalla prima, qui possiamo specificare da quale partire. 1,2,3,4,..,.
        Direction:'y',
                //Indichiamo in che direzione di deve muovere l'ascensore, in questo caso solo verticale
        NavigationDirection:'xy',
                //in questo caso orizzontale e verticale
});

Inoltre possiamo personalizzare tutto quel che riguarda la navigazione:

1
2
3
4
5
6
7
8
9
10
11
12
13
$('#content').ascensor({
 
        Navig:true,
                //impostiamo a true se vogliamo la navigazione
        Link:true,
                //impostiamo a true se vogliamo un link alla pagina successiva
        PrevNext:true,
                //impostiamo a true se vogliamo il pulsante "prev" e "next"
        KeyArrow:false,
                //disattivare i tasti freccia
        keySwitch:false,
                //disattivare la navigazione con i tasti freccia                       
});

Visualizza la demo da qui.
Scarica il sorgente da qui.

Bello no? Lo utilizzerai per qualche tuo progetto?

[adsense]