wangying19911991的专栏

Getting Started

Here are a few easy steps to create a simple timeline. Open up your favorite text or HTML editor and start creating an HTML file.

Note

This tutorial has been partially updated for use with Timeline version 2.x. The screen shots are from Timeline version 1, so your Timeline will look somewhat different.

Examples

In addition to this tutorial, please check out:

Thelocal Timeline example:a Timeline web page and data file that doesn’t require a web server to use.Timeline examplesStep 1. Link to the API

In your HTML code, link to Timeline’s Javascript API code as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""> <html> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />…<script src="?bundle=true" type="text/javascript"></script>… </head> <body>… </body> </html>Step 2. Create a DIV Element

Create adivelement in your HTML code, and include a noscript element immediately after it.

<div id="my-timeline" style="height: 150px; border: 1px solid #aaa"></div><noscript>This page uses Javascript to show you a Timeline. Please enable Javascript in your browser to see the full page. Thank you.</noscript>

You should give it an ID as well as fix its height. You can optionally set its borders, this usually makes the timeline look better.

The noscript tag will help out people who have turned off Javascript in their browser. Timeline uses Javascript, which is included in all browsers and enabled by default. It does not use Java.

Step 3. CallTimeline.create()

Add two event handlers,onloadandonresize, to thebodyelement:

Then write the following code in ascriptblock or a separate Javascript file:

var tl;function onLoad() { var bandInfos = [Timeline.createBandInfo({width:"70%",intervalUnit: Timeline.DateTime.MONTH,intervalPixels: 100}),Timeline.createBandInfo({width:"30%",intervalUnit: Timeline.DateTime.YEAR,intervalPixels: 200}) ]; tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);}var resizeTimerID = null;function onResize() {if (resizeTimerID == null) {resizeTimerID = window.setTimeout(function() {resizeTimerID = null;tl.layout();}, 500);}}

</source>

Note that we put the code to construct the timeline in theonloadhandler to ensure that when we start to use Timeline’s API, all its code has been loaded. That code creates a horizontal timeline (below) with 2 bands: in the top band, a month spans 100 pixels (approximately, since a month here refers to 30 days while not every month is exactly 30 days long); and in the bottom band, a year spans 200 pixels. The top band takes up 70% of the timeline’s height, and the bottom band 30%.Note that the two bands scroll independently.

Step 4. Keep the bands in sync

To make the two bands scroll in synchrony, and then to make the bottom band highlights the visible time span of the top band, add the following code:

bandInfos[1].syncWith = 0; bandInfos[1].highlight = true;

</source>

Gives you this…

</source>

If you try to pan one band, the other is scrolled as well.

Step 5. Add Events

To add events to the timeline, create a!DefaultEventSource as shown below. Then load the event source with data from your XML, JSON or SPARCL event file. SeeEvent attributes and loading event files. It is not hard for developers to add additional loaders for other event file formats. Additional information onevent source. Add the following code:

… var eventSource = new Timeline.DefaultEventSource(); …eventSource: eventSource,date:"Jun 28 2006 00:00:00 GMT", …eventSource: eventSource,date:"Jun 28 2006 00:00:00 GMT", … Timeline.loadXML("example1.xml", function(xml, url) { eventSource.loadXML(xml, url); })

</source>

Gives you this…

穿过紫堇，穿过木棉，穿过时影时现的悲喜和无常。

相关文章：

你感兴趣的文章：

标签云：