Contao Community Documentation - Benutzerbeiträge [de]

Simile Timeline einbinden

2011-06-28T00:50:54Z

HowToMeetLadies: /* Daten laden */

[[Category:Dev Snippets]]
{{AppliesTo
|TLVersion=ab 2.6
|Version=ab 2.9
}}
Das Simile Timeline Widget ist eine JavaScript-basierte Komponente mit der Ereignisse auf einer (interaktiven) Zeitleiste angeordnet werden können.

=Frontend-Modul anlegen=
Als erstes wird ein Platzhalter für die Zeitleiste benötigt, dazu legt man im aktuellen Theme ein neues Frontend-Modul mit dem Namen "Timeline" an, wählt als Modultyp "Eigener HTML-Code".

<source lang="javascript">
<div id="tl" style="height: 300px; border: 1px solid #aaa"></div>
</source>

=Layout anlegen=
Nun kann ein Layout angelegt werden, was die benötigten JavaScript-Bibliotheken lädt und das Frontend-Modul einbindet.

Body onLoad: onLoad();

Zusätzliche <Head>-Tags:
<source lang="javascript">
<script src="http://static.simile.mit.edu/timeline/api-2.3.0/timeline-api.js?bundle=true" type="text/javascript"></script>

<script type="text/javascript">
var tl;
function onLoad() {
var eventSource = new Timeline.DefaultEventSource(0);

var theme = Timeline.ClassicTheme.create();
theme.event.bubble.width = 300;
theme.event.bubble.height = 200;
theme.mouseWheel = 'scroll';
var d = Timeline.DateTime.setIso8601Date(new Date(), "2011-06-27");
var bandInfos = [
Timeline.createBandInfo({
width: "80%",
intervalUnit: Timeline.DateTime.DAY,
intervalPixels: 100,
eventSource: eventSource,
date: d,
theme: theme
}),
Timeline.createBandInfo({
width: "10%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 150
}),
Timeline.createBandInfo({
width: "10%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200
})
];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
bandInfos[2].syncWith = 1;
bandInfos[2].highlight = true;

tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
// !! HIER DATEN LADEN !!
var mydata = "/timeline.json";
//tl.loadJSON(mydata+"?ts="+ (new Date().getTime()), function(json, url) { eventSource.loadJSON(json, url); });
// !! HIER DATEN LADEN !!
}
// bei bedarf
var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}
</script>
</source>

=Daten laden=
Um nun Ereignisse in die Zeitleiste zu bekommen kann man entweder die loadJSON-Zeile reaktivieren oder über ein weiteres HTML-Modul auf der jeweiligen Artikelseite einbinden.

<source lang="javascript">
<script type="text/javascript">
//Hier tl eventuell durch eine Variable die einen Zeiger zu einer Timeline-Instanz hält ersetzen.
var mydata = "/timeline.json";
//tl.loadJSON(mydata+"?ts="+ (new Date().getTime()), function(json, url) { eventSource.loadJSON(json, url); });
</script>
</source>

=Abschließendes=
Alternativ kann man das Frontend-Modul auch an anderen Stellen einbinden, wichtig ist jedoch das im jeweiligen Layout die entsprechenden Abhängigkeiten erfüllt sind! Besser wäre es auch das Timeline-DIV und das SCRIPT in ein einzelnes Modul zu verpacken, wobei die DIVs über unterschiedliche IDs angesprochen werden und somit auch mehrere Zeitleisten genutzt werden können. Eine genaue Anleitung (rund um das Widget) und Beschreibung der möglichen Datenformate (XML, JSON) findet sich unter http://www.simile-widgets.org/timeline/.

--[[Benutzer:HowToMeetLadies|HowToMeetLadies]] 22:51, 27. Jun. 2011 (CEST)

Simile Timeline einbinden

2011-06-28T00:32:23Z

HowToMeetLadies: /* Daten laden */

[[Category:Dev Snippets]]
{{AppliesTo
|TLVersion=ab 2.6
|Version=ab 2.9
}}
Das Simile Timeline Widget ist eine JavaScript-basierte Komponente mit der Ereignisse auf einer (interaktiven) Zeitleiste angeordnet werden können.

