Browse Source

Added a simple navigation menu example

css_transitions
jos 10 years ago
parent
commit
e5cc8d7466
3 changed files with 90 additions and 1 deletions
  1. +88
    -0
      examples/timeline/16_navigation_menu.html
  2. +1
    -0
      examples/timeline/index.html
  3. +1
    -1
      src/timeline/Timeline.js

+ 88
- 0
examples/timeline/16_navigation_menu.html View File

@ -0,0 +1,88 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | navigation menu</title>
<style type="text/css">
body, html, input {
font-family: sans-serif;
font-size: 12pt;
}
#visualization {
position: relative;
}
.menu {
position: absolute;
top: 0;
right: 0;
margin: 10px;
z-index: 9999;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="visualization">
<div class="menu">
<input type="button" id="zoomIn" value="Zoom in"/>
<input type="button" id="zoomOut" value="Zoom out"/>
<input type="button" id="moveLeft" value="Move left"/>
<input type="button" id="moveRight" value="Move right"/>
</div>
</div>
<script type="text/javascript">
// create a timeline with some data
var container = document.getElementById('visualization');
var items = [
{id: 1, content: 'item 1', start: '2014-04-20'},
{id: 2, content: 'item 2', start: '2014-04-14'},
{id: 3, content: 'item 3', start: '2014-04-18'},
{id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
{id: 5, content: 'item 5', start: '2014-04-25'},
{id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
];
var options = {};
var timeline = new vis.Timeline(container, items, options);
/**
* Move the timeline a given percentage to left or right
* @param {Number} percentage For exampe 0.1 or -0.1
*/
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
/**
* Zoom the timeline a given percentage in or out
* @param {Number} percentage For exampe 0.1 (zoom out) or -0.1 (zoom in)
*/
function zoom (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() + interval * percentage
});
}
// attach events to the navigation buttons
document.getElementById('zoomIn').onclick = function () { zoom(-0.2); };
document.getElementById('zoomOut').onclick = function () { zoom( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
</script>
</body>
</html>

+ 1
- 0
examples/timeline/index.html View File

@ -27,6 +27,7 @@
<p><a href="13_past_and_future.html">13_past_and_future.html</a></p> <p><a href="13_past_and_future.html">13_past_and_future.html</a></p>
<p><a href="14_a_lot_of_grouped_data.html">14_a_lot_of_grouped_data.html</a></p> <p><a href="14_a_lot_of_grouped_data.html">14_a_lot_of_grouped_data.html</a></p>
<p><a href="15_item_class_names.html">15_item_class_names.html</a></p> <p><a href="15_item_class_names.html">15_item_class_names.html</a></p>
<p><a href="16_navigation_menu.html">16_navigation_menu.html</a></p>
<p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p> <p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p>

+ 1
- 1
src/timeline/Timeline.js View File

@ -535,7 +535,7 @@ Timeline.prototype.getSelection = function getSelection() {
* Where start and end can be a Date, number, or string, and range is an * Where start and end can be a Date, number, or string, and range is an
* object with properties start and end. * object with properties start and end.
* *
* @param {Date | Number | String} [start] Start date of visible window
* @param {Date | Number | String | Object} [start] Start date of visible window
* @param {Date | Number | String} [end] End date of visible window * @param {Date | Number | String} [end] End date of visible window
*/ */
Timeline.prototype.setWindow = function setWindow(start, end) { Timeline.prototype.setWindow = function setWindow(start, end) {

Loading…
Cancel
Save