Latest web development tutorials

Fundación Joyride

Joyride es el efecto de un asistente función de JavaScript, crear una instancia de la siguiente manera:

Ejemplos

<! - Elementos que controlan el recorrido se detiene ->
<H3 id = "primera"> La primera parada! </ H3>
<H3 id = "segundo"> Segunda parada! </ H3>

<- El viaje de placer :! Debe ser colocado en la parte inferior de la página, pero por dentro <body> ->
<class = "Lista-Ol viaje de placer " datos-joyride>
<Li datos-id = "primera ">
<P> La primera parada. El viaje ha comenzado! </ P>
</ Li>
<Li datos-id = "segundo ">
<H4> segunda parada </ h4 >
<P> Cualquier HTML válido funcionará dentro del Joyride. </ P>
</ Li>
<Botones de datos Li = "Fin ">
<H4> Tope </ h4 >
<P> El viaje ha terminado. Usted puede ir de nuevo a la parada anterior o cerrarla. </ P>
</ Li>
</ Ol>

<! - Start Joyride Tras la inicialización - >
<Script>
$ (Document) ready (function () {
$ (Document) .foundation ( 'Joyride', 'inicio');
})
</ Script>
Trate »

Ejemplos de analítica

El ejemplo anterior, creamos dos elementos, cada uno tiene una identificación separada. Dos elementos define las posiciones de inicio y final viaje de placer.

Nos <ol> o <ul> para agregar el elemento data-joyride propiedad y .joyride-list clase para crear un viaje de placer. Es necesario definir en el encabezado del documento (en el <body> en la cabeza). Se utiliza en cada lista <li> elementos, cada uno añadiendo data-id=" value " atributo. valor del atributo debe ser la misma antes de que el elemento de identificación. Así que la primera función de navegación <h3> elemento utilizando id = "primero" debe ser datos-id <li> elemento = "primer" acuerdo de valor.

Si no se las arreglan para detener el ello, se mostrará un cuadro de modal.

Por último, Joyride requiere JavaScript para inicializarlo, el código es: $(document).foundation('joyride', 'start');