=Frontend-Modul anlegen=
Als erstes wird ein Platzhalter für die Zeitleiste benötigt, dazu legt man im aktuellen Theme ein neues Frontend-Modul mit dem Namen "Timeline" an, wählt als Modultyp "Eigener HTML-Code".

<source lang="javascript">
<div id="tl" style="height: 300px; border: 1px solid #aaa"></div>
</source>

=Layout anlegen=
Nun kann ein Layout angelegt werden, was die benötigten JavaScript-Bibliotheken lädt und das Frontend-Modul einbindet.

Body onLoad: onLoad();

Zusätzliche <Head>-Tags:
<source lang="javascript">
<script src="http://static.simile.mit.edu/timeline/api-2.3.0/timeline-api.js?bundle=true" type="text/javascript"></script>

<script type="text/javascript">
var tl;
function onLoad() {
var eventSource = new Timeline.DefaultEventSource(0);

var theme = Timeline.ClassicTheme.create();
theme.event.bubble.width = 300;
theme.event.bubble.height = 200;
theme.mouseWheel = 'scroll';
var d = Timeline.DateTime.setIso8601Date(new Date(), "2011-06-27");
var bandInfos = [
Timeline.createBandInfo({
width: "80%",
intervalUnit: Timeline.DateTime.DAY,
intervalPixels: 100,
eventSource: eventSource,
date: d,
theme: theme
}),
Timeline.createBandInfo({
width: "10%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 150
}),
Timeline.createBandInfo({
width: "10%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200
})
];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
bandInfos[2].syncWith = 1;
bandInfos[2].highlight = true;

tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
// !! HIER DATEN LADEN !!
var mydata = "/timeline.json";
//tl.loadJSON(mydata+"?ts="+ (new Date().getTime()), function(json, url) { eventSource.loadJSON(json, url); });
// !! HIER DATEN LADEN !!
}
// bei bedarf
var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}
</script>
</source>

=Daten laden=
Um nun Ereignisse in die Zeitleiste zu bekommen kann man entweder die loadJSON-Zeile reaktivieren oder über ein weiteres HTML-Modul auf der jeweiligen Artikelseite einbinden.

<source lang="javascript">
<script>
//Hier tl eventuell durch eine Variable die einen Zeiger zu einer Timeline-Instanz hält ersetzen.
var mydata = "/timeline.json";
//tl.loadJSON(mydata+"?ts="+ (new Date().getTime()), function(json, url) { eventSource.loadJSON(json, url); });
</script>
</source>

=Abschließendes=
Alternativ kann man das Frontend-Modul auch an anderen Stellen einbinden, wichtig ist jedoch das im jeweiligen Layout die entsprechenden Abhängigkeiten erfüllt sind! Besser wäre es auch das Timeline-DIV und das SCRIPT in ein einzelnes Modul zu verpacken, wobei die DIVs über unterschiedliche IDs angesprochen werden und somit auch mehrere Zeitleisten genutzt werden können. Eine genaue Anleitung (rund um das Widget) und Beschreibung der möglichen Datenformate (XML, JSON) findet sich unter http://www.simile-widgets.org/timeline/.

--[[Benutzer:HowToMeetLadies|HowToMeetLadies]] 22:51, 27. Jun. 2011 (CEST)

Simile Timeline einbinden

2011-06-28T00:32:04Z

HowToMeetLadies: /* Layout anlegen */

[[Category:Dev Snippets]]
{{AppliesTo
|TLVersion=ab 2.6
|Version=ab 2.9
}}
Das Simile Timeline Widget ist eine JavaScript-basierte Komponente mit der Ereignisse auf einer (interaktiven) Zeitleiste angeordnet werden können.

=Frontend-Modul anlegen=
Als erstes wird ein Platzhalter für die Zeitleiste benötigt, dazu legt man im aktuellen Theme ein neues Frontend-Modul mit dem Namen "Timeline" an, wählt als Modultyp "Eigener HTML-Code".

<source lang="javascript">
<div id="tl" style="height: 300px; border: 1px solid #aaa"></div>
</source>

