Timeline"
From Documentation
Jimmyshiau (talk | contribs) |
Jimmyshiau (talk | contribs) |
||
| Line 11: | Line 11: | ||
[http://www.simile-widgets.org/timeline/ Timeline]is a DHTML-based Ajax widget for visualizing time-based events developed by SIMILE project of MIT. It is like Google Maps for time-based information. | [http://www.simile-widgets.org/timeline/ Timeline]is a DHTML-based Ajax widget for visualizing time-based events developed by SIMILE project of MIT. It is like Google Maps for time-based information. | ||
| + | A timeline contains one or more Bands, which can be panned infinitely by dragging with the mouse pointer, using the mouse scroll-wheel or the keyboard's arrow buttons. | ||
| + | A band can be configured to synchronize with another band such that panning one band also scrolls the other. | ||
= Example = | = Example = | ||
Revision as of 07:34, 18 May 2010
Timeline
- Demonstration: SIMILE Timeline
- Java API: N/A
- JavaScript API: N/A
Employment/Purpose
Timelineis a DHTML-based Ajax widget for visualizing time-based events developed by SIMILE project of MIT. It is like Google Maps for time-based information.
A timeline contains one or more Bands, which can be panned infinitely by dragging with the mouse pointer, using the mouse scroll-wheel or the keyboard's arrow buttons.
A band can be configured to synchronize with another band such that panning one band also scrolls the other.
Example
<timeline height="300px" width="100%">
<bandinfo width="70%" id="b1" intervalUnit="month"
intervalPixels="100" eventSourceUrl="misc/timeline_ex1.xml">
</bandinfo>
<bandinfo width="30%" intervalUnit="year" intervalPixels="200"
syncWith="b1" eventSourceUrl="misc/timeline_ex1.xml">
</bandinfo>
</timeline>
us_history.xml
<data>
<event start="Oct 1 2008 00:00:00 GMT" end="Oct 1 2008 00:00:00 GMT"
title="Friend's wedding">
I'm not sure precisely when my friend's wedding is.
</event>
<event start="Oct 15 2008 11:00:00 GMT" end="Nov 1 2008 09:00:00 GMT"
isDuration="true" title="Writing Style Guide" image="http://simile.mit.edu/images/csail-logo.gif">
A few days to write some documentation for
<a href="http://www.zkoss.org/doc/styleguide">Timeline</a>
.
</event>
<event start="Oct 23 2008 06:12:33 GMT" title="Trip to New York"
link="http://www.priceline.com/">
Happy New Year !
</event>
</data>
Supported events
| None | None |
Supported Children
* Bandinfo
Use cases
| Version | Description | Example Location |
|---|---|---|
| 3.6 | Smalltalk: Using Timeline Component, Part I | http://docs.zkoss.org/wiki/Using_Timeline_Component%2C_Part_I |
| 3.6 | Smalltalk: Using Timeline Component, Part II | http://docs.zkoss.org/wiki/Using_Timeline_Component%2C_Part_II |
| 3.6 | How to use ListModel in Timeline component | http://docs.zkoss.org/wiki/How_to_use_ListModel_in_Timeline_component |
| 3.6 | Using the New Feature Of The Timeline Component | http://docs.zkoss.org/wiki/Using_the_New_Feature_Of_The_Timeline_Component |
| 3.6 | Integrating Google Calendar with ZK Timeline Component | http://docs.zkoss.org/wiki/Integrating_Google_Calendar_with_ZK_Timeline_Component |
Version History
| Version | Date | Content |
|---|---|---|
| 5.0.2 | 5/18/2010 | Initialization |