javascript代码实例教程-时间线展示工具Timeline

发布时间:2019-04-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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=&#39;tl'></p>

2.编写加载函数,并在网页中调用该函数
<script>&nbsp;      

        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.加载效果

 

时间线展示工具Timeline

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-时间线展示工具Timeline全部内容,希望文章能够帮你解决javascript代码实例教程-时间线展示工具Timeline所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。