=Layout anlegen=
Nun kann ein Layout angelegt werden, was die benötigten JavaScript-Bibliotheken lädt und das Frontend-Modul einbindet.

Body onLoad: onLoad();

Zusätzliche <Head>-Tags:
<source lang="javascript">
<script src="http://static.simile.mit.edu/timeline/api-2.3.0/timeline-api.js?bundle=true" type="text/javascript"></script>

<script type="text/javascript">
var tl;
function onLoad() {
var eventSource = new Timeline.DefaultEventSource(0);

var theme = Timeline.ClassicTheme.create();
theme.event.bubble.width = 300;
theme.event.bubble.height = 200;
theme.mouseWheel = 'scroll';
var d = Timeline.DateTime.setIso8601Date(new Date(), "2011-06-27");
var bandInfos = [
Timeline.createBandInfo({
width: "80%",
intervalUnit: Timeline.DateTime.DAY,
intervalPixels: 100,
eventSource: eventSource,
date: d,
theme: theme
}),
Timeline.createBandInfo({
width: "10%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 150
}),
Timeline.createBandInfo({
width: "10%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200
})
];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
bandInfos[2].syncWith = 1;
bandInfos[2].highlight = true;

tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
// !! HIER DATEN LADEN !!
var mydata = "/timeline.json";
//tl.loadJSON(mydata+"?ts="+ (new Date().getTime()), function(json, url) { eventSource.loadJSON(json, url); });
// !! HIER DATEN LADEN !!
}
// bei bedarf
var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}
</script>
</source>

=Daten laden=
Um nun Ereignisse in die Zeitleiste zu bekommen kann man entweder die loadJSON-Zeile reaktivieren oder über ein weiteres HTML-Modul auf der jeweiligen Artikelseite einbinden.

<source lang="javascript">
<script>
//Hier tl eventuell durch eine Variable die einen Zeiger zu einer Timeline-Instanz hält ersetzen.
var mydata = "/timeline.json";
//tl.loadJSON(mydata+"?"+ (new Date().getTime()), function(json, url) { eventSource.loadJSON(json, url); });
</script>
</source>

=Abschließendes=
Alternativ kann man das Frontend-Modul auch an anderen Stellen einbinden, wichtig ist jedoch das im jeweiligen Layout die entsprechenden Abhängigkeiten erfüllt sind! Besser wäre es auch das Timeline-DIV und das SCRIPT in ein einzelnes Modul zu verpacken, wobei die DIVs über unterschiedliche IDs angesprochen werden und somit auch mehrere Zeitleisten genutzt werden können. Eine genaue Anleitung (rund um das Widget) und Beschreibung der möglichen Datenformate (XML, JSON) findet sich unter http://www.simile-widgets.org/timeline/.

--[[Benutzer:HowToMeetLadies|HowToMeetLadies]] 22:51, 27. Jun. 2011 (CEST)

Simile Timeline einbinden

2011-06-27T21:02:33Z

HowToMeetLadies: /* Daten laden */

[[Category:Dev Snippets]]
{{AppliesTo
|TLVersion=ab 2.6
|Version=ab 2.9
}}
Das Simile Timeline Widget ist eine JavaScript-basierte Komponente mit der Ereignisse auf einer (interaktiven) Zeitleiste angeordnet werden können.

=Frontend-Modul anlegen=
Als erstes wird ein Platzhalter für die Zeitleiste benötigt, dazu legt man im aktuellen Theme ein neues Frontend-Modul mit dem Namen "Timeline" an, wählt als Modultyp "Eigener HTML-Code".

<source lang="javascript">
<div id="tl" style="height: 300px; border: 1px solid #aaa"></div>
</source>

=Layout anlegen=
Nun kann ein Layout angelegt werden, was die benötigten JavaScript-Bibliotheken lädt und das Frontend-Modul einbindet.

Body onLoad: onLoad();

Zusätzliche <Head>-Tags:
<source lang="javascript">
<script src="http://static.simile.mit.edu/timeline/api-2.3.0/timeline-api.js?bundle=true" type="text/javascript"></script>

