Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Contenuti scorrevoli con jQuery Tools

Creare facilmente pannelli e box scorrevoli con l'ottima libreria per jQuery dedicata ai widget di interfaccia
Creare facilmente pannelli e box scorrevoli con l'ottima libreria per jQuery dedicata ai widget di interfaccia
Link copiato negli appunti

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>

Poche righe di semplice Javascript attivano lo scrollable, è sufficiente indicare il div contenitore (div.scrollable, ovvero il div con classe scrollable):

<script>
  $(function()  {
   $("div.scrollable").scrollable();
  });
</script>

I due CSS esterni scrollable-horizontal.css e scrollable-buttons.css si occupano della presentazione a livello visuale. Nel codice CSS originale dell’esempio è indicato che il div principale deve essere posizionato assolutamente.

Modificando semplicemente il Javascript con $("div.scrollable").scrollable().circular(); richiamiamo il plugin Circular che rende lo scroll infinito.

Esistono infatti quattro plugin (nella pagina di download di jQuery Tools si può scegliere quali scaricare) che possono attivare funzioni utili come Circular (scrolling infinito), Navigator (attiva dei pulsanti aggiuntivi di navigazione), Autoscroll (scrolling automatico), Mousewheel (scrolling attivato con rotella di scorrimento del mouse).

Esempio 2: alternative scrolling

Uno scroll attivato al click del mouse sopra l’immagine, semplice ed efficace per header o per visualizzare più immagini in buona risoluzione senza necessariamente usare il solito Lightbox.

Il codice HTML è minimale, un paio di div contenitori e la serie di immagini da visualizzare in sequenza:

<div  class="scroll">
   <div class="pics">
   <img src="ima/img002.png"  />
   <img src="ima/img002.png"  />
   <img src="ima/img002.png"  />
   </div>
</div>

Lo scroll si attiva sempre con una semplice riga di codice, con size:1 indichiamo che vogliamo visualizzare un elemento per volta (in questo caso un’immagine ma jQuery Tools Scrollable funziona anche con altri oggetti tipo Flash, etc):

<script>
  $(function()  {
  $(".scroll").scrollable({size:  1, loop: true});
  });
</script>

Il CSS “blocca” il div principale con misure fisse e overflow:hidden; al suo interno scorreranno le immagini. Il CSS è inserito in un file esterno chiamato alternative.css:

.scroll  {
   position:relative;
   overflow:hidden;
   ;
   ;
   clear: both;
}
  .scroll  .pics {
   width:20000em;
   position:absolute;
   clear:both;
}
  .pics  img {
   float:left;
   cursor:pointer;
   ;
   margin:0px;
}

Ecco l'esempio.

Esempio 3: Vertical scroll

È una personalizzazione per creare uno scroll verticale utile in svariate situazioni, composto da una lista che fungerà da navigazione e un div in cui scorreranno le immagini o contenuti più complessi.

Ecco la demo.

Inseriamo come negli esempi precedenti i due script jQuery e jQuery.Tools:

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

Creiamo un div contenitore che racchiude sia la lista di navigazione che il div contenente gli elementi scrollabili, in questo caso una serie di immagini ma possiamo inserire qualsiasi codice HTML e personalizzarlo via CSS secondo le esigenze di design e contenuti desiderati. Nella lista di navigazione ho inserito delle miniature con del testo che potremo usare come didascalia dell’immagine o come testo di presentazione del contenuto.

<div  id="contenitore">
   <ul id="navigazione">
   <li><img  src="ima/img004-tumb.jpg" alt="" />[link #1]</li>
   <li><img  src="ima/img004-tumb.jpg" alt="" />[link #2]</li>
   <li><img  src="ima/img004-tumb.jpg" alt="" />[link #3]</li>
   <li><img  src="ima/img004-tumb.jpg" alt="" />[link #4]</li>
   </ul>
 <div id="main">
   <div id="pages">
   <div  class="page"><img src="ima/img004.jpg"  alt="" /></div>
   <div class="page"><img  src="ima/img004.jpg" alt="" /></div>
   <div  class="page"><img src="ima/img004.jpg"  alt="" /></div>
   <div  class="page"><img src="ima/img004.jpg"  alt="" /></div>
   </div>
   </div>
</div>

Aggiungendo il CSS (completamente esterno) la presentazione è completa, le parti più importanti sono gli stili per la lista, ognuno potrà personalizzarlo secondo le esigenze, aggiungendo ad esempio sfondi sul mouseover o altri effetti:

#navigazione  {
float: left;
padding: 0px !important;
margin: 0px !important;
}
#navigazione  li {
background-color: #333;
border-bottom: 1px solid #666;
clear: both;
color: #FFF;
font-size: 12px;
;
line-; /**/
list-style-type: none;
padding: 10px;
;
cursor: pointer;
}
#navigazione li img {
border: 1px solid #666;
margin-right: 1em;
vertical-align: top;
}

Il codice Javascript per attivare lo scroll verticale è minimale e si basa principalmente sui parametri vertical: true e size:1:

<script>
    $(function()  {
    $("#main").scrollable({
     // basic settings
     vertical: true,
     size: 1,
     clickable: false,
    }).navigator("#navigazione");
    });
</script>

Il limite del jQuery Tools Scrollable è solamente la personalizzazione della presentazione visiva, HTML + CSS, lo script pensa al resto con molte opzioni da sfuttare.

Tutti gli esempi visti sono disponibili per il download.

Ti consigliamo anche