Chronoline.js, une librairie javascript pour créer des frises chronologiques - 365 Jours

Chronoline.js une librairie javascript qui permet de générer de belles frises chronologiques simplement à partir d'une liste d’évènements et de dates.
Elle nécessite d'avoir inclus raphael.js dans son code.

Ressources

Exemple d'initialisation :

var events = [
  {dates: [new Date(2011, 2, 31)], title: "2011 Season Opener", section: 0},
  {dates: [new Date(2012, 1, 29)], title: "Spring Training Begins", section: 2},
  {dates: [new Date(2012, 3, 9), new Date(2012, 3, 11)], title: "Atlanta Braves @ Houston Astros", section: 1}
];

var timeline = new Chronoline(document.getElementById("target1"), events, {});

Démonstration : http://stoicloofah.github.com/chronoline.js/
Téléchargement : https://github.com/StoicLoofah/chronoline.js

Recherches associées

librairie javascript create thumbnails - chronoline.js - chronoline php mysql - chronoline ajax - chronoline.js php - chronoline.js php exemple - créer une frise d'avancement en javascript - js creer un timeline - frise chronolihe - librairie frise chronologique javascript - js chronologique - Chronoline.js - comment créer une frise chronologique en javascript

0/5 (0 avis)

Commentaires

blog comments powered by Disqus

Articles similaires

SQuerySet Object ( [filters] => Array ( [0] => published=1 AND categories=? AND id<>? ) [excludes] => Array ( ) [includes] => Array ( ) [params] => Array ( [0] => javascript [1] => 248 ) [order_by] => Array ( [0] => rand() ) [joins] => Array ( ) [offset] => 0 [limit] => 6 [distinct] => [count:protected] => 0 [cache:protected] => [meta:protected] => STableMap Object ( [class] => Article [underscored] => article [table_name] => articles [identity_field] => id [inheritance_field] => type [attributes] => Array ( [id] => SColumn Object ( [name] => id [type] => integer [limit] => [default] => [null] => 1 ) [date] => SColumn Object ( [name] => date [type] => datetime [limit] => [default] => [null] => 1 ) [titre] => SColumn Object ( [name] => titre [type] => string [limit] => [default] => [null] => 1 ) [youtube] => SColumn Object ( [name] => youtube [type] => string [limit] => [default] => [null] => 1 ) [texte] => SColumn Object ( [name] => texte [type] => text [limit] => [default] => [null] => 1 ) [ressources] => SColumn Object ( [name] => ressources [type] => text [limit] => [default] => [null] => 1 ) [views] => SColumn Object ( [name] => views [type] => integer [limit] => [default] => 0 [null] => 1 ) [categories] => SColumn Object ( [name] => categories [type] => string [limit] => [default] => [null] => 1 ) [published] => SColumn Object ( [name] => published [type] => integer [limit] => [default] => 0 [null] => 1 ) [created_on] => SColumn Object ( [name] => created_on [type] => datetime [limit] => [default] => [null] => 1 ) [updated_on] => SColumn Object ( [name] => updated_on [type] => datetime [limit] => [default] => [null] => 1 ) [commentaires] => SAssociation Object ( [meta] => SHasManyMeta Object ( [dependent] => [order] => [through_table_name] => [through_foreign_key] => [source_assoc_type] => [type] => SHasMany [class] => Commentaire [foreign_key] => article_id [valid_options:protected] => Array ( [0] => assoc_type [1] => class_name [2] => foreign_key ) [base_meta:protected] => ) ) [notifications] => SAssociation Object ( [meta] => SHasManyMeta Object ( [dependent] => [order] => [through_table_name] => [through_foreign_key] => [source_assoc_type] => [type] => SHasMany [class] => Notification [foreign_key] => article_id [valid_options:protected] => Array ( [0] => assoc_type [1] => class_name [2] => foreign_key ) [base_meta:protected] => ) ) ) [relationships] => Array ( [commentaires] => has_many [notifications] => has_many ) [decorators] => Array ( ) [content_attributes:private] => [content_attributes_names:private] => ) [conn:protected] => SMySqlAdapter Object ( [native_db_types] => Array ( [primary_key] => int(11) DEFAULT NULL auto_increment [string] => Array ( [name] => varchar [limit] => 255 ) [text] => Array ( [name] => text ) [float] => Array ( [name] => float ) [datetime] => Array ( [name] => datetime ) [date] => Array ( [name] => date ) [integer] => Array ( [name] => int [limit] => 11 ) [boolean] => Array ( [name] => tinyint [limit] => 1 ) ) [conn:protected] => SMysqlLibraryWrapper Object ( [conn:private] => Resource id #17 ) [log:protected] => Array ( [0] => SQL (0.01907) SHOW COLUMNS FROM logs [1] => SQL (0.00650) SHOW COLUMNS FROM compteurs [2] => SQL (0.00237) SHOW COLUMNS FROM commentaires [3] => SQL (0.00552) SHOW COLUMNS FROM articles [4] => SQL (0.00623) SELECT * FROM articles WHERE id=248 AND published=1 [5] => SQL (0.00096) SELECT COUNT(*) FROM articles WHERE published=1 AND categories='javascript' AND id<>'248' [6] => SQL (4.19993) SELECT DISTINCT COUNT(*) FROM logs WHERE url LIKE 'http://%365-jours.fr/regarder/episode/248' AND (referer LIKE '%google%?q=%' OR referer LIKE '%google%&q=%') [7] => SQL (0.60129) SELECT DISTINCT * FROM logs WHERE url LIKE 'http://%365-jours.fr/regarder/episode/248' AND (referer LIKE '%google%?q=%' OR referer LIKE '%google%&q=%') LIMIT 3000 ) [columns_cache:protected] => Array ( [logs] => Array ( [id] => SColumn Object ( [name] => id [type] => integer [limit] => [default] => [null] => 1 ) [ip] => SColumn Object ( [name] => ip [type] => string [limit] => [default] => [null] => 1 ) [url] => SColumn Object ( [name] => url [type] => string [limit] => [default] => [null] => 1 ) [referer] => SColumn Object ( [name] => referer [type] => string [limit] => [default] => [null] => 1 ) [agent] => SColumn Object ( [name] => agent [type] => string [limit] => [default] => [null] => 1 ) [created_on] => SColumn Object ( [name] => created_on [type] => datetime [limit] => [default] => [null] => 1 ) [updated_on] => SColumn Object ( [name] => updated_on [type] => datetime [limit] => [default] => [null] => 1 ) ) [compteurs] => Array ( [id] => SColumn Object ( [name] => id [type] => integer [limit] => [default] => [null] => 1 ) [name] => SColumn Object ( [name] => name [type] => string [limit] => [default] => [null] => 1 ) [value] => SColumn Object ( [name] => value [type] => integer [limit] => [default] => [null] => 1 ) [created_on] => SColumn Object ( [name] => created_on [type] => datetime [limit] => [default] => [null] => 1 ) [updated_on] => SColumn Object ( [name] => updated_on [type] => datetime [limit] => [default] => [null] => 1 ) ) [commentaires] => Array ( [id] => SColumn Object ( [name] => id [type] => integer [limit] => [default] => [null] => 1 ) [article_id] => SColumn Object ( [name] => article_id [type] => integer [limit] => [default] => [null] => 1 ) [nom] => SColumn Object ( [name] => nom [type] => string [limit] => [default] => [null] => 1 ) [img] => SColumn Object ( [name] => img [type] => string [limit] => [default] => [null] => 1 ) [texte] => SColumn Object ( [name] => texte [type] => text [limit] => [default] => [null] => 1 ) [url] => SColumn Object ( [name] => url [type] => string [limit] => [default] => [null] => 1 ) [ip] => SColumn Object ( [name] => ip [type] => string [limit] => [default] => [null] => 1 ) [created_on] => SColumn Object ( [name] => created_on [type] => datetime [limit] => [default] => [null] => 1 ) [updated_on] => SColumn Object ( [name] => updated_on [type] => datetime [limit] => [default] => [null] => 1 ) ) [articles] => Array ( [id] => SColumn Object ( [name] => id [type] => integer [limit] => [default] => [null] => 1 ) [date] => SColumn Object ( [name] => date [type] => datetime [limit] => [default] => [null] => 1 ) [titre] => SColumn Object ( [name] => titre [type] => string [limit] => [default] => [null] => 1 ) [youtube] => SColumn Object ( [name] => youtube [type] => string [limit] => [default] => [null] => 1 ) [texte] => SColumn Object ( [name] => texte [type] => text [limit] => [default] => [null] => 1 ) [ressources] => SColumn Object ( [name] => ressources [type] => text [limit] => [default] => [null] => 1 ) [views] => SColumn Object ( [name] => views [type] => integer [limit] => [default] => 0 [null] => 1 ) [categories] => SColumn Object ( [name] => categories [type] => string [limit] => [default] => [null] => 1 ) [published] => SColumn Object ( [name] => published [type] => integer [limit] => [default] => 0 [null] => 1 ) [created_on] => SColumn Object ( [name] => created_on [type] => datetime [limit] => [default] => [null] => 1 ) [updated_on] => SColumn Object ( [name] => updated_on [type] => datetime [limit] => [default] => [null] => 1 ) ) ) [runtime] => 4.8418715000153 [config] => Array ( [host] => localhost [port] => [user] => root [pass] => my2210 [dbname] => 365jours [adapter] => MySql ) ) [pk_lookup:protected] => Array ( ) [schema_abbr:protected] => Array ( ) )

Mousetrap

Ajoutez rapidement des raccourcis clavier à vos pages Web avec Mousetrap

Piecon

Piecon, une librairie javascript pour mettre une icône de chargement en favicon

Horrible_js

Rendez votre code javascript illisible avec Horrible.js

Tablesort_js

tablesort.js, une petite librairie javascript pour permettre le tri sur des tableaux

Pdf_js

Un lecteur de PDF en javascript et HTML5 : PDF.js

Par Nicolas Thomas

Retourner à l'accueil

365 Jours est un blog consacré au développement de site Internet, créé par l'agence MangoLight.

Vous y trouverez de nombreux tutoriaux vidéo, astuces et ressources sur la création de site Web.

Vous avez besoin d'un site Internet ?
Votre site a un problème ?
Vous voulez ajouter une fonctionnalité ?
Vous souhaitez obtenir un devis ?

Contactez-nous

Suivez-nous

RSS Youtube Facebook Twitter

Annonces

Catégories

Astuce 36

Sites créés

Facebook