Línea de tiempo horizontal/vertical adaptable en Vanilla JavaScript-Timeline. js

Vista prévia

Descripción

Timeline. js es un plugin de JavaScript Vanilla para renderizar un componente de línea de tiempo adaptable, horizontal/vertical desde HTML llano.

Nota: el componente también se puede implementar como un plugin de jQuery, vea adaptable horizontal/vertical Timeline plugin para jQuery .

Funcionamiento

Coloque los archivos Timeline. js ' en el documento HTML.

<link href="dist/css/timeline.min.css" rel="stylesheet">
<script src="dist/js/timeline.min.js"></script>

El código HTML necesario para la línea de tiempo.

<div class="timeline">

<div class="timeline__wrap">


<div class="timeline__items">



<div class="timeline__item">




<div class="timeline__content">





<h2>2018.3</h2>





<p>Story 1</p>




</div>



</div>



<div class="timeline__item">




<div class="timeline__content">





<h2>2017.5</h2>





<p>Story 2</p>




</div>



</div>



<div class="timeline__item">




<div class="timeline__content">





<h2>2016</h2>





<p>Story 3</p>




</div>



</div>



...


</div>

</div>
</div>

Inicialice Timeline. js y done.

timelineApp(document.querySelectorAll('.timeline'));

De forma predeterminada, el complemento representará una línea de tiempo vertical en la página. Para cambiar el modo a "horizontal", siga este paso.

timelineApp(document.querySelectorAll('.timeline'), {

mode: 'horizontal'
});

Si está utilizando el modo horizontal, la línea de tiempo cambiará automáticamente al modo "vertical" cuando el tamaño de la pantalla sea demasiado pequeño para ajustarse a la línea de tiempo. Para cambiar el punto de interrupción predeterminado, siga este paso:

timelineApp(document.querySelectorAll('.timeline'), {

mode: 'horizontal',

forceVerticalWidth: 800
});

También puede especificar el número de elementos que se mostrarán a la vez.

timelineApp(document.querySelectorAll('.timeline'), {

mode: 'horizontal',

visibleItems: 4,

forceVerticalWidth: 800
});

Cuando se utiliza el modo ' vertical ', se puede elegir la alineación del primer elemento.

timelineApp(document.querySelectorAll('.timeline'), {

verticalStartPosition: 'left' // or right
});

También puede config la línea de tiempo a través de los siguientes atributos de datos cuando tiene varias instancias en la página.

<div class="timeline" data-option-name="value">

...
</div>

Registro de cambios

11/05/2018

• Corregido: error cuando hay menos nodos para llenar el área visible de la línea de tiempo