第1页 / 共109页
第2页 / 共109页
第3页 / 共109页
第4页 / 共109页
第5页 / 共109页
第6页 / 共109页
第7页 / 共109页
第8页 / 共109页
jsPlumbAPI--拖拽绘制流程图.docx
jsPlumb
jsPlumb
Imports and Setup
Browser Compatibility
Setup
Doctype
text/html
Required Imports
Initializing jsPlumb
Multiple jsPlumb instances
Element Ids
Method Arguments
Z-index Considerations
Where does jsPlumb add elements?
Element Dragging
Performance
Zooming
Configuring Defaults
Basic Concepts
Anchors
Connectors
Endpoints
Overlays
Element Dragging
Connections
Programmatic Connections
Reusing common settings between jsPlumb.connect ca
Detaching Connections
Drag and Drop Connections
Elements as sources & targets
jsPlumb.makeTarget
jsPlumb.makeSource
Specifying drag source area
Removing Nodes
Removing Connections/Endpoints
Connections
Endpoints
Connection & Endpoint Parameters
jsPlumb.connect
jsPlumb.addEndpoint
Connection and Endpoint Types
Introduction
Connection Type
Endpoint Type
Parameterized Endpoint Types
Events
jsPlumb Events
connection(info, originalEvent)
connectionDetached(info, originalEvent)
connectionMoved(info, originalEvent)
connectionDrag(connection)
connectionDragStop(connection)
click(connection, originalEvent)
dblclick(connection, originalEvent)
endpointClick(endpoint, originalEvent)
endpointDblClick(endpoint, originalEvent)
contextmenu(component, originalEvent)
beforeDrop(info)
beforeDetach(connection)
zoom(value)
Connection Events
Endpoint Events
Overlay Events
Unbinding Events
Interceptors
Paint Styles
Connector Paint Styles
Endpoint Paint Styles
Overlay Paint Styles
Paint Style Parameters
Hover Paint Styles
Gradients
Connector gradients
Endpoint gradients
Applying the gradient in Endpoints
Styling via CSS
Z Index
Basic CSS classes
Interactive CSS Classes
Preventing selection while dragging
Custom CSS Classes
CSS for SVG elements
Querying jsPlumb
Connections
Selecting and operating on a list of Connections
Setter Operations
Getter Operations
Examples
Iterating through results
Other properties/functions
Retrieving static Connection lists
Retrieving connections for a single scope
Filtering by source, target and/or scope
Selecting and operating on a list of Endpoints
Setter Operations
Getter Operations
Other methods/properties (not chainable):
Examples
.each iterator
Animation
Utility Functions
jsPlumb.connect Examples
Draggable Connections Examples
Utility Functions
jsPlumb Development
Building
Documentation
jsPlumb
目录
jsPlumb .....................................................................................................................................1
jsPlumb.............................................................................................................................................. 3
Imports and Setup............................................................................................................................4
Browser Compatibility............................................................................................................. 4
Setup..........................................................................................................................................4
Doctype ......................................................................................................................................4
Required Imports ..................................................................................................................... 5
Initializing jsPlumb................................................................................................................... 5
Multiple jsPlumb instances .....................................................................................................5
Element Ids............................................................................................................................... 6
Method Arguments...................................................................................................................7
Z-index Considerations...........................................................................................................7
Where does jsPlumb add elements?....................................................................................8
Element Dragging.................................................................................................................. 10
Performance........................................................................................................................... 10
Zooming...................................................................................................................................11
Configuring Defaults......................................................................................................................13
Basic Concepts .............................................................................................................................. 15
Anchors..................................................................................................................................17
Connectors............................................................................................................................24
Endpoints...............................................................................................................................25
Overlays................................................................................................................................. 26
Element Dragging.......................................................................................................................... 34
Connections....................................................................................................................................39
Programmatic Connections..................................................................................................39
Reusing common settings between jsPlumb.connect calls............................................40
Detaching Connections.........................................................................................................41
Drag and Drop Connections................................................................................................ 41
Elements as sources & targets............................................................................................42
jsPlumb.makeTarget..............................................................................................................44
jsPlumb.makeSource............................................................................................................ 49
Specifying drag source area................................................................................................ 50
Removing Nodes........................................................................................................................... 55
Removing Connections/Endpoints......................................................................................56
Connections............................................................................................................................56
Endpoints................................................................................................................................ 57
Connection & Endpoint Parameters........................................................................................... 58
jsPlumb.connect.....................................................................................................................58
jsPlumb.addEndpoint............................................................................................................ 58
1
Connection and Endpoint Types ................................................................................................. 59
Introduction............................................................................................................................. 60
Connection Type.................................................................................................................... 60
Endpoint Type.........................................................................................................................64
Parameterized Endpoint Types........................................................................................... 66
Events.............................................................................................................................................. 67
jsPlumb Events .......................................................................................................................67
connection(info, originalEvent)....................................................................................68
connectionDetached(info, originalEvent) ...................................................................68
connectionMoved(info, originalEvent)........................................................................69
connectionDrag(connection)........................................................................................69
connectionDragStop(connection)............................................................................... 69
click(connection, originalEvent) ...................................................................................69
dblclick(connection, originalEvent) ............................................................................. 69
endpointClick(endpoint, originalEvent) ...................................................................... 69
endpointDblClick(endpoint, originalEvent) ................................................................ 69
contextmenu(component, originalEvent)...................................................................69
beforeDrop(info) .............................................................................................................70
beforeDetach(connection)............................................................................................70
zoom(value).................................................................................................................... 70
Connection Events................................................................................................................ 70
Endpoint Events.....................................................................................................................71
Overlay Events .......................................................................................................................71
Unbinding Events ...................................................................................................................72
Interceptors..................................................................................................................................... 72
Paint Styles..................................................................................................................................... 74
Connector Paint Styles......................................................................................................... 74
Endpoint Paint Styles............................................................................................................75
Overlay Paint Styles..............................................................................................................76
Paint Style Parameters......................................................................................................... 76
Hover Paint Styles................................................................................................................. 77
Gradients.................................................................................................................................79
Connector gradients......................................................................................................79
Endpoint gradients.........................................................................................................80
Applying the gradient in Endpoints.............................................................................81
Styling via CSS.....................................................................................................................82
Z Index ............................................................................................................................ 83
Basic CSS classes...................................................................................................... 83
Interactive CSS Classes............................................................................................ 83
Preventing selection while dragging ..................................................................... 86
Custom CSS Classes................................................................................................. 86
CSS for SVG elements............................................................................................... 87
Querying jsPlumb...........................................................................................................................88
Connections............................................................................................................................89
2
Selecting and operating on a list of Connections.....................................................89
Setter Operations...........................................................................................................89
Getter Operations.......................................................................................................... 90
Examples.........................................................................................................................90
Iterating through results ................................................................................................91
Other properties/functions............................................................................................91
Retrieving static Connection lists ................................................................................91
Retrieving connections for a single scope.................................................................91
Filtering by source, target and/or scope.................................................................... 92
Selecting and operating on a list of Endpoints................................................................. 93
Setter Operations...........................................................................................................93
Getter Operations.......................................................................................................... 94
Other methods/properties (not chainable): ................................................................95
Examples.........................................................................................................................95
.each iterator ..................................................................................................................95
Animation.........................................................................................................................................96
Utility Functions..............................................................................................................................96
jsPlumb.connect Examples..........................................................................................................97
Draggable Connections Examples........................................................................................... 102
Utility Functions............................................................................................................................106
jsPlumb Development ................................................................................................................. 108
Building.......................................................................................................................................... 108
Documentation............................................................................................................................. 109
jsPlumb
jsPlumb Community edition provides a means for a developer to visually connect
elements on their web pages, using SVG.
jsPlumb has no external dependencies.
The 1.7.x line of releases will be the last ones to support IE8. We are trickling the
occasional bugfix and feature into 1.7.x but the next major event in the Community
edition will be release 2.0.0, which will work only in modern browsers that support
SVG.
3
Imports and Setup
It is a good idea to read this entire page. There are a few things you need to know
about integrating jsPlumb with your UI.
o Browser Compatibility
o Setup
o Doctype
o Required Imports
Initializing jsPlumb
o
o Multiple jsPlumb Instances
o Method Arguments
o Element Ids
o Z-Index Considerations
o Where does jsPlumb add elements?
o Dragging
o Performance
Browser Compatibility
jsPlumb runs on everything from IE6 up. There are some caveats, though, because of
various browser/library bugs:
o
jQuery 1.6.x and 1.7.x have a bug in their SVG implementation for IE9 that causes
hover events to not get fired.
jQuery 2.0 does not support IE 6,7 or 8.
o
o Safari 5.1 has an SVG bug that prevents mouse events from being passed through
the transparent area of an SVG element (Safari 6.x does not seem to have the same
problem)
Setup
Doctype
text/html
If you're serving your pages with content type text/html, as most people are, then
you should use this doctype:
4
This gives you Standards mode in all browsers and access to HTML5.
Required Imports
No required imports.
Initializing jsPlumb
You should not start making calls to jsPlumb until the DOM has been initialized -
perhaps no surprises there. To handle this, you should bind to theready event on
jsPlumb (or the instance of jsPlumb you are working with):
jsPlumb.bind("ready", function() {
...
// your jsPlumb related init code goes here
...
});
});
There's a helper method that can save you a few precious characters:
jsPlumb.ready(function() {
...
// your jsPlumb related init code goes here
...
If you bind to the ready event after jsPlumb has already been initialized, your callback
will be executed immediately.
Multiple jsPlumb instances
jsPlumb is registered on the browser's window by default, providing one static
instance for the whole page to use. You can also instantiate independent instances of
jsPlumb, using the getInstance method, for example:
var firstInstance = jsPlumb.getInstance();
The variable firstInstance can now be treated exactly as you would treat
the jsPlumb variable - you can set defaults, call the connectmethod, whatever:
5
firstInstance.importDefaults({
Connector : [ "Bezier", { curviness: 150 } ],
Anchors : [ "TopCenter", "BottomCenter" ]
});
firstInstance.connect({
source:"element1",
target:"element2",
scope:"someScope"
});
getInstance optionally takes an object that provides the defaults:
var secondInstance = jsPlumb.getInstance({
PaintStyle:{
lineWidth:6,
strokeStyle:"#567567",
outlineColor:"black",
outlineWidth:1
},
Connector:[ "Bezier", { curviness: 30 } ],
Endpoint:[ "Dot", { radius:5 } ],
EndpointStyle : { fillStyle: "#567567" },
Anchor : [ 0.5, 0.5, 1, 1 ]
});
});
secondInstance.connect({
source:"element4",
target:"element3",
scope:"someScope"
It is recommended to use separate instances of jsPlumb wherever possible.
Element Ids
jsPlumb uses the id attribute of any element with which it interacts. If id is not set,
jsPlumb will create an id for the element. It is recommended that you set appropriate
ids for the elements in your UI yourself.
Changing Element Id
Because of the fact that jsPlumb uses element ids, you need to tell jsPlumb if an
element id changes. There are two methods to help you do this:
6
o
o
jsPlumb.setId(el, newId) Use this if you want jsPlumb to take care of changing the
id in the DOM. It will do so, and then update its references accordingly.
jsPlumb.setIdChanged(oldId, newId) Use this if you have already changed the
element's ID, and you just want jsPlumb to update its references.
Method Arguments
Almost every method in jsPlumb that operates on elements supports multiple formats
for specifying the element(s) on which to operate.
Selectors/NodeLists
In jQuery there is the concept of a "selector" - a list of elements conforming to some
CSS path spec, for instance $(".myClass"). Both the jQuery flavour, and also vanilla,
jsPlumb support these selectors as arguments for elements (vanilla jsPlumb can do
this because jQuery's selector object is list-like, ie. it has a length property).
When using vanilla jsPlumb, you can use a NodeList - it is, effectively, the native
equivalent of the selectors we just discussed. There are several ways of getting
a NodeList from the DOM; perhaps the most useful
(supported in IE8+)
is document.querySelectorAll("some selector").
You will see selector referred to in many places in the jsPlumb documentation. Just
think of it as a list of elements that match some CSS spec.
Element Ids
Passing a single string as argument will cause jsPlumb to treat that string as an
element id.
Elements
You can pass DOM elements as arguments. This will probably not surprise you.
Arrays
You can also pass an array of any or all of the types we just listed. The contents of the
array can be mixed - they do not have to be all one type.
Z-index Considerations
You need to pay attention to the z-indices of the various parts of your UI when using
jsPlumb, in particular to ensure that the elements that jsPlumb adds to the DOM do
not overlay other parts of the interface.
jsPlumb adds an element to the DOM for each Endpoint, Connector and Overlay. So
for a Connection having visible Endpoints at each end and a label in the middle,
jsPlumb adds four elements to the DOM.
To help you organise z-indices correctly, jsPlumb adds a CSS class to each type of
element it adds. They are as follows:
7
Component
Endpoint
Connector
Overlay
Class
jsplumb-endpoint
jsplumb-connector
jsplumb-overlay
In addition, whenever the mouse is hovering over an Endpoint or Connection, that
component is assigned the class jsplumb-hover. For more information about styling
jsPlumb with CSS, see this page.
Where does jsPlumb add elements?
It's important to understand where in the DOM jsPlumb will add any elements it
creates. If you want a TL;DR version, then it boils down to this:
It is strongly recommended that you set a Container before you begin plumbing.
o
o A Container is some element that jsPlumb will use as the parent for all of the artefacts
it adds to the UI. Typically, you would make this the parent element of the nodes you
are connecting.
o
If you do not specify a Container, jsPlumb will infer that the Container should be
the offsetParent of the first element on which you
calladdEndpoint, makeSource or makeTarget, or the offsetParent of the source
element in the first connect call - whichever happens first.
Let's discuss this in more detail.
Early versions of jsPlumb added everything to the body element. This has the
advantage of being the most flexible arrangement in terms of supporting which
elements can be connected, but in certain use cases produced unexpected results.
Consider the arrangement where you have some connected elements in a tab: you
would expect jsPlumb to add elements inside the tab, so that when the user switches
tabs and the current one is hidden, all the jsPlumb stuff is hidden too. But when the
elements are on the body, this does not happen!
It is also quite common for jsPlumb to be used in a page in which the diagram is
contained within some element that should show scrollbars when its content
overflows. Appending elements to the document body prevents this from occurring
automatically.
8
相关推荐
2023年江西萍乡中考道德与法治真题及答案.doc
2012年重庆南川中考生物真题及答案.doc
2013年江西师范大学地理学综合及文艺理论基础考研真题.doc
2020年四川甘孜小升初语文真题及答案I卷.doc
2020年注册岩土工程师专业基础考试真题及答案.doc
2023-2024学年福建省厦门市九年级上学期数学月考试题及答案.doc
2021-2022学年辽宁省沈阳市大东区九年级上学期语文期末试题及答案.doc
2022-2023学年北京东城区初三第一学期物理期末试卷及答案.doc
2018上半年江西教师资格初中地理学科知识与教学能力真题及答案.doc
2012年河北国家公务员申论考试真题及答案-省级.doc
2020-2021学年江苏省扬州市江都区邵樊片九年级上学期数学第一次质量检测试题及答案.doc
2022下半年黑龙江教师资格证中学综合素质真题及答案.doc
