présentation

Configuration

Frise d'exemple

support des regles

support des bandes
Pour l'instant le container est vide.
Faut peupler tout ca!

html (cacher|voir le code)

<script src="timeline.js"></script><script src="timeline.min.js"></script>

<link rel="stylesheet" href="styles/timeline.css" />

<div id="friseA_support">
	<div id="friseA_supportRegles" title="suport de règle">  </div>
	<div id="friseA_supportDatas" title="support pour les bandes">

</div>

les support de règles et d'événement sont 2 flux d'affichages. Le jeu de données sont les mêmes. pour creer/afficher une bande dans le flux règle ciser {"genre":"regle"}. tout autre genre sera "evt"

Et c'est tout!

style (cacher|voir le code)

regarder le code source: styles/timeline.css

le code javascript pour la frise

instanciation de la frise

définition de la bande modele et instanciation de la frise(cacher|voir le code) - (executer le code)

// - definition de la bande qui servira de modele aux autres - //
bandeModele={
                 'date_deb': {"an":2014,"ms":10, "jr":1, "unite":"jr"}
                ,'date_fin': {"an":2015,"ms":12,"jr":31,"unite":"jr"}
                ,'left_marge': 50 // marge gauche avant la bande
                ,'longueur': 500  // longueur d'une bande
                ,'top': 0         // position haute d'une bande
                ,'hauteur': 30    // hauteru d'une bande
                }

friseA=new Tfrise({
        "idHTML":"friseA_support"
        ,"supportRegles":"friseA_bandeRegle_support"
	,"supportDatas": "friseA_bandeData_support"
	,"classes":"bande_evt"
        ,"bandeModele":bandeModele               
	});

requis:

id: balises dans laquelle les éléments (bandes, evt) sont crées

Créer (et afficher) une bande de données simple (cacher|voir le code) - (executer le code)

// - definition des bandes - //
// -- bande1: declaration de idHTML -- //
bande1={
	 "genre":"evt","idHTML":"bande1","nom":"bande1"
	,"top": 0,"hauteur":10,"classes":"bande_evt"
	,"title": "afficher au survol de la bande: bande1"
	,"texte":"bande 1"     // facultatif
	// creation d'une bande label associé à cette bande (facultatif)
	,"label":{
		 "classes":"bande_label"
		,"texte":"label"
		}
	 }
friseA.creerBande(bande1);

l'element <div> est créer a partir de l'idHTML donnée, sinon une idHTML est créer aleatoirement (ou si idHTML='auto')
un style peut etre appliqué à la balise #idHTML
une balise avec l'id corespondant à idHTML ne doit pas deja exister
par defaut la bande est positionnée par rapport sa frise d'origine.
retourne le nom calculer

Créer (et afficher) une bande de données surcharge (cacher|voir le code) - (executer le code)

	var surcharges={
		'idHTML':"auto"
		,"nom":"bande1a"
		,"top":20
		,"classes":"bande_evt2"
		,"title":"bande 1 surchargé"
		,"texte":"bande 2"     // facultatif
		}
	friseA.creerBande(bande1,surcharges);

tout peut etre surcharger

Créer (et afficher) un événement (cacher|voir le code) - (executer le code)

	// - definition de l'evenement - //
	var evt={
		 "date_deb":{"an":2014,"ms":1,"jr":2}
		,"date_fin":{"an":2014,"ms":12,"jr":31}
		,"titre":"titre de l'event"
		,"title":"afficher au survol de la souris","texte":"texte afficher dans l'event (value)"
		}
	var bandeGenre="evt";
	var bandeNom="bande1a";
	var evtOpt={"classes":"evt1"}	// surcharge
	// -- executer des callback (facultatif) -- //
	var cb={};
	friseA.addEvtInBande(bandeGenre,bandeNom,evt,evtOpt,cb);

Créer (et afficher) une bande de genre regle (voir/modifier le code) - (executer le code)

	// - definition de la bande- //
	bandeRegle1={"genre":"regle","nom":"regle1","top": 0,"hauteur":10,"classes":"bande_regles","title": "regle1"}

	// - creation de la bande- //
	friseA.creerBande(bandeRegle1);

Créer (et afficher) un événement avec la date actuelle (cacher|voir le code) - (executer le code)

	var evt={
		 "date_deb":new TrepereTemporel_dateTime("now")
		,"titre":"now"
		,"title":""
		,"texte":"now"
		}
	var bandeGenre="regle";
	var bandeNom="regle1"; 
	var evtOpt={"classes":"regleEvt1 Onepx"}	// surcharge
	// -- executer des callback (facultatif) -- //
	var cb={};
	friseA.addEvtInBande(bandeGenre,bandeNom,evt,evtOpt,cb);

Repère de règles

créer des repères manuellement (voir/modifier le code) - (executer le code)

var bandeGenre="regle";
var bandeNom="regle1"; 
var evtOpt={}; // surcharge des événements
var cb={};  // callback
var evtOpt={"classes":"regleEvt1 Onepx"}	// surcharge

for (var m=1;m <= 12;m++){ 
	var evt={ "date_deb":{"ms":m,"an":2014}};
	friseA.addEvtInBande(bandeGenre,bandeNom,evt,evtOpt,cb);
	}

créer des repères automatiquement calculé par rapport aà la frise (voir/modifier le code) - (executer le code)

var config={
"bandeNom":""
,"repereNb":10  // nombre de reperes
// deb,fin: {'an':an,'ms':ms, etc}
// callBack={} ex {'title':'indexTableauDuTitleVoulu'}
}
friseA.creerReperesAuto(config);

Déplacement

déplacer la frise vers le passé ou le future (voir/modifier le code) - (executer le code)

	var uniteNb=-10;    // nombre d'unité à déplacé négatif: passé positif:future
	var uniteType="jr"; // type de l'unité "jr","ms","an" 
	friseA.translate(uniteNb,uniteType);

redéfuinir les limites de la frise (voir/modifier le code) - (executer le code)

	var deb= {"jr":10,"ms":4,"an":2014}    // nombre d'unité à déplacé négatif: passé positif:future
	var fin=new TrepereTemporel_dateTime("now");         // valeur spéciale prend la valeur date() 
	friseA.limite(deb,fin);

->lib-repereTemporel

librairie : repereTemporel