Dragdealer JS, componente JavaScript per infinite soluzioni User Interface

Dragdealer JS - Links / download

Struttura HTML

<div id="my-slider" class="dragdealer">
<div class="red-bar handle">drag me</div>
</div>

Red bar è il gestore di default. Essa è una classe separata, creata affinchè possa essere facilmente rimossa, se si desidera qualcosa di differente, al fine di non dover reimpostare tutte le proprietà CSS.

JS API

Costruttore

Dragdealer Dragdealer(Mixed wrapper [, Object options ])

Opzioni

Metodi

Callback

Funzione (Numero x, Numero y)

Esempi

Simple slider

Nessuna opzione per il cursore. Non si deve impostare nulla, ovviamente. Far scorrere il cursore rosso trascinandolo o toccandolo (tenendolo premuto) nel suo alloggiamento.

new Dragdealer('simple-slider');

In merito a questa prima applicazione, possiamo vedere il "Simple Slider" in azione.

Scroll-bar

Un semplice e veloce esempio verticale. Esso utilizza l' animation callback per scorrere il contenuto nascosto ed ha yPrecision impostato per la sua altezza.

yPrecision prevede uno slide in quanto il contenuto è superiore all'altezza del cursore.

new Dragdealer('scroll-bar',
{
horizontal: false,
vertical: true,
yPrecision: content.offsetHeight,
animationCallback: function(x, y)
{
var margin = y * (content.offsetHeight - mask.offsetHeight);
content.style.marginTop = String(-margin) + 'px';
}
});

Secondo esempio dello Scroll-bar in azione.

Da notare che è possibile implementare anche un esempio più complesso della scroll-bar. Potrebbe essere migliorata ma non rientra nello scopo della presente demo.

Magnifier

Il controllo è una delle prerogative del Dragdealer. E' stato utilizzato un blocco di testo, anche se avrebbe potuto esserci qualsiasi altro oggetto, per esempio una immagine. E' possibile vedere in azione lo snapping, con gli step impostati a 6. Da notare, per l'esempio, che ad ogni "avanzamento" corrisponde una dimensione del testo sempre maggiore, senza per questo compromettere il suo contenitore.

new Dragdealer('magnifier',
{
steps: 6,
snap: true,
animationCallback: function(x, y)
{
text.style.fontSize = String(12 + x * 24) + 'px';
}
});

Magnifier in azione.

Slideshow w/ controls

Questo esempio richiede una implementazione un po 'più complessa. Sulla sinistra vi è l'elemento Dragdealer il quale viene popolato con 4 foto che possono essere spostate orizzontalmente. Esse vengono ritagliate dal componente wrapper che in questo caso è più piccolo del suo contenuto, esattamente come ognuna delle foto, dando come risultato un effetto carosello.

Sulla destra ci sono 4 link che controllano il componente; ogni link corrisponde ad una immagine differente.

In ultimo è stato aggiunto un cursore con i controlli sulla destra, il quale è posizionato attraverso la funzione animation callback, offrendo un maggior controllo su entranbi i modi.

#slideshow {
overflow: hidden;
...
var slideshow = new Dragdealer('slideshow',
{
steps: 4,
loose: true,
animationCallback: function(x, y)
{
var top = x * (menuWrapper.offsetHeight - cursor.offsetHeight);
cursor.style.top = String(top) + 'px';
}
});
link1.onclick = function()
{
slideshow.setStep(1);
return false;
}
link2.onclick = function()
{
slideshow.setStep(2);
return false;
}
link3.onclick = function()
{
slideshow.setStep(3);
return false;
}
link4.onclick = function()
{
slideshow.setStep(4);
return false;
}

Il Componente Slideshow in azione.

Si ribadisce il concetto che quanto appena visto non sarebbe uno slideshow carousel di per sè ma è solo un'idea di quello che si potrebbe costruire con Dragdealer. Per esempio si potrebbe aggiungere una funzionalità di auto-rotazione, con sole 5 righe di codice, ma rimaniamo nel campo degli esempi.

Canvas mask

Un altro esempio avanzato, simile al precedente, ma con entrambe le dimensioni. Un'altra cosa da notare, sia in questo che nella demo più su,  è la proprietà loose. Si veda l'effetto elastico applicato quando si cerca di trascinare lo sfondo al di fuori del contenitore.

Canvas mask in azione.

Grazie per l'interesse mostrato, con la speranza che se ne tragga il maggior divertimento possibile.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati