CSS
The jsPlumb Toolkit attaches a number of CSS classes to the elements with which it interacts, allowing you a high degree of control over the look and feel of your interface. This page discusses the CSS classes used throughout the rendering lifecycle by the Toolkit edition. For a discussion of the mechanics of styling endpoints and connector lines, see the styling via css page.
It is also recommended that you read the jsPlumb CSS documentation, as everything discussed on that page applies when working with the jsPlumb Toolkit. In particular you might like to read the "Z Index" and "Preventing selection while dragging" sections.
Nodes
When you build an application with the jsPlumb Toolkit you will generally supply client side templates to render your Nodes, so you are free to write the markup as you please, and CSS is completely under your control.
Important It is expected, if the nodes/groups in your UI are draggable, that they will have a CSS position value of absolute. Relative positioning does not work well with dragging. Also, ensure that your nodes/groups have no margin set, as margin is not taken into account when determining the location and size of an element (a margin on an absolute positioned element does not make sense; margins are used to alter the default position of some element in the document flow, and absolute positioned elements are removed from the document flow).
Hover Effects etc
jsPlumb writes a number of different classes to the DOM elements involved in any given Connection. Upon hover, to take one example, the source element is assigned a class to indicate its Connection is being hovered upon, and also a class to indicate that it is the source in a Connection being hovered upon.
These classes provide a powerful way of adding dynamic behaviour to your UI without having to resort to Javascript.
A full discussion of these can be found in the Interactive CSS Classes section in the CSS styling documentation.
Note: Wherever you see 'Connection' discussed in the jsPlumb documentation, remember that a jsPlumb Connection is the visual artefact representing an Edge in the Toolkit. Similarly, when you see a reference to an "element", the analog in the Toolkit is either a Node or a Port.
Edges
You can use CSS to style the SVG edges. The aforelinked CSS jsPlumb page contains information about how to style an SVG Connection.
Widgets
You will also most likely wish to style the Toolkit widgets you are using in your app. Both the Miniview and the Surface expose a comprehensive set of classes that you can use - these are listed below.
Your licensed copy of the jsPlumb Toolkit shipped with a CSS file containing appropriate default values for all of the classes used by the Toolkit. This file can be found at:
To get a prototype up and running it is recommended you include this file in your HTML page.
This is a complete list of classes the jsPlumb Toolkit uses throughout the rendering lifecycle.
| Surface | |
|---|---|
| jtk-surface | Assigned to the container element of a Surface (the original element) |
| jtk-surface-nopan | Assigned to the container element of a Surface when `enablePan` is set to false. This class sets overflow to scroll, rather than hidden, which will cause scrollbars to appear when the content overflows. |
| jtk-surface-canvas | Assigned to the element in the Surface on which elements are drawn |
| jtk-surface-pan | Assigned to the pan buttons which are positioned against the edges of a Surface |
| jtk-surface-pan-top | Assigned to the pan button which is positioned against the top edge of a Surface |
| jtk-surface-pan-bottom | Assigned to the pan button which is positioned against the bottom edge of a Surface |
| jtk-surface-pan-left | Assigned to the pan button which is positioned against the left edge of a Surface |
| jtk-surface-pan-right | Assigned to the pan button which is positioned against the right edge of a Surface |
| jtk-surface-pan-active | Assigned to a pan button either when it is being clicked, or when the mouse is held on it and auto-pan is in effect. |
| jtk-surface-panning | Assigned to the container element of a Surface whenever the Surface is being panned with the mouse or with a touch event |
| jtk-surface-selected-element | Assigned to any elements in a Surface that are in the Toolkit's current selection (whether by a lasso selection with the mouse or having been programmatically added) |
| jtk-surface-selected-connection | Assigned to any edges in a Surface that are in the Toolkit's current selection |
| jtk-node | Assigned to all Nodes |
| jtk-group | Assigned to all Groups |
| jtk-group-expanded | Assigned to all Groups when they are in expanded state |
| jtk-group-collapsed | Assigned to all Groups when they are in collapsed state |
| jtk-port | Assigned to all Ports |
| jtk-most-recently-dragged | Assigned to the most recently dragged Node or Group in a Surface widget |
| Miniview | |
| jtk-miniview | Assigned to the container element of a Miniview |
| jtk-miniview-canvas | Assigned to the element in the Miniview on which elements are drawn |
| jtk-miniview-panner | Assigned to the element in the Miniview that you can drag to pan the associated Surface. |
| jtk-miniview-panning | Assigned to the container of the Miniview when its panner element is being dragged by the mouse |
| jtk-miniview-element | Assigned to all elements drawn inside the Miniview |
| jtk-miniview-collapse | Assigned to the collapse button of a Miniview. |
| jtk-miniview-collapsed | Assigned to the container of a Miniview when it is collapsed. |
| Lasso | |
| jtk-lasso | Assigned to the lasso mask that is drawn when selecting multiple items with the mouse. |
| jtk-lasso-select-defeat | Assigned to the body when the lasso is in operation. You can use this to disable text selection (the default jsPlumb Toolkit css file does this) |
| Drawing Tools | |
| jtk-draw-skeleton | Assigned to the element that is drawn around some other element when it is selected |
| jtk-draw-handle | Assigned to every handle (top left, top right, bottom left, bottom right, center) in a draw skeleton. |
| jtk-draw-handle-tl | Assigned to the top left handle in a draw skeleton |
| jtk-draw-handle-tr | Assigned to the top right handle in a draw skeleton |
| jtk-draw-handle-bl | Assigned to the bottom left handle in a draw skeleton |
| jtk-draw-handle-br | Assigned to the bottom right handle in a draw skeleton |
| jtk-draw-drag | Assigned to the center handle in a draw skeleton (the handle by which the element may be dragged) |
| jtk-draw-select-defeat | Added to the document body on drag resize start and removed at the end of resizing. Its purpose is to switch off text selection on all elements while the user is resizing an element. |