Foundation - Riferimento JavaScript multimediale
Descrizione
Foundation fornisce componenti JavaScript per l'orbita come elencato di seguito.
Inizializzazione
Per utilizzare il plug-in orbit, i file foundation.core.js , foundation.orbit.js devono essere inclusi nel tuo JavaScript. Questo plugin richiede le seguenti librerie di utilità:
foundation.util.keyboard.js
foundation.util.motion.js
foundation.util.timerAndImageLoader.js
foundation.util.touch.js
Foundation.Orbit
Viene utilizzato per creare una nuova istanza di un carosello dell'orbita.
var elem = new Foundation.Orbit(element);
Sr.No. | Nome e descrizione | genere |
---|---|---|
1 |
element È un oggetto jQuery da trasformare in una giostra. |
jQuery |
2 |
options Sostituisce le impostazioni predefinite del plugin. |
Oggetto |
Opzioni plugin
Puoi usarli per personalizzare l'istanza di un'orbita. Può essere impostato come attributi di dati separati, un attributo di opzioni dati unito o come un oggetto passato al costruttore del plugin. La tabella seguente elenca le opzioni del plugin utilizzate in Foundation.
Sr.No. | Nome e descrizione | Esempio |
---|---|---|
1 |
bullets Dice al JS di caricare i proiettili. |
vero |
2 |
navButtons Indica al JS di aggiungere listener di eventi ai pulsanti di navigazione. |
vero |
3 |
animInFromRight classe di animazione motion-ui da applicare. |
"slide-in-right" |
4 |
animOutToRight classe di animazione motion-ui da applicare. |
'slide-out-right' |
5 |
animInFromLeft classe di animazione motion-ui da applicare. |
"slide-in-left" |
6 |
animOutToLeft classe di animazione motion-ui da applicare. |
'slide-out-left' |
7 |
autoPlay Consente automaticamente all'orbita di animarsi al caricamento della pagina. |
vero |
8 |
timerDelay Rappresenta il tempo in ms che verrà applicato per la transizione della diapositiva. |
5000 |
9 |
infiniteWrap Esegue un ciclo infinito tramite diapositive |
vero |
10 |
swipe Consente alle diapositive dell'orbita di associare gli eventi di scorrimento per dispositivi mobili. |
vero |
11 |
pauseOnHover Consente alle funzioni di temporizzazione di mettere in pausa l'animazione al passaggio del mouse su di essa. |
vero |
12 |
accessible Associa gli eventi della tastiera allo slider. |
vero |
13 |
containerClass Classe applicata al contenitore dell'orbita. |
'orbit-container' |
14 |
slideClass Classe applicata alle singole diapositive dell'orbita. |
"orbit-slide" |
15 |
boxOfBullets Classe applicata al contenitore del proiettile. |
'proiettili-orbita' |
16 |
nextClass Classe applicata al pulsante successivo. |
"orbita successiva" |
17 |
prevClass Classe applicata al pulsante precedente |
"orbita precedente" |
18 |
useMUI Imposta Boolean per contrassegnare il JS per utilizzare o meno le classi dell'interfaccia utente di movimento. Per la compatibilità con le versioni precedenti, il valore predefinito è true. |
vero |
Eventi
Questi eventi si attiveranno da qualsiasi elemento con un plug-in allegato. Il slidechange.zf.orbit verrà attivato quando l'animazione è terminata dalla diapositiva.
Funzioni
Il .geoSync imposta un timer oggetto e avvia il contatore per la diapositiva successiva.
.changeSlide
Cambia la diapositiva in una nuova. Si innesca # Evento Orbit eventi per il cambiamento diapositiva. La tabella seguente elenca gli eventi che verranno attivati.
Sr.No. | Nome e descrizione | genere |
---|---|---|
1 |
isLTR Segnala quando la diapositiva deve spostarsi da sinistra a destra. |
Booleano |
2 |
chosenSlide jQuery elementi della diapositiva da visualizzare successivamente, quando ne viene selezionato uno. |
jQuery |
3 |
idx Rappresenta il nuovo indice delle diapositive nella sua raccolta, quando ne viene scelto uno. |
Numero |
Il .destroy distrugge il carosello e nasconde l'elemento.