jQuery Timelinr implémente un plug-in de chronologie verticale et horizontale (avec téléchargement du code source)_jquery

jquery.timelinr.js est un plug-in de chronologie jQuery avec des effets très sympas. jquery.timelinr peut créer des effets de chronologie horizontaux et verticaux et effectuer une lecture automatique. Vous pouvez contrôler l'effet d'animation de chaque commutateur de chronologie via les paramètres.

Lecture recommandée : j'ai partagé une implémentation jQuery du code source des effets spéciaux de la chronologie de développement d'entreprise Son effet d'affichage d'interface est très bon.

Affichage de l'effet Téléchargement du code source

Comment utiliser

L'utilisation de ce plug-in de chronologie nécessite l'introduction des fichiers jQuery et jquery.timelinr.js dans la page.

<script src="js/jquery-1.x.x.min.js"></script>
<script src="js/jquery.timelinr-0.9.x.js"></script>

Structure HTML

La structure HTML de base du plug-in de chronologie est la suivante :

<div id="timeline">
<ul id="dates">
<li><a href="#">date1</a></li>
<li><a href="#">date2</a></li>
</ul>
<ul id="issues">
<li id="date1">
<p>Lorem ipsum.</p>
</li>
<li id="date2">
<p>Lorem ipsum.</p>
</li>
</ul>
<a href="#" id="next">+</a> <!-- optional -->
<a href="#" id="prev">-</a> <!-- optional -->
</div>

Initialiser le plugin

Une fois l'élément DOM de la page chargé, vous pouvez initialiser le plug-in de chronologie via la méthode suivante.

$(function(){
$().timelinr();
});

Paramètres de configuration

Les paramètres de configuration du plug-in de timeline jquery.timelinr.js sont :

orientation : la direction de la timeline. Les valeurs facultatives sont : horizontale | verticale La valeur par défaut est 'horizontale'.
containersDiv : sélecteur d'ID du conteneur de timeline DIV. Par défaut : '#timeline'.
datesDiv : sélecteur d'ID du conteneur qui affiche l'heure. Par défaut : '#dates'.
datesSelectedClass : la classe de l’heure actuellement sélectionnée. La valeur par défaut est : « sélectionné ».
datesSpeed : la vitesse d'animation de la chronologie. Valeurs de 100 à 1 000, ou « lent », « normal », « rapide ». La valeur par défaut est : « normal ».
issuesDiv : sélecteur d'ID du DIV de la description de l'information. Par défaut : « #problèmes ».
issuesSelectedClass : classe du DIV décrite par les informations actuellement sélectionnées. La valeur par défaut est : « sélectionné ».
issuesSpeed : informations décrivant la vitesse d’animation du DIV. Valeurs de 100 à 1 000, ou « lent », « normal », « rapide ». La valeur par défaut est : « rapide ».
issuesTransparence : la transparence du DIV décrite par les informations. Valeur comprise entre 0 et 1, la valeur par défaut est 0,2.
issuesTransparencySpeed : la vitesse de l'animation de transparence. La valeur varie de 100 à 1 000, la valeur par défaut est 500.
prevButton : sélecteur d'ID pour le bouton Suivant. Par défaut : '#prev'.
nextButton : sélecteur d'ID pour le bouton suivant. Par défaut : '#suivant'.
arrowKeys : s'il faut autoriser le contrôle du clavier. Par défaut : faux.
startAt : l'indice d'index de départ, la valeur par défaut est 1.
autoPlay : s'il faut jouer automatiquement. La valeur par défaut est « faux ».
autoPlayDirection : direction de lecture automatique. Les valeurs facultatives sont : avant | La valeur par défaut est : « forward ».
autoPlayPause : intervalle de lecture automatique. Valeur entière, 1 000 = 1 seconde, la valeur par défaut est 2 000.
L'adresse github du plug-in de chronologie jquery.timelinr.js est : https://github.com/juanbrujo/jQuery-Timelinr

Ce qui précède est le contenu pertinent sur l'implémentation jQuery Timelinr du plug-in de chronologie verticale et horizontale. J'espère que cela sera utile à tout le monde !