Dragdealer JS - Links / download

• code.google.com/p/dragdealer/
• blog.ovidiu.ch/dragdealer-js

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 ])

• Mixed wrapper - Questo può essere l'id dell'elemento HTML , o l'elemento in oggetto
• Object opzioni

Opzioni

• Boolean disabilitato - Stato iniziale; default: false
• Boolean orizzontale - Proprietà Orizzontale; default: true
• Boolean verticale - Proprietà Verticale; default: false
• Number x - Valore iniziale orizzontale [0,1]; default: 0
• Number y - Valore iniziale verticale [0,1]; default: 0
• Boolean slide - Scorrimento al rilascio del trascinamento; default: true
• Number steps - Numero di passaggi  (meno di 2 vuol dire nessun passaggio); default: 0
• Boolean snap - Scatti per passaggio (se configurato); default: false
• Boolean loose - Trascinamento libero; default: false
• Function callback - (al rilascio); default: null
• Function animationCallback - (al movimento); default: null
• Number speed - Velocità di spostamento del gestore (0, 100]; default: 10
• Number xPrecision - Larghezza del contenuto animato; default: wrapper or handle width
• Number yPrecision - Altezza del contenuto animato; default: wrapper or handle height
• Number top, bottom, left, right - Padding del contenitore; default: 0

Metodi

• enable() - Abilita l'interazione con l'utente
• disable() - Disabilita l'interazione con l'utente
• setValue(Number x [, Number y [, Boolean snap = false ]]) - Imposta i valori specificati, con la possibilità di scorrere o  scattare direttamente
• setStep(Number x [, Number y [, Boolean snap = false ]]) - Imposta i valori per gli step previsti (se configurati), con la possibilità di scorrere o  scattare direttamente

Callback

Funzione (Numero x, Numero y)

• Numero x - Valore Orizzontale
• Numero y - Valore Verticale

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.