<script>
var tl;
function onLoad() {
var eventSource = new Timeline.DefaultEventSource(0);

var theme = Timeline.ClassicTheme.create();
theme.event.bubble.width = 300;
theme.event.bubble.height = 200;
theme.mouseWheel = 'scroll';
var d = Timeline.DateTime.setIso8601Date(new Date(), "2011-06-27");
var bandInfos = [
Timeline.createBandInfo({
width: "80%",
intervalUnit: Timeline.DateTime.DAY,
intervalPixels: 100,
eventSource: eventSource,
date: d,
theme: theme
}),
Timeline.createBandInfo({
width: "10%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 150
}),
Timeline.createBandInfo({
width: "10%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200
})
];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
bandInfos[2].syncWith = 1;
bandInfos[2].highlight = true;

tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
// !! HIER DATEN LADEN !!
//tl.loadJSON("/timeline.json?"+ (new Date().getTime()), function(json, url) { eventSource.loadJSON(json, url); });
// !! HIER DATEN LADEN !!
}
// bei bedarf
var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}
</script>
</source>

=Daten laden=
Um nun Ereignisse in die Zeitleiste zu bekommen kann man entweder die loadJSON-Zeile reaktivieren oder über ein weiteres HTML-Modul auf der jeweiligen Artikelseite einbinden.

<source lang="javascript">
<script>
//Hier tl eventuell durch eine Variable die einen Zeiger zu einer Timeline-Instanz hält ersetzen.
var mydata = "/timeline.json";
//tl.loadJSON(mydata+"?"+ (new Date().getTime()), function(json, url) { eventSource.loadJSON(json, url); });
</script>
</source>

=Abschließendes=
Alternativ kann man das Frontend-Modul auch an anderen Stellen einbinden, wichtig ist jedoch das im jeweiligen Layout die entsprechenden Abhängigkeiten erfüllt sind! Besser wäre es auch das Timeline-DIV und das SCRIPT in ein einzelnes Modul zu verpacken, wobei die DIVs über unterschiedliche IDs angesprochen werden und somit auch mehrere Zeitleisten genutzt werden können. Eine genaue Anleitung (rund um das Widget) und Beschreibung der möglichen Datenformate (XML, JSON) findet sich unter http://www.simile-widgets.org/timeline/.

--[[Benutzer:HowToMeetLadies|HowToMeetLadies]] 22:51, 27. Jun. 2011 (CEST)

Simile Timeline einbinden

2011-06-27T20:57:40Z

HowToMeetLadies: /* Frontend-Modul anlegen */

[[Category:Dev Snippets]]
{{AppliesTo
|TLVersion=ab 2.6
|Version=ab 2.9
}}
Das Simile Timeline Widget ist eine JavaScript-basierte Komponente mit der Ereignisse auf einer (interaktiven) Zeitleiste angeordnet werden können.

=Frontend-Modul anlegen=
Als erstes wird ein Platzhalter für die Zeitleiste benötigt, dazu legt man im aktuellen Theme ein neues Frontend-Modul mit dem Namen "Timeline" an, wählt als Modultyp "Eigener HTML-Code".

<source lang="javascript">
<div id="tl" style="height: 300px; border: 1px solid #aaa"></div>
</source>

=Layout anlegen=
Nun kann ein Layout angelegt werden, was die benötigten JavaScript-Bibliotheken lädt und das Frontend-Modul einbindet.

Body onLoad: onLoad();

Zusätzliche <Head>-Tags:
<source lang="javascript">
<script src="http://static.simile.mit.edu/timeline/api-2.3.0/timeline-api.js?bundle=true" type="text/javascript"></script>

