sbosse/jam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mon 21 Jul 22:43:21 CEST 2025

Browse Source
This commit is contained in:
sbosse 2025-07-21 22:57:32 +02:00
parent cda32fffb9
commit ccd34ed949
1 changed files with 135 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
js/dos/ext/vis/examples/network/other/navigation.html Normal file
View File

@ -0,0 +1,135 @@
<!doctype html>
<html>
<head>
<title>Network | Navigation</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
table.legend_table {
border-collapse: collapse;
}
table.legend_table td,
table.legend_table th {
border: 1px solid #d3d3d3;
padding: 10px;
}
table.legend_table td {
text-align: center;
width:110px;
}
</style>
<script type="text/javascript" src="../exampleUtil.js"></script>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nodes = null;
var edges = null;
var network = null;
function destroy() {
if (network !== null) {
network.destroy();
network = null;
}
}
function draw() {
destroy();
// create an array with nodes
var nodes = [
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
];
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
interaction: {
navigationButtons: true,
keyboard: true
}
};
network = new vis.Network(container, data, options);
// add event listeners
network.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
}
</script>
<script src="../../googleAnalytics.js"></script>
</head>
<body onload="draw();">
<h2>Navigation controls and keyboad navigation</h2>
<div style="width: 800px; font-size:14px; text-align: justify;">
This example is the same as example 2, except for the navigation controls that have been activated. The navigation controls are described below. <br /><br />
<table class="legend_table">
<tr>
<th>Icons: </th>
<td><img src="../../../dist/img/network/upArrow.png" /> </td>
<td><img src="../../../dist/img/network/downArrow.png" /> </td>
<td><img src="../../../dist/img/network/leftArrow.png" /> </td>
<td><img src="../../../dist/img/network/rightArrow.png" /> </td>
<td><img src="../../../dist/img/network/plus.png" /> </td>
<td><img src="../../../dist/img/network/minus.png" /> </td>
<td><img src="../../../dist/img/network/zoomExtends.png" /> </td>
</tr>
<tr>
<th>Keyboard shortcuts:</th>
<td><div>Up arrow</div></td>
<td><div>Down arrow</div></td>
<td><div>Left arrow</div></td>
<td><div>Right arrow</div></td>
<td><div>=<br />[<br />Page up</div></td>
<td><div>-<br />]<br />Page down</div></td>
<td><div>None</div></td>
</tr>
<tr>
<th>Description:</th>
<td>Move up</td>
<td>Move down</td>
<td>Move left</td>
<td>Move right</td>
<td>Zoom in</td>
<td>Zoom out</td>
<td>Zoom extent</td>
</tr>
</table>
<br />
Apart from clicking the icons, you can also navigate using the keyboard. The buttons are in table above.
Zoom Extends changes the zoom and position of the camera to encompass all visible nodes. <u>To correctly display the navigation icons, the <b>vis.css</b> file must be included.</u>
The user is free to alter or overload the CSS classes but without them the navigation icons are not visible.
</div>
<div id="mynetwork"></div>
<p id="selection"></p>
</body>
</html>