Simile widgets时间轴组件实际应用

最新推荐文章于 2024-10-01 20:12:28 发布

xiayun201225

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量1.6k

点赞数

文章标签： timezone image json function url null

本文链接：https://blog.csdn.net/xiayun201225/article/details/8003281

版权

背景：以时间轴形式，直观展示用户在各个时间点创建的多个记事。

解决方案：使用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。

3. 创建一个放置时间轴的div。

4.给body 加上onload和onResize事件。

注意：创建时间轴的代码就写在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'
        }
]
}