jsplumb实例及API - CSDN文库

4星 · 超过85%的资源需积分: 10 162 浏览量更新于2023-05-29 评论 1 收藏 82KB DOCX 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

view demo|contact me

Index

 Summary

 Changes since version 1.2.4

 Imports

 jsPlumb Basic Concepts

 jsPlumb Basic Concepts - Simple Connections

 jsPlumb Basic Concepts - Draggable Connections

 jsPlumb Basic Concepts - Drag Options

 jsPlumb Basic Concepts - Drop Options

 jsPlumb Basic Concepts - Drag and Drop Scope

 Multiple Instances of jsPlumb

 Automatic repaint

 Unloading jsPlumb

 jsPlumb.connect Options

 jsPlumb.detach Options

 Defaults

 Anchors

 Dynamic Anchors

 Connectors

 Overlays

 Endpoints

 Endpoint Operations

 Endpoint UUIDs

 Gradients

 Animation

 Events

 CSS Class Reference

 Basic Examples

 Draggable Connections Examples

 Retrieving Connection Information

 Advanced - jsPlumb internals

 Pluggable Library Support

NOTE: This document refers to release 1.2.5 of jsPlumb.24 January

2011

Summary

jsPlumb allows you to connect elements on the screen with "plumbing", using

a Canvas element when supported, and Google'sExplorerCanvasscript to

support older browsers.

In this example we have created a Connection from 'element1' to 'element2'.

What happened to the three steps I mentioned above? Well, jsPlumb provides

defaults foreverything. So in this example, behind the scenes jsPlumb used

default values for all of these things:

 the Anchors that define where the connection's Endpoints appear on

each element

 the type and appearance of each Endpoint in the Connection

 the type and appearance of the Connection's Connector

Default values are discussed in detail in theDefaultssection below.

TheBasic Examplessection below contains many more examples of how to

create simple Connections.

Draggable Connections

To support draggable Connections, you are required to first create Endpoints,

as it is Endpoints that the user drags to create new Connections. Endpoints

are created by making anaddEndpointcall, passing in the target element's id

and an options object. There are quite a few things that can be set on the

options object; all of these parameters are optional.

 endpoint - the type of Endpoint, eg. Dot, Rectangle, Image.

 anchor - the Endpoint's Anchor, ie. where it will be located. this may be

a string - "TopCenter", for example, or an array of coordindates - [ 0.5,

0, 0, -1 ], or an array of individual anchor specifications, in which case

jsPlumb will make a 'dynamic' anchor for the Endpoint.

 style - the Endpoint's appearance

 isSource - a boolean indicating whether or not the Endpoint can be a

source for new Connections. Default is false.

 isTarget - a boolean indicating whether or not the Endpoint can be a

target for new Connections. Default is false.

 connector - the type of Connector to use when dragging a new

connection from this Endpoint. Optional.

 connectorStyle - the Connector's appearance (see above).

 dragOptions - options to pass to the supporting library's drag engine.

 dropOptions - options to pass to the supporting library's drop engine.

 connectorOverlays - a list of overlays that should be present on all

Connections attached to this Endpoint.

Here's a simple example of how to create an Endpoint:

var endpointOptions = { isSource:true, isTarget:true };

var endpoint = jsPlumb.addEndpoint('elementId', endpointOptions);

剩余49页未读，继续阅读

评论18

eavesice

2015-10-07

用上了，很不错

大大大大本

粉丝: 1
资源: 26

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