Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » Effetti e controlli Javascript

Pagine:

RSS

Deck.js, slideshow e presentazioni con jQuery

di: Francesco Malatesta 29 Novembre 2011

Deck.js è un plugin jQuery che ci permette di realizzare presentazioni e slideshow a partire da semplici file HTML. La presentazione prende forma sfruttando il contenuto HTML al quale associare comportamenti tramite alcune classi predefinite dalla libreria.

In questo articolo analizzeremo un caso pratico partendo dall'installazione del plugin fino all'analisi dei vari moduli a disposizione che attualmente sono 7: deck.core, deck.goto, deck.hash, deck.menu, deck.navigation, deck.scale, deck.status.

Il più importante è deck.core, che contiene le funzionalità basilari: creazione e navigazione dell'insieme di slide (denominato "deck", ovvero "mazzo"), collegamento con i fogli di stile CSS per governare l'aspetto del documento, collegamenti basilari con la tastiera per la navigazione della presentazione. Gli altri li descriveremo più avanti.

La prima presentazione con Deck.js

Per cominciare ad esaminare il funzionamento di tutti questi elementi, occorre scaricare l'insieme dei file necessari. Possiamo trovare il pacchetto completo cliccando su "Download" nella home page di Deck.js, oppure cercando il progetto su GitHub.

Si può notare che tutto è suddiviso in maniera efficiente, in cartelle ben definite in base all'uso e alla cosiddetta "essenzialità" del componente.

In una prima cartella, denominata core ci sono tutti i file basilari: file html di prova, css per lo stile e plugin in formato js, ovviamente. I file di questa cartella possono essere scaricati tutti. Per ora ignoreremo le altre cartelle, con le estensioni, preoccupandoci solo di fare una prima prova.

Apriamo il nostro editor HTML preferito ed iniziamo a scrivere le prime righe di codice. Qualcosa di molto simile a questo:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	
	<title>Primo Test con Deck.JS</title>
    
	<link rel="stylesheet" href="css/deck.core.css">
	<link rel="stylesheet" id="style-theme-link" href="css/web-2.0.css">
	<link rel="stylesheet" id="transition-theme-link" href="css/horizontal-slide.css">
	
	<link rel="stylesheet" href="css/style.css">
	
</head>

<body class="deck-container">

<section class="slide">
    <h1>Slide1</h1>
    <p>Premi il tasto "Freccia Destra" per continuare.</p>    
</section>

<section class="slide">
	<h2>Slide2</h2>
    <p>... contenuto ...</p>
    <p class="slide">contenuto extra</p>
</section>

<section class="slide">
  <h2>Slide3</h2>
	<ul>... lista ...</ul>
</section>

<section class="slide">
  <h2>Slide4</h2>
  <iframe>... video ...</iframe></p>
</section>


<script src="js/jquery.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/deck.core.js"></script>
<script type="text/javascript">
$(function() {
	$.deck('.slide');
});
</script>
</body>
</html>

Il codice completo della pagina lo troviamo qui

A livello di stile è stato usato lo stesso di quello della pagina di prova consultabile nella cartella "introduction" del pacchetto scaricato. Nel tag head vengono linkati i fogli di stile (nell'ordine, quello del core del plugin, il tema di default utilizzato e le direttive in css degli effetti di transizione da una slide e l'altra).

Gli script invece vengono richiamati a fondo pagina (il file deck.core.js, jQuery e la chiamata al metodo principale). A questo punto, esaminiamo da vicino il codice della singola slide.

<section class="slide">
    <h1>Primo Test con Deck.js</h1>
    <h2>di Francesco Malatesta per HTML.IT</h2>
    <p>Premi il tasto "Freccia Destra" per continuare.</p>
    
</section>

Ogni slide è caratterizzata (nel suo tag principale, in questo caso "section") dall'agganciamento alla classe ".slide" che viene poi usata come collegamento per Deck.js nel suo metodo principale. All'interno della slide stessa si può inserire qualsiasi tipo di elemento, come faremmo per una comune pagina HTML. Nessun tipo di accorgimento extra è richiesto: abbiamo la massima libertà d'azione.

Se vogliamo mostrare a più riprese i contenuti della stessa slide, inoltre, è possibile inserire in una diapositiva altri tag della classe "slide" per fare in modo di far apparire, sempre con lo stesso effetto di transizione, i contenuti nel momento che più ci aggrada. Ecco un esempio di "nested slide":

<section class="slide">
	<h2>Contenuti di Prova</h2>
    <p><em>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do   eiusmod tempor incididunt magna ..."</em></p>
    <p>Tutti i contenuti si possono formattare con HTML o CSS.</p>
    
    <p class="slide">contenuto extra</p>
</section>

Come applicazione base è più che sufficiente: il markup di base risulta piuttosto semplice, quanto all'aspetto grafico, si risolve grazie al supporto di temi tramite file CSS extra.

Possiamo quindi fare un passo avanti e espandere il nostro plugin con i moduli extra che abbiamo trovato sul sito ufficiale del progetto.

Pagina successiva

Pagine: