Browse Source
adding example of cursor change for 1845, and now doing it off develop to fix history (#2463)
readme-improvements
CapitanMorgan
7 years ago
committed by
yotamberk
yotamberk
1 changed files with 140 additions and 0 deletions
Split View
Diff Options
+ 140
- 0
examples/network/other/cursorChange.html
View File
| @ -0,0 +1,140 @@ | |||
| <!doctype html> | |||
| <html> | |||
| <head> | |||
| <title>Network | Cursor Change</title> | |||
| <script type="text/javascript" src="../../../dist/vis.js"></script> | |||
| <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> | |||
| <style type="text/css"> | |||
| #mynetwork { | |||
| width: 600px; | |||
| height: 400px; | |||
| border: 1px solid lightgray; | |||
| } | |||
| </style> | |||
| </head> | |||
| <body> | |||
| <p>Here is a simple network with nodes and edges that demonstrates how to change the cursor on hover for nodes and edges.</p> | |||
| <p>Use the dropdowns and button below to change the cursor type bound to an event.</p> | |||
| <div> | |||
| Event Type - | |||
| <select id="eventType"> | |||
| <option value="hoverNode">hoverNode</option> | |||
| <option value="blurNode">blurNode</option> | |||
| <option value="hoverEdge">hoverEdge</option> | |||
| <option value="blurEdge">blurEdge</option> | |||
| <option value="dragStart">dragStart</option> | |||
| <option value="dragging">dragging</option> | |||
| <option value="dragEnd">dragEnd</option> | |||
| </select> | |||
| | |||
| Cursor Type - | |||
| <select id="cursorType"> | |||
| <option value="auto">auto</option> | |||
| <option value="default">default</option> | |||
| <option value="context-menu">context-menu</option> | |||
| <option value="help">help</option> | |||
| <option value="pointer">pointer</option> | |||
| <option value="progress">progress</option> | |||
| <option value="wait">wait</option> | |||
| <option value="cell">cell</option> | |||
| <option value="crosshair">crosshair</option> | |||
| <option value="text">text</option> | |||
| <option value="vertical-text">vertical-text</option> | |||
| <option value="alias">alias</option> | |||
| <option value="copy">copy</option> | |||
| <option value="move">move</option> | |||
| <option value="no-drop">no-drop</option> | |||
| <option value="not-allowed">not-allowed</option> | |||
| <option value="all-scroll">all-scroll</option> | |||
| <option value="col-resize">col-resize</option> | |||
| <option value="row-resize">row-resize</option> | |||
| <option value="n-resize">n-resize</option> | |||
| <option value="e-resize">e-resize</option> | |||
| <option value="w-resize">w-resize</option> | |||
| <option value="s-resize">s-resize</option> | |||
| <option value="ne-resize">ne-resize</option> | |||
| <option value="nw-resize">nw-resize</option> | |||
| <option value="se-resize">se-resize</option> | |||
| <option value="sw-resize">sw-resize</option> | |||
| <option value="ew-resize">ew-resize</option> | |||
| <option value="ns-resize">ns-resize</option> | |||
| <option value="nesw-resize">nesw-resize</option> | |||
| <option value="nwse-resize">nwse-resize</option> | |||
| <option value="zoom-in">zoom-in</option> | |||
| <option value="zoom-out">zoom-out</option> | |||
| <option value="grab">grab</option> | |||
| <option value="grabbing">grabbing</option> | |||
| </select> | |||
| | |||
| <button onClick="changeEventCursor(document.getElementById('eventType').value,document.getElementById('cursorType').value);">Change Cursor for Event</button> | |||
| </div> | |||
| <div id="mynetwork"></div> | |||
| <script type="text/javascript"> | |||
| // create an array with nodes | |||
| var nodes = new vis.DataSet([ | |||
| {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:{hover:true}}; | |||
| var network = new vis.Network(container, data, options); | |||
| //Get the canvas HTML element | |||
| var networkCanvas = document.getElementById("mynetwork").getElementsByTagName("canvas")[0] | |||
| function changeCursor(newCursorStyle){ | |||
| networkCanvas.style.cursor = newCursorStyle; | |||
| } | |||
| function changeEventCursor(eventName,cursorType){ | |||
| network.on(eventName, function() { | |||
| changeCursor(cursorType); | |||
| }); | |||
| } | |||
| network.on('hoverNode', function () { | |||
| changeCursor('grab'); | |||
| }); | |||
| network.on('blurNode', function () { | |||
| changeCursor('default'); | |||
| }); | |||
| network.on('hoverEdge', function () { | |||
| changeCursor('grab'); | |||
| }); | |||
| network.on('blurEdge', function () { | |||
| changeCursor('default'); | |||
| }); | |||
| network.on('dragStart', function () { | |||
| changeCursor('grabbing'); | |||
| }); | |||
| network.on('dragging', function () { | |||
| changeCursor('grabbing'); | |||
| }); | |||
| network.on('dragEnd', function () { | |||
| changeCursor('grab'); | |||
| }); | |||
| </script> | |||
| </body> | |||
| </html> | |||