Personalizzazione Facile (preset)Gli utenti meno esperti, possono inserire delle impostazioni predefinite. È possibile chiederne dei personalizzati.
data-slide="default"Queste impostazioni mostrano dei bottoni con i nomi dati alle tab (tramite data-label="NOME") e al click si verrà portati a quel tab con una transizione usando le trasparenze.
L'altezza della slide si adatta al contenuto che viene inserito in ogni tab.
CODICE
settings={
"effect":"opacity{timed}",
"style":"forumfree",
"buttons":"buttons",
"autoslide":"none",
"height":"adapt",
"duration":"400ms",
"hoverstop":"true",
"gestures":"null"
};
Con queste impostazioni i tab scorrono da destra verso sinistra, dopo 5 secondi, la slide scorre in automatico. Anche così l'altezza della slide si adatta in base al contenuto.
CODICE
settings={
"effect":"flyin{left,continue}",
"style":"forumfree",
"buttons":"none",
"autoslide":"5s",
"height":"adapt",
"duration":"1s",
"hoverstop":"false",
"gestures":"null"
};
Nelle impostazioni pre-settate "showcase" la slide scorre verso sinistra, finché non raggiunge la fine e torna all'inizio. Sono visibile dei bottoni all'interno della slide che indicano il tab attivo. La tab scorre da sola ogni 5s, tranne se si passa con il mouse sulla slide. Una volta che si è con il mouse sulla slide, si può usare il trackpad (in orizzontale) o la rotteline del mouse (in verticale) per scorrere tra le tab. In alternativa si può cliccare sui bottoni in basso.
CODICE
settings={
"effect":"slide",
"style":"forumfree",
"buttons":"bullets",
"autoslide":"5s",
"height":"adapt",
"duration":"1s",
"hoverstop":"true",
"gestures":"wheely, wheelx"
};
Uguale al preset
showcase, ma senza lo scorrimento automatico dopo 5 secondi.
CODICE
settings={
"effect":"slide",
"style":"forumfree",
"buttons":"bullets",
"autoslide":"none",
"height":"adapt",
"duration":"1s",
"hoverstop":"true",
"gestures":"wheely, wheelx"
};
Qui di seguito viene spiegato come personalizzare completamente la slide.
Le impostazioni usano la stessa sintassi del CSS ovvero
proprietà:valore;.
Per esempio:
data-slide="effect:opacity;autoslide:3s;duration:500s;"Di seguito una lista di di properieà con i corrispondenti valori.
effect:- none : nessuna animazione viene applicata al cambio di tab.
- opacity : transizione dei due tab. Mentre quella attiva diventa meno visibile, il prossimo diventa sempre più visibile.
- opacity{timed} : transizione dei due tab. Prima sparisce quella visibile, poi compare il prossimo.
- scale : mentre il tab attivo rimpicciolisce, il prossimo si ingrandisce.
- scale{timed} : prima il tab attivo si rimpicciolisce fino a sparire, poi il prossimo tab inizia ad ingrandirsi.
- slide : i tab vengono messi in fila e si spostano lateralmente, fino ad entrare completamente nell'area visibile.
- slide{left} : uguale a
slide.
- slide{right} : uguale a
slide, solo nella direzione opposta.
- slide{top} : il tab successivo corre verso l'alto (il tab attualmente attivo sparisce con impostazione:
height:adapt)
- slide{bottom} : uguale a
slide{top}, però nella direzione opposta.
- flyin : il tab attivo, sparisce diventando trasparente, il prossimo tab entra con effetto "slide" da sinistra.
- flyin{right} : uguale a
flyin.
- flyin{left} : uguale a
flyin, solo che il tab successivo entra dalla direzione opposta.
- flyin{top} : il tab attivo si dissolve, mentre il prossimo tab entra con effetto slide dal basso verso l'alto.
- flyin{bottom} : uguale a
flyin{top}, solo che il tab successivo entra dalla direzione opposta.
- flyin{right,continue} : uguale a
flyin{right}, però il tab attivo non si disslove, ma esce seguendo la direzione di entrata.
- flyin{left,continue} : uguale a
flying{right,continue}, però nella direzione opposta.
- flyin{top,continue} : uguale a
flying{right,continue}, però i tab si muovono verso l'alto.
- flyin{bottom,continue} : uguale a
flying{top,continue}, però nella direzione opposta.
height:- adapt : l'altezza della slide si adatta al tab attivo.
- [altezza fissa][unità] : si può attribuire un'altezza fissa alla slide, digitando un numero seguito dall'unità. Le unità accettate sono: cm(centimetri), mm(millimetri), in(pollici), px(pixel), pc(pica), em(larghezza del carattere "m"), ex(altezza del carattere "x"), pt(point).
buttons: (i valori vanno separati tramite una virgole, es:
buttons: buttons, bullets, arrows;)
- none : nessun bottone viene mostrato.
- buttons : dei bottoni con il testo dei nomi assegnati in
data-label vengono generati e al click, portano al relativo tab.
- arrows : genera due tasti con testo "<<" e ">>" che indica il tab precedente, o il tab successivo.
- arrows{LEFT,RIGHT} : genera due bottoni con testo inserito in "LEFT" e quello inserito in "RIGHT".
- bullets : genera dei "pallini" all'interno della slide che indicano il tab attivo (sono anche cliccabili).
- button-inset : uguale a
buttons, però i tasti vengon inseriti all'interno della slide (per posizionamento relativo).
- arrow-inset : uguale ad
arrows, però i bottoni vengon inseriti nella slide (per posizionamento relativo).
autoslide:- none : la slide non scorre da sola.
- [numero][unità] : si può inserire un numero seguito da una unità. Le unità accettate sono: s(secondi), ms(millisecondi).
duration: (indica la durata delle animazioni)
- [numero][unità] : si può inserire un numero seguito da una unità. Le unità accettate sono: s(secondi), ms(millisecondo).
style:- pixel : carica lo stile di default. (non ancora implementata)
- forumfree : la slide cerca di prendere gli stili della skin in uso (su forumfree)
-class{CLASSE} : invece di CLASSE si può inserire una classe a proprio piacimento.
hoverstop:- true : se "autoslide" è attiva, al passaggio del mouse, l'autoslide si interrompe.
- false : se "autoslide" è attiva, al passaggio del mouse, l'autoslide continua ed ignora il mouse.
gestures: (le opzioni vengono divise da una virgola)
- wheelx : va al tab precedente/successivo in base allo scroll orizzontale del mouse/trackpad. (sopprime scroll pagina)
- wheely : va al tab precedente/successivo in base allo scroll verticale del mouse/trackpad. (sopprime scroll pagina)
.
.
Web