Browse Source
adding example of cursor change for 1845, and now doing it off develop to fix history (#2463)
readme-improvements
CapitanMorgan
8 years ago
committed by
yotamberk
yotamberk
1 changed files with 140 additions and 0 deletions
Unified 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> | |||||