如何手动将事件添加到类似时间轴小部件

发布于 2024-11-28 05:15:38 字数 345 浏览 3 评论 0原文

我可以使用 json 文件使用明喻时间线...

 tl.loadJSON("/files/trial.js", function(json, url) { eventSource.loadJSON(json, url); });

我想将其连接到 json 输出。

 tl.loadJSON("http://mywebsite.com/events/json/", function(json, url) { eventSource.loadJSON(json, url); });

我也无法手动添加事件。

我很感激任何帮助。

I am able to use simile timeline with json file using...

 tl.loadJSON("/files/trial.js", function(json, url) { eventSource.loadJSON(json, url); });

I would like to connect it json output.

 tl.loadJSON("http://mywebsite.com/events/json/", function(json, url) { eventSource.loadJSON(json, url); });

I am also having trouble adding events manually.

I appreciate any help.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

暮年 2024-12-05 05:15:38

这应该是添加事件的完整工作示例:

// requires: http://simile.mit.edu/timeline/api/timeline-api.js

<div id='tl' style="height:100px; z-index: 1"></div> 

<script>
    SimileAjax.History.enabled = false;

    // Events that will be loaded via loadJSON method
    var timeline_data = {
            'events' : [

                            {
                            'start': new Date(2011, 9, 6),
                            'end': new Date(2011, 9, 10),
                            'title': 'Event 1',
                            'description': ''                                
                            }
                            ,

                            {
                            'start': new Date(2011, 9, 7),
                            'end': new Date(2011, 9, 10),
                            'title': 'Event 2',
                            'description': ''
                            }                                
          ]
    }

    // IMPORTANT PART
    // Display new event
    // Source of information:
    // http://markmail.org/message/zfsq3ue3fovhvtuz#query:+page:1+mid:zfsq3ue3fovhvtuz+state:results
    function displayEvent() {

            // Define your own event, this is static to make things simple
            var evt = new Timeline.DefaultEventSource.Event({

                    'start': new Date(2011, 9, 7),
                    'end': new Date(2011, 9, 10),
                    'title': 'added event',
                    'description': 'added event',
                    'color': 'yellow'

            });

            // eventSource1 is defined lower, you should really refactor this code :-)
            eventSource1._events.add(evt);
            eventSource1._fire("onAddMany", []);
            tl.layout();
    }


    // Timeline and eventSource1
    var tl;
    var eventSource1;

    // Initialize timeline and load data from variable `timeline_data`
    window.onload = function() {

        var tl_el = document.getElementById("tl");
        eventSource1 = new Timeline.DefaultEventSource();

        var theme1 = Timeline.ClassicTheme.create();
        theme1.event.bubble.height = 220;
        theme1.autoWidth = true; // Set the Timeline's "width" automatically.
                                 // Set autoWidth on the Timeline's first band's theme,
                                 // will affect all bands.
        theme1.timeline_start = new Date(Date.UTC(1924, 0, 1));
        theme1.timeline_stop  = new Date(Date.UTC(2160, 0, 1));

        var d = Timeline.DateTime.parseGregorianDateTime("1900")
        var bandInfos = [
            Timeline.createBandInfo({
                width:          "80%",
                intervalUnit:   Timeline.DateTime.WEEK,
                intervalPixels: 200,
                eventSource:    eventSource1
              //  theme:          theme
            }),
            Timeline.createBandInfo({
                width:          "20%",
                intervalUnit:   Timeline.DateTime.MONTH,
                intervalPixels: 200,
                eventSource:    eventSource1,
                overview:       true
               // theme:          theme
            })
        ];

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

        // create the Timeline
        tl = Timeline.create(tl_el, bandInfos, Timeline.HORIZONTAL);

        var url = '.'; // The base url for image, icon and background image
                       // references in the data
        eventSource1.loadJSON(timeline_data, url); // The data was stored into the
                                                   // timeline_data variable.
        tl.layout(); // display the Timeline
    };

    // Resizing from distribution example
    var resizeTimerID = null;
    function onResize() {
        if (resizeTimerID == null) {
            resizeTimerID = window.setTimeout(function() {
                resizeTimerID = null;
                tl.layout();
            }, 500);
        }
    }
 </script>

This should be a complete working example of adding an event:

// requires: http://simile.mit.edu/timeline/api/timeline-api.js

<div id='tl' style="height:100px; z-index: 1"></div> 

<script>
    SimileAjax.History.enabled = false;

    // Events that will be loaded via loadJSON method
    var timeline_data = {
            'events' : [

                            {
                            'start': new Date(2011, 9, 6),
                            'end': new Date(2011, 9, 10),
                            'title': 'Event 1',
                            'description': ''                                
                            }
                            ,

                            {
                            'start': new Date(2011, 9, 7),
                            'end': new Date(2011, 9, 10),
                            'title': 'Event 2',
                            'description': ''
                            }                                
          ]
    }

    // IMPORTANT PART
    // Display new event
    // Source of information:
    // http://markmail.org/message/zfsq3ue3fovhvtuz#query:+page:1+mid:zfsq3ue3fovhvtuz+state:results
    function displayEvent() {

            // Define your own event, this is static to make things simple
            var evt = new Timeline.DefaultEventSource.Event({

                    'start': new Date(2011, 9, 7),
                    'end': new Date(2011, 9, 10),
                    'title': 'added event',
                    'description': 'added event',
                    'color': 'yellow'

            });

            // eventSource1 is defined lower, you should really refactor this code :-)
            eventSource1._events.add(evt);
            eventSource1._fire("onAddMany", []);
            tl.layout();
    }


    // Timeline and eventSource1
    var tl;
    var eventSource1;

    // Initialize timeline and load data from variable `timeline_data`
    window.onload = function() {

        var tl_el = document.getElementById("tl");
        eventSource1 = new Timeline.DefaultEventSource();

        var theme1 = Timeline.ClassicTheme.create();
        theme1.event.bubble.height = 220;
        theme1.autoWidth = true; // Set the Timeline's "width" automatically.
                                 // Set autoWidth on the Timeline's first band's theme,
                                 // will affect all bands.
        theme1.timeline_start = new Date(Date.UTC(1924, 0, 1));
        theme1.timeline_stop  = new Date(Date.UTC(2160, 0, 1));

        var d = Timeline.DateTime.parseGregorianDateTime("1900")
        var bandInfos = [
            Timeline.createBandInfo({
                width:          "80%",
                intervalUnit:   Timeline.DateTime.WEEK,
                intervalPixels: 200,
                eventSource:    eventSource1
              //  theme:          theme
            }),
            Timeline.createBandInfo({
                width:          "20%",
                intervalUnit:   Timeline.DateTime.MONTH,
                intervalPixels: 200,
                eventSource:    eventSource1,
                overview:       true
               // theme:          theme
            })
        ];

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

        // create the Timeline
        tl = Timeline.create(tl_el, bandInfos, Timeline.HORIZONTAL);

        var url = '.'; // The base url for image, icon and background image
                       // references in the data
        eventSource1.loadJSON(timeline_data, url); // The data was stored into the
                                                   // timeline_data variable.
        tl.layout(); // display the Timeline
    };

    // Resizing from distribution example
    var resizeTimerID = null;
    function onResize() {
        if (resizeTimerID == null) {
            resizeTimerID = window.setTimeout(function() {
                resizeTimerID = null;
                tl.layout();
            }, 500);
        }
    }
 </script>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文