脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-时间线展示工具Timeline,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
时间线展示工具Timeline[1],可以实现网页上展示一个时间轴。在时间相关的数据展示中,有比较好的效果。测试了下,具体的用法是这样的。
1.编写htML页面,引入JS脚本,引入JSON数据,设定待显示日历位置
<scriptsrc="https://static.simile.mIT.edu/timeline/api-2.3.0/timeline-api.js?bundle=true"tyPE="text/javascript"></script>
<scriptsrc="local_data2.js" type="text/javascript"></script>
<pid='tl'></p>
2.编写加载函数,并在网页中调用该函数
<script>
VAR tl;
function onLoad() {
var tl_el =document.getElementById("tl");
var eventSource1 = newTimeline.DefaultEventSource();
var theme1 =Timeline.ClassicTheme.create();
theme1.autoWidth = true; // Set theTimeline's "width" automatically.
// SetautoWidth on the Timeline's First band's theme,
// willaffect all bands.
theme1.timeline_start = newDate(Date.UTC(1980, 0, 1));
theme1.timeline_stop = new Date(Date.UTC(2150, 0, 1));
var d =Timeline.DateTime.parseGregorianDateTime("1980")
var bandInfos = [
Timeline.createBandInfo({
width: 45, // set to a minimum, autoWidthwill then adjust
intervalUnit: Timeline.DateTime.DECADE,
intervalPixels: 200,
eventSource: eventSource1,
date: d,
theme: theme1,
layout: 'original' // original, overview, detailed
})
];
// create the Timeline
tl = Timeline.create(tl_el,bandInfos, Timeline.HORIZONTAL);
var url = '.'; // The base url forimage, icon and background image
// references in thedata
eventSource1.loadJSON(timeline_data, url); // The data was Stored intothe
// timeline_data variable.
tl.layout(); // display theTimeline
}
var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID =window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}
</script>
调用该函数:<body onload="onLoad();"onresize="onResize();">
3.编写包含事件的json文件
vartimeline_data = { // save as a globalvariable
'dateTimeFormat':'iso8601',
'wikiURL':"https://simile.mit.edu/shelf/",
'wikiSection':"Simile Cubism Timeline",
'events' : [
{'start': '1987',
'title': 'Birthday of gongqingkui',
'description': 'This is description',
'image':'https://portrait7.sinaimg.cn/1150968582/blog/180',
'link':'https://bLOG.sina.COM.cn/gongqingkui',
'icon' :"dark-red-circle.png",
'color' : 'red',
'textColor' : 'green'
},
{'start':'1986',
'end':'1990',
'isDuration':true,
'title':'aaa',
//'tapeimage': 'blue_stripes.png',
'tapeRepeat': 'repeat-x',
'caption': "This is the event'scaption attribute.",
'classname': 'hot_event'
},
]
}
该JSON数据目前包括一个点事件和一个段时间。
4.加载效果
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-时间线展示工具Timeline全部内容,希望文章能够帮你解决javascript代码实例教程-时间线展示工具Timeline所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。