Fondazione Joyride
Joyride è l'effetto di una funzione guidata JavaScript, crea un esempio come segue:
Esempi
<H3 id = "primo"> Prima tappa! </ H3>
<H3 id = "secondo"> Seconda tappa! </ H3>
<- Il Joyride :! Deve essere posizionato nella parte inferiore della pagina, ma dentro <body> ->
<class = "Joyride-list Ol " data-Joyride>
<Li data-id = "prima ">
<P> La prima tappa. La corsa è iniziata! </ P>
</ Li>
<Li data-id = "secondo ">
<H4> Secondo arresto </ h4 >
<P> Qualsiasi HTML valido lavorerà all'interno del Joyride. </ P>
</ Li>
<Li-pulsante data = "End ">
<H4> Fine stop </ h4 >
<P> Il tour è finito. È possibile tornare alla fermata precedente o chiuderlo. </ P>
</ Li>
</ Ol>
<! - Inizio Joyride al momento dell'inizializzazione - >
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ( 'Joyride', 'Start');
})
</ Script>
Esempi di analitica
L'esempio di cui sopra, creiamo due elementi, ognuno ha un ID separato. Due elementi imposta l'inizio e posizioni finali Joyride.
Noi <ol> o <ul> per aggiungere l'elemento data-joyride proprietà e .joyride-list classe per creare un joyride. È necessario definire nella testa del documento (nel <body> nella testa). Usato su ogni lista <li> elementi, ognuno dei quali aggiunge data-id=" value " attributo. valore di attributo deve essere la stessa prima dell'elemento id. Quindi la prima funzione di navigazione <h3> elemento con id = "prima" deve essere data-id <li> elemento = "primo" contratto di valore.
Se non si riesce a fermare l'id, verrà visualizzato un dialogo modale.
Infine, Joyride richiede JavaScript per inizializzare, il codice è: $(document).foundation('joyride', 'start');