JavaScript  »  Articoli  »  Effetti e controlli Javascript 

jQuery è una libreria Javascript molto diffusa, è facile da utilizzare anche dai non programmatori e grazie alle centinaia (migliaia?) di plugin possiamo inserire nei nostri siti praticamente qualsiasi effetto o utility a livello di interfaccia ci venga in mente.

Come consiglio generale mi sento di dire che è sempre bene non esagerare con gli effetti nelle pagine ma per esigenze di navigazione, di presentazione o di spazio uno slider ben personalizzato fa sempre comodo…

JQuery Tools

Quale plugin scegliere per questo scopo? I suggerimenti sono sempre ben accetti, ma ultimamente mi sto concentrando su quelli messi a disposizione da jQuery Tools (http://flowplayer.org/tools/index.html). La filosofia dei creatori è rendere semplice e veloce integrare le interfacce utente veramente indispensabili; bando quindi a drag-and-drop, sortables e resizables.

È necessario un piccolo Javascript da 5.72 Kb (con compressione gzip). La logica di programmazione è ben separata dal design rendendo semplice l’integrazione per utenti alle prime armi o programmatori esperti.

Dalla pagina di download [http://flowplayer.org/tools/download.html] possiamo personalizzare il Javascript spuntando semplicemente gli effetti desiderati; in questa guida utilizzerò lo scrollable da 10.47 kb (3.37 kb con compressione gzip).

Setup di base

L’esempio più semplice è una galleria scrollabile orizzontalmente con due pulsanti o con le frecce destra e sinistra.

Per iniziare è sufficiente caricare i due script jQuery e jQuery Tools nella sezione head della pagina:

<script  type="text/javascript"  src="js/jquery-1.4.2.min.js"></script>
<script  type="text/javascript"  src="js/jquery.tools.min.js"></script>

Il codice HTML base è molto pulito, composto da due ancore (a) per i pulsanti di navigazione che nel CSS esterno vengono sostituiti da due immagini e da un paio di div che indicheranno al Javascript quali sono gli oggetti scrollabili e il contenitore fisso:

<!--  "azione per spostarsi alla pagina precedente --> 
<a  class="prevPage browse left"></a> 

  <!--  elemento div contenitore per scrollable --> 
  <div  class="scrollable">
   <!-- elemento div per i singoli item -->
   <div class="items">
   <!-- 1-5 -->
   <img src="ima/img001.png"  />
   <img src="ima/img001.png"  />
   <img src="ima/img001.png"  />
   <img src="ima/img001.png"  />
   <img src="ima/img001.png"  />
   <!-- 5-10 -->
   <img src="ima/img001.png"  />
   <img src="ima/img001.png"  />
   <img src="ima/img001.png"  />
   <img src="ima/img001.png"  />
   <img src="ima/img001.png"  />
   <!-- 10-15 -->
   <img src="ima/img001.png"  />
   <img src="ima/img001.png"  />
   <img src="ima/img001.png"  />
   <img src="ima/img001.png"  />
   <img src="ima/img001.png"  />
   </div>
  </div>
  
<!--  "azione per spostarsi alla pagina successiva -->
<a  class="nextPage browse right"></a>

Altri articoli

Altre guide

Altre newsletter