Example 1
$('.block-element').link({
draggable_element:true,
z_index:"1",
link_color:"orange"
});jquery.linking is a jQuery plugin designed for linking graphically webpage elements in a simple way.
Include jquery.linking.js (or jquery.linking.min.js) after jQuery and jQuery UI.
Currently (v0.0.1), you can use this jQuery plugin on block elements, which have no padding, and contain webpage elements to link to each other inside. You can create with this plugin simple complete graphs by using the $.fn.link function.
$('.block-elements').link(options);
options is an object with keys described below.
| key | default | description |
|---|---|---|
| typology | "fully-connected" |
A string indicating which network typology to use. Value: "fully-connected". |
| style | "linear" |
A string indicating which link style to use. Values: "linear" | "quadratic-isobarycentric". |
| class_element | "link-element" | A string indicating the class name of the targeted webpage elements to link. |
| draggable_element | false |
A boolean indicating whether the targeted webpage elements are / must be draggable or not. Values: true | false. |
| dyn_clear | true |
A boolean indicating whether the canvas is cleaned and refreshed when a draggable element is moved. This option is taken into account if draggable_element is true. Values: true | false. |
| box_sizing | "border-box" |
A string indicating the box-sizing property used at the main block element level, and below. Values: "border-box" | "content-box". |
| z_index | "0" | A string indicating the stack order of the graph. |
| cursor | "pointer" | A string indicating the type of cursor to be displayed when pointing on a targeted webpage element. |
| link_color | "black" | A string indicating the color used for links. |
| link_width | "2" | A string indicating the link width. |
| link_cap | "round" |
A string indicating the style of the end caps for a link. Values: "butt" | "round" | "square". |
| link_join | "round" |
A string indicating the type of corner created when two links meet. Values: "bevel" | "round" | "miter". |
| link_shadow_blur | "0" | A string indicating the blur level for the shadows. |
| link_shadow_offset_x | "0" | A string indicating the distance that the shadows will be offset in horizontal distance. |
| link_shadow_offset_y | "0" | A string indicating the distance that the shadows will be offset in vertical distance. |
| link_shadow_color | "black" | A string indicating the color to use for the shadows. |
$('.block-element').link({
draggable_element:true,
z_index:"1",
link_color:"orange"
});$('.block-element').link({
draggable_element:true,
dyn_clear:false
z_index:"1",
link_color:"orange",
});$('.block-element').link({
draggable_element:true,
style:"quadratic-isobarycentric"
z_index:"1",
link_color:"orange",
});...