<script>
var tl;
function onLoad() {
var eventSource = new Timeline.DefaultEventSource(0);

var theme = Timeline.ClassicTheme.create();
theme.event.bubble.width = 300;
theme.event.bubble.height = 200;
theme.mouseWheel = 'scroll';
var d = Timeline.DateTime.setIso8601Date(new Date(), "2011-06-27");
var bandInfos = [
Timeline.createBandInfo({
width: "80%",
intervalUnit: Timeline.DateTime.DAY,
intervalPixels: 100,
eventSource: eventSource,
date: d,
theme: theme
}),
Timeline.createBandInfo({
width: "10%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 150
}),
Timeline.createBandInfo({
width: "10%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200
})
];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
bandInfos[2].syncWith = 1;
bandInfos[2].highlight = true;

tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
// !! HIER DATEN LADEN !!
//tl.loadJSON("/timeline.json?"+ (new Date().getTime()), function(json, url) { eventSource.loadJSON(json, url); });
// !! HIER DATEN LADEN !!
}
// bei bedarf
var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}
</script>
</source>

=Daten laden=
Um nun Ereignisse in die Zeitleiste zu bekommen kann man entweder die loadJSON-Zeile reaktivieren oder über ein weiteres HTML-Modul auf der jeweiligen Artikelseite einbinden.

=Abschließendes=
Alternativ kann man das Frontend-Modul auch an anderen Stellen einbinden, wichtig ist jedoch das im jeweiligen Layout die entsprechenden Abhängigkeiten erfüllt sind! Besser wäre es auch das Timeline-DIV und das SCRIPT in ein einzelnes Modul zu verpacken, wobei die DIVs über unterschiedliche IDs angesprochen werden und somit auch mehrere Zeitleisten genutzt werden können. Eine genaue Anleitung (rund um das Widget) und Beschreibung der möglichen Datenformate (XML, JSON) findet sich unter http://www.simile-widgets.org/timeline/.

--[[Benutzer:HowToMeetLadies|HowToMeetLadies]] 22:51, 27. Jun. 2011 (CEST)

Simile Timeline einbinden

2011-06-27T20:56:14Z

HowToMeetLadies: Script

[[Category:Dev Snippets]]
{{AppliesTo
|TLVersion=ab 2.6
|Version=ab 2.9
}}
Das Simile Timeline Widget ist eine JavaScript-basierte Komponente mit der Ereignisse auf einer (interaktiven) Zeitleiste angeordnet werden können.

=Frontend-Modul anlegen=
Als erstes wird ein Platzhalter für die Zeitleiste benötigt, dazu legt man im aktuellen Theme ein neues Frontend-Modul mit dem Namen "Timeline" an, wählt als Modultyp "Eigener HTML-Code".

<div id="tl" style="height: 300px; border: 1px solid #aaa"></div>

=Layout anlegen=
Nun kann ein Layout angelegt werden, was die benötigten JavaScript-Bibliotheken lädt und das Frontend-Modul einbindet.

Body onLoad: onLoad();

Zusätzliche <Head>-Tags:
<source lang="javascript">
<script src="http://static.simile.mit.edu/timeline/api-2.3.0/timeline-api.js?bundle=true" type="text/javascript"></script>

<script>
var tl;
function onLoad() {
var eventSource = new Timeline.DefaultEventSource(0);

var theme = Timeline.ClassicTheme.create();
theme.event.bubble.width = 300;
theme.event.bubble.height = 200;
theme.mouseWheel = 'scroll';
var d = Timeline.DateTime.setIso8601Date(new Date(), "2011-06-27");
var bandInfos = [
Timeline.createBandInfo({
width: "80%",
intervalUnit: Timeline.DateTime.DAY,
intervalPixels: 100,
eventSource: eventSource,
date: d,
theme: theme
}),
Timeline.createBandInfo({
width: "10%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 150
}),
Timeline.createBandInfo({
width: "10%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200
})
];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
bandInfos[2].syncWith = 1;
bandInfos[2].highlight = true;

tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
// !! HIER DATEN LADEN !!
//tl.loadJSON("/timeline.json?"+ (new Date().getTime()), function(json, url) { eventSource.loadJSON(json, url); });
// !! HIER DATEN LADEN !!
}
// bei bedarf
var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}
</script>
</source>

=Daten laden=
Um nun Ereignisse in die Zeitleiste zu bekommen kann man entweder die loadJSON-Zeile reaktivieren oder über ein weiteres HTML-Modul auf der jeweiligen Artikelseite einbinden.

