wSlide, plugin jquery con effetto scorrevole sulle liste

Ho il piacere di presentarvi wSlide, il mio primo plugin per jQuery (finalmente ufficiale)!

wSlide permette di trasformare qualsiasi lista in una specie di visualizzatore, sia per il testo che per le immagini. La paginazione può essere generata automaticamente o meno.

Non c'è niente di meglio di una demo live:

Di seguito le spiegazioni...

Perchè questo plugin?

Principalmente per risparmiare spazio nelle pagine web. I lunghi elenchi sono spesso faticosi da leggere in tutte le direzioni. Ad esempio, si potrebbe alleggerire la sidebar raggruppando più parti con il presente plugin.

Caratteristiche

Paginazione automatica (disattivabile)
Personalizzazione semplice tramite i CSS
Scelta della posizione di partenza
Scelta del senso di scorrimento (orizzontale o verticale)
Possibilità di scorrimento in diagonale
Compatibile con il plugin easing (per effetti tipo il rimbalzo)
Possibilità di dissolvenza
Scelta della durata della transizione

Testato su...

Firefox
Opera
Internet Explorer 6 et 7

Esempi

Download

jquery.wslide.js (versione 0.1, compressa)
jquery.wslide.js (version 0.1, non compressa)
wslide_demo.zip (i files di esempio)

Installazione

Includere la libreria jQuery nella pagina (se non è stato già fatto) ed il plugin wslide tra i tag <head> e </head>.

<script type="text/javascript" src="/jquery-latest.pack.js"></script>
 <script type="text/javascript" src="/jquery.wslide.js"></script>

Si crei una semplice lista in html come la seguente:

<ul id="mia_lista">
 <li>Lorem ipsum ad delenit omittam his, habeo justo ad sea! Eu mel volumus noluisse disputando! Cu prompta moderatius sit? Et iuvaret suavitate vix, ne eum audiam luptatum, nam in epicuri adipisci scripserit.</li>
 <li>His ad copiosae erroribus, has eu mucius cotidieque concludaturque. No appareat iracundia complectitur eum, pri an euismod corrumpit, zzril animal mnesarchum id sed. Ex duis erat persius est, ne vis assum timeam tamquam, rebum quaeque civibus in qui. Populo animal dissentiunt in eos. Ludus molestie ut vix, eum eros lobortis id.</li>
 <li>Quodsi dissentiunt cu eos, duo cu clita veritus, mei quot velit scriptorem ea? At kasd dolorum facilisi per, te discere inermis patrioque duo. Integre nominati sapientem has et? Ad erat essent ius, pro quando menandri definitiones te?</li>
 <li>Indoctum moderatius cum te? In dictas hendrerit eam. Vel meliore fuisset perpetua et? Nibh debitis erroribus mea te, sed cu virtute volutpat periculis. Omnium integre philosophia ut quo, et detracto honestatis sed.</li>
 <li>In eum natum facete, in eum vero vidit consectetuer. Alii oportere signiferumque id nam, mandamus recteque pro at? Eu perpetua sadipscing pro, pro omittam invenire ex. Sit no nemore omnium accommodare, sit in idque inani! Ut quo ubique dictas nostrud. Eum at quis pericula repudiandae, usu ne ornatus explicari vulputate.</li>
 <li>Simul tantas nostrum at has, his id postulant cotidieque, in eum omnium mediocrem moderatius! Pro oratio scriptorem ei, causae accusata est te. Ex quod nonummy has, usu et omnium probatus deterruisset! Ea impetus percipit takimata has. No qui probo dolore convenire. Et conceptam intellegat sententiae sit, has ex tota nobis.</li>
 <li>Nostrum volutpat cu ius. Sed affert aliquyam ea? An quo verear accumsan voluptaria. Id graeci audire sit.</li>
 <li>Pri petentium definitiones ad? Utinam delenit eos ex? Vim ea discere officiis conclusionemque, ad his lorem ponderum praesent? Ut vim consul timeam iracundia, mel civibus posidonium et, nam ea audire evertitur. An docendi pertinacia eum, utroque officiis his ne?</li>
 </ul>

Si aggiunga il poco codice javascript che va ad inizializzare la lista e nello stesso tempo definisce le opzioni:

Le parti di codice che seguono, possono essere essere aggiunte sia tra:
<script type="text/javascript"> //qui il codice </script>
sia in un file .js esterno.

Nota Bene: il codice javascript si deve trovare assolutamente dopo il plugin.

$(document).ready(function(){ //si attende che la pagina sia caricata    //viene assegnato l'id dell'elenco e gli vengono passati i parametri    $("#mia_lista").wslide({    width: 500,    height: 333,    horiz: true   }); //se si hanno altre liste,  //si scriva il loro codice di inizializzazione qui di seguito... //$("#altra_lista").wslide({... });

Opzioni

Le opzioni sono impostate per la creazione di codice
({opzione1: val, opzione2: val, opzione3: val, ecc...})

width e height: la dimensione del blocco che conterrà l'elenco (di default è 150)
pos: la posizione di partenza (di default è 1)
col: il numero delle colonne, se maggiore di 1, produrranno un effetto di navigazione in diagonale (di default è 1)
effect: il tipo di effetto che si desidera per la transizione, per questo motivo è necessario il plugin easing (di default è swing)
fade: transizione con effetto di comparsa e scomparsa di colpo. Il senso della transizione non ha più importanza (di default è false)
horiz: attiva lo scorrimento orizzontale (di default è false)
duration: la durata della transizione in millisecondi (di default è 1500)
autolink: indica se si desidera un menu di navigazione generato automaticamente. Se si crea un menu personalizzato, scrivere autolink: false. Se si vuole, invece, che il menu venga generato automaticamente, ma in un altro elemento di blocco div, scrivere: autolink: 'id-del-div-menu'

Domande?

Conclusioni

Siccome è il mio 1° plugin, è possibile riscontrare qualche errore (che correggerò volentieri, per quanto possibile). E' stato commentato il codice delle pagine sorgenti in modo tale che possa essere di ispirazione.

jQuery a tutta forza!!!

Traduzioni

Explicaciones en español por Nikko. | Explanations in Spanish by Nikko. (Thanks !)

< Prec.		Succ. >