背景：以时间轴形式，直观展示用户在各个时间点创建的多个记事。
解决方案：使用Simile widgets提供的时间轴组件。
Demo：http://www.simile-widgets.org/timeline/
下载地址：http://code.google.com/p/simile-widgets/downloads/list
Simile widgets使用说明：http://www.simile-widgets.org/wiki/Getting_Started_with_Timeline
步骤：1.下载Timeline Library，主要用到其中的timeline-api.js。
-->
2.在页面中 连接到timeline-api。 <script type="text/javascript" src="timeline_2.3.0/timeline_js/timeline-api.js?bundle=true"></script>
3. 创建一个放置时间轴的div。 <div id="my-timeline" style="height: 420px; border: 1px solid #aaa; font-size: 9pt;
margin-left: 18px">
</div> 4.给body 加上onload和onResize事件。 var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}
window.onresize = onResize; <body οnlοad="createTimeLineAndEvents()"> 注意：创建时间轴的代码就写在onload事件中。 5.在onload事件，首先声明时间轴的数据源。数据源必须是一个json对象，它具有的属性请参考：http://www.simile-widgets.org/wiki/Timeline_EventSources var eventSource = new Timeline.DefaultEventSource(); var json = document.getElementById("hfJson").value;
var jsonObj = eval('(' + json + ')'); // 将json字符串转换成对象
eventSource.loadJSON(jsonObj, url);
6. 添加一条或多条时间轴。 var bandInfos = [
Timeline.createBandInfo({
trackGap: 0.2,
width: "85%",
intervalUnit: Timeline.DateTime.DAY, intervalPixels: 100,
timeZone : 8,
eventSource: eventSource
}),
Timeline.createBandInfo({
showEventText: false,
trackHeight: 0.5,
trackGap: 0.2,
width: "15%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 150,
timeZone : 8,
eventSource: eventSource
})
];
7.使多条 时间轴同步，并使第一条时间轴的日期范围在第二条时间轴上 高亮标出。 bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
8.最后一步， 创建时间轴。 var timeLine = Timeline.create(document.getElementById("my-timeline"), bandInfos);
至此，就可以在画面上显示出完整的时间轴了 效果如下
------------------------------------------------------------------------------------------------------------------------------------------ * 完整的onload事件代码：
function createTimeLineAndEvents()
{
var eventSource = new Timeline.DefaultEventSource();
var url = '.'; // The base url for image, icon and background image
// references in the data
var json = document.getElementById("hfJson").value;
var jsonObj = eval('(' + json + ')'); // 将json字符串转换成对象
eventSource.loadJSON(jsonObj, url);
var bandInfos = [
Timeline.createBandInfo({
trackGap: 0.2,
width: "85%",
intervalUnit: Timeline.DateTime.DAY,
intervalPixels: 100,
timeZone : 8,
eventSource: eventSource
}),
Timeline.createBandInfo({
showEventText: false,
trackHeight: 0.5,
trackGap: 0.2,
width: "15%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 150,
timeZone : 8,
eventSource: eventSource
})
];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
var timeLine = Timeline.create(document.getElementById("my-timeline"), bandInfos);
}
----------------------------------------------------------------------------------------------------------------------------------------- * 时间轴数据源实例：
{ // save as a global variable
'dateTimeFormat': 'iso8601',
'wikiURL': "http://simile.mit.edu/shelf/",
'wikiSection': "Simile Cubism Timeline",
'events' : [
{'start': '1924',
'title': 'Barfusserkirche',
'description': 'by Lyonel Feininger, American/German Painter, 1871-1956',
'image': 'http://images.allposters.com/images/AWI/NR096_b.jpg',
'link': 'http://www.allposters.com/-sp/Barfusserkirche-1924-Posters_i1116895_.htm'
},
{'start': '2013',
'end': '2029',
'title': 'Three Figures',
'description': 'by Kasimir Malevich, Ukrainian Painter, 1878-1935',
'image': 'http://images.allposters.com/images/BRGPOD/75857_b.jpg',
'link': 'http://www.allposters.com/-sp/Three-Figures-1913-28-Posters_i1349989_.htm'
},
{'start': '2081',
'end': '2153',
'title': 'Landschaft bei Montreuil',
'description': 'by Albert Gleizes, French Painter, 1881-1953',
'image': 'http://images.allposters.com/images/mer/1336_b.jpg',
'link': 'http://www.allposters.com/-sp/Landschaft-bei-Montreuil-Posters_i339007_.htm',
'isDuration' : true,
'icon' : "dark-red-circle.png",
'color' : 'red',
'textColor' : 'green'},
{'start': '2020',
'title': 'Femme au Miroir',
'description': 'by Fernand Leger, French Painter, 1881-1955',
'image': 'http://images.allposters.com/images/AWI/GMR117_b.jpg',
'link': 'http://www.allposters.com/-sp/Femme-au-Miroir-1920-Posters_i141266_.htm'
},
{'start': '2003',
'title': 'The Old Guitarist',
'description': 'by Pablo Picasso, Spanish Painter/Sculptor, 1881-1973',
'image': 'http://images.allposters.com/images/ESC/AP599_b.jpg',
'link': 'http://www.allposters.com/-sp/The-Old-Guitarist-c-1903-Posters_i328746_.htm'
},
{'start': '2082',
'end': '2164',
'title': 'Jour',
'description': 'by Georges Braque, French Painter, 1882-1963',
'image': 'http://images.allposters.com/images/SHD/S1041_b.jpg',
'link': 'http://www.allposters.com/-sp/Jour-Posters_i126663_.htm',
'color': 'green'
},
{'start': '1916',
'title': 'Still Life with a White Dish',
'description': 'by Gino Severini, Italian Painter, 1883-1966',
'image': 'http://images.allposters.com/images/MCG/FS1254_b.jpg',
'link': 'http://www.allposters.com/-sp/Still-Life-with-a-White-Dish-1916-Posters_i366823_.htm'
},
{'start': '2085',
'end': '2141',
'title': 'Rhythm, Joie de Vivre',
'description': 'by Robert Delaunay, French Painter, 1885-1941',
'image': 'http://imagecache2.allposters.com/images/pic/adc/10053983a_b~Rhythm-Joie-de-Vivre-Posters.jpg',
'link': 'http://www.allposters.com/-sp/Rhythm-Joie-de-Vivre-Posters_i1250641_.htm'
},
{'start': '2085',
'end': '2125',
'title': 'Castor Et Pollux',
'description': 'by Roger de la Fresnaye, French Painter, 1885-1925',
'image': 'http://images.allposters.com/images/CORPOD/IX001463_b.jpg',
'link': 'http://www.allposters.com/-sp/Castor-Et-Pollux-Posters_i831718_.htm',
'tapeImage': 'blue_stripes.png',
'tapeRepeat': 'repeat-x',
'caption': "This is the event's caption attribute.",
'classname': 'hot_event'
},
{'start': '1912',
'title': 'Portrait of Pablo Picasso',
'description': 'by Juan Gris, Spanish Painter/Sculptor, 1887-1927',
'image': 'http://images.allposters.com/images/BRGPOD/156514_b.jpg',
'link': 'http://www.allposters.com/-sp/Portrait-of-Pablo-Picasso-1881-1973-1912-Posters_i1344154_.htm'
},
{'start': '2091',
'end': '2115',
'title': 'Portrait of Horace Brodsky',
'description': 'by Henri Gaudier-Brzeska, French Sculptor, 1891-1915',
'image': 'http://imagecache2.allposters.com/images/BRGPOD/102770_b.jpg',
'link': 'http://www.allposters.com/-sp/Portrait-of-Horace-Brodsky-Posters_i1584413_.htm'
}
]
}
![Ajax——模板引擎[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)