=Abschließendes=
Alternativ kann man das Frontend-Modul auch an anderen Stellen einbinden, wichtig ist jedoch das im jeweiligen Layout die entsprechenden Abhängigkeiten erfüllt sind! Besser wäre es auch das Timeline-DIV und das SCRIPT in ein einzelnes Modul zu verpacken, wobei die DIVs über unterschiedliche IDs angesprochen werden und somit auch mehrere Zeitleisten genutzt werden können. Eine genaue Anleitung (rund um das Widget) und Beschreibung der möglichen Datenformate (XML, JSON) findet sich unter http://www.simile-widgets.org/timeline/.

--[[Benutzer:HowToMeetLadies|HowToMeetLadies]] 22:51, 27. Jun. 2011 (CEST)

Simile Timeline einbinden

2011-06-27T20:51:54Z

HowToMeetLadies: Die Seite wurde neu angelegt: „Category:Dev Snippets {{AppliesTo |TLVersion=ab 2.6 |Version=ab 2.9 }} Das Simile Timeline Widget ist eine JavaScript-basierte Komponente mit der Ereignisse a…“

[[Category:Dev Snippets]]
{{AppliesTo
|TLVersion=ab 2.6
|Version=ab 2.9
}}
Das Simile Timeline Widget ist eine JavaScript-basierte Komponente mit der Ereignisse auf einer (interaktiven) Zeitleiste angeordnet werden können.

=Frontend-Modul anlegen=
Als erstes wird ein Platzhalter für die Zeitleiste benötigt, dazu legt man im aktuellen Theme ein neues Frontend-Modul mit dem Namen "Timeline" an, wählt als Modultyp "Eigener HTML-Code".

<div id="tl" style="height: 300px; border: 1px solid #aaa"></div>

=Layout anlegen=
Nun kann ein Layout angelegt werden, was die benötigten JavaScript-Bibliotheken lädt und das Frontend-Modul einbindet.

Body onLoad: onLoad();

Zusätzliche <Head>-Tags:

<script src="http://static.simile.mit.edu/timeline/api-2.3.0/timeline-api.js?bundle=true" type="text/javascript"></script>

<script>
var tl;
function onLoad() {
var eventSource = new Timeline.DefaultEventSource(0);

var theme = Timeline.ClassicTheme.create();
theme.event.bubble.width = 300;
theme.event.bubble.height = 200;
theme.mouseWheel = 'scroll';
var d = Timeline.DateTime.setIso8601Date(new Date(), "2011-06-27");
var bandInfos = [
Timeline.createBandInfo({
width: "80%",
intervalUnit: Timeline.DateTime.DAY,
intervalPixels: 100,
eventSource: eventSource,
date: d,
theme: theme
}),
Timeline.createBandInfo({
width: "10%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 150
}),
Timeline.createBandInfo({
width: "10%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200
})
];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
bandInfos[2].syncWith = 1;
bandInfos[2].highlight = true;

tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
// !! HIER DATEN LADEN !!
//tl.loadJSON("/timeline.json?"+ (new Date().getTime()), function(json, url) { eventSource.loadJSON(json, url); });
// !! HIER DATEN LADEN !!
}
// bei bedarf
var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}
</script>

=Daten laden=
Um nun Ereignisse in die Zeitleiste zu bekommen kann man entweder die loadJSON-Zeile reaktivieren oder über ein weiteres HTML-Modul auf der jeweiligen Artikelseite einbinden.

=Abschließendes=
Alternativ kann man das Frontend-Modul auch an anderen Stellen einbinden, wichtig ist jedoch das im jeweiligen Layout die entsprechenden Abhängigkeiten erfüllt sind! Besser wäre es auch das Timeline-DIV und das SCRIPT in ein einzelnes Modul zu verpacken, wobei die DIVs über unterschiedliche IDs angesprochen werden und somit auch mehrere Zeitleisten genutzt werden können. Eine genaue Anleitung (rund um das Widget) und Beschreibung der möglichen Datenformate (XML, JSON) findet sich unter http://www.simile-widgets.org/timeline/.

--[[Benutzer:HowToMeetLadies|HowToMeetLadies]] 22:51, 27. Jun. 2011 (CEST)