Configuring Defaults

配置默认值

tags: jsPlumb

The easiest way to set a look and feel for your plumbing is to override the defaults that jsPlumb uses. If you do not do this you are forced to provide your overridden values on every call. Every argument to the connect and addEndpoint methods has an associated default value in jsPlumb. 为您的界面设置样式，最简单的方法是覆盖 jsPlumb 使用的默认值。如果你不这么做，将强制每次提供您重新写的值，对于 connect 和 addEndpoint 的方法每个参数在 jsPlumb 都有一个关联的默认值。

The defaults that ship with jsPlumb are stored in jsPlumb.Defaults, which is a Javascript object. Valid entries, and their initial values, are: jsPlumb 的默认值在 jsPlumb.Defaults 对象中，每一项的默认值为：

Anchor : "BottomCenter",
Anchors : [ null, null ],
ConnectionsDetachable   : true,
ConnectionOverlays  : [],
Connector : "Bezier",
Container : null,
DoNotThrowErrors  : false,
DragOptions : { },
DropOptions : { },
Endpoint : "Dot",
Endpoints : [ null, null ],
EndpointOverlays : [ ],
EndpointStyle : { fill : "#456" },
EndpointStyles : [ null, null ],
EndpointHoverStyle : null,
EndpointHoverStyles : [ null, null ],
HoverPaintStyle : null,
LabelStyle : { color : "black" },
LogEnabled : false,
Overlays : [ ],
MaxConnections : 1,
PaintStyle : { strokeWidth : 8, stroke : "#456" },
ReattachConnections : false,
RenderMode : "svg",
Scope : "jsPlumb_DefaultScope"

Note that in EndpointHoverStyle, the default fill is null. This instructs jsPlumb to use the stroke from the attached Connector's hover style to fill the Endpoint. 注意在 EndpointHoverStyle ，fill 默认值为 null，这将指示 jsPlumb 使用 stroke 连接器的悬停样式来填充端点。

Note also that you can specify either or both (or neither) of EndpointStyle and EndpointStyles. This allows you to specify a different style for each Endpoint in a Connection. Endpoint and Endpoints use the same concept. jsPlumb will look first in the individual Endpoint/EndpointStyle arrays, and then fall back to the single default version. 还要注意，您可以指定一个或两个 EndpointStyle 和 EndpointStyles ，这允许你为连接中的每个端点指定不同的样式， Endpoint 和 Endpoints 使用相同的概念，jsPlumb 首先查看个人 Endpoint/EndpointStyle 数组，然后回到单个默认版本。

You can override these defaults by using the importDefaults method: 你可以使用 importDefaults 方法覆盖这些默认值：

jsPlumb.importDefaults({
  PaintStyle : {
    strokeWidth:13,
    stroke: 'rgba(200,0,0,0.5)'
  },
  DragOptions : { cursor: "crosshair" },
  Endpoints : [ [ "Dot", { radius:7 } ], [ "Dot", { radius:11 } ] ],
  EndpointStyles : [{ fill:"#225588" }, { fill:"#558822" }]
});

...after the jsPlumb script has been loaded of course! Here we have specified the following default behaviour: ...之后的 jsPlumb 脚本已经加载了，这里我们指定了以下默认行为：

  • connectors are 13 pixels wide and painted with a semi-transparent red line
  • when dragging an element the crosshair cursor is used
  • the source endpoint is a dot of radius 7; the target endpoint is a dot of radius 11
  • the source endpoint is blue; the target endpoint is green
  • 连接器宽 13px，半透明红线
  • 拖动元素将使用十字光标
  • 源端点半径为 7 ，目的端点半径为 11
  • 源端点为蓝色，目的端点为绿色
Explanation of each Default setting
每个默认设置的说明
  • Anchor - this will be used as the Anchor for any Endpoint for which no Anchor is declared - this applies to both the source and/or target of any Connection.

  • Anchor - 这将被用作任何没有瞄定的端点和瞄点， 使用于任何人链接的源或目标

  • Anchors - default source and target Anchors for Connections.

  • Anchors - 连接默认源和目标瞄点。
  • Connector - The default Connector to use.

  • Connector - 要使用默认的连接器。

  • ConnectionsDetachable - Whether or not Connections are detachable by default using the mouse.

  • ConnectionsDetachable - 默认情况下是否可以使用鼠标断开连接。

  • Container - The element to use as the parent for all artefacts added by jsPlumb. You cannot set this using importDefaults - it will only be honoured when you provide it in the defaults you pass to a getInstance call. To change the container after instantiating an instance of jsPlumb, use setContainer. See here for a discussion of the container concept.

  • Container - 用于 jsPlumb 添加的工件的父元素，你无法使用此设置 importDefaults - 它荣幸在当您将其提供给您传递给 getInstance 的默认设置时。要在实例化 jsPlumb 的实例后更改容器，请使用 setContainer ，有关容器的概念讨论，请参阅这里

  • DoNotThrowErrors - Whether or not jsPlumb will actually throw an exception if an Anchor, Endpoint or Connector that does not exist is requested.

  • DoNotThrowErrors - 当请求不存在的瞄点、端点、容器，jsPlumb会抛出异常。

  • ConnectionOverlays - Default Overlays to attach to every Connection - ConnectionOverlays - 默认覆盖以加到每个连接

  • DragOptions - Default options with which to configure any element made draggable with jsPlumb.draggable

  • DragOptions - 配置任何是否可拖动元素的默认选项 jsPlumb.draggable

  • DropOptions - Default options with which to configure the droppable behaviour of any target Endpoint.

  • DropOptions - 配置任何目标端点是否可以删除的默认选项。

  • Endpoint - The default Endpoint definition. Will be used whenever an Endpoint is added or otherwise created and jsPlumb has not been given any explicit Endpoint definition.

  • Endpoint - 默认的端点定义，每当添加端点或以其他方式创建端点，并且 jsPlumb 尚未给任何明确的 Endpoint 定义，将会使用他。

  • Endpoints - Default source and target Endpoint definitions for use with jsPlumb.connect.

  • Endpoints - 默认源和目标端点定义 jsPlumb.connect

  • EndpointOverlays - Default Overlays to attach to every Endpoint.

  • EndpointOverlays - 默认覆盖到以添加到每个点

  • EndpointStyle - Default appearance of an Endpoint.

  • EndpointStyle - 端点的默认外观

  • EndpointStyles - Default appearance of the source and target Endpoints in a Connection

  • EndpointStyles - 连接中的源、目标端点默认外观

  • EndpointHoverStyle - Default appearance of an Endpoint in hover state.

  • EndpointHoverStyle - 选中状态端点的默认外观

  • EndpointHoverStyles - Default appearance of the source and target Endpoints in a Connection in hover state.

  • EndpointHoverStyles - 连接中的源、目标在选中状态下的默认外观

  • HoverPaintStyle - Default appearance of a Connection in hover state.

  • HoverPaintStyle - 选中状态下连接的默认外观

  • LabelStyle - Default style for a Label. Deprecated: use CSS for this instead.

  • LabelStyle - Label 默认样式，不建议使用 CSS 代替

  • LogEnabled - Whether or not jsPlumb's internal logging is switched on.

  • LogEnabled - 是否打开 jsPlumb 的内部日志记录

  • Overlays - Default Overlays to add to both Connections and Endpoints

  • Overlays - 默认覆盖以添加到连接和端点

  • MaxConnections - The default maximum number of Connections any given Endpoint supports.

  • MaxConnections - 给定端点支持的默认连接数

  • PaintStyle - The default appearance of a Connector

  • PaintStyle - 连接器的默认外观

  • ReattachConnections - Whether or not to reattach Connections that were detached using the mouse and then neither reconnected to their original Endpoint nor connected to some other Endpoint.

  • ReattachConnections -//bit 是否重新使用鼠标分离的连接，然后既不重新连接到原始端点以及其他端点。

  • RenderMode - The default render mode.

  • RenderMode - 默认渲染模式

  • Scope - The default scope of Endpoints and Connections. Scope provides a rudimentary control over which Endpoints can be connected to which other Endpoints.

  • Scope - 端点、连接的默认范围，范围提供了对哪些端点可以连接到哪些其他端点的控制

Providing defaults to jsPlumb.getInstance

提供默认值 jsPlumb.getInstance

When you create a new instance of jsPlumb via jsPlumb.getInstance you can provide defaults for that instance as a constructor parameter - here's how we'd create a new instance using the same default values as the example above: 当你创建一个新的 jsPlumb 实例时，你可以使用 jsPlumb.getInstance 为该实例提供默认值作为构造函数的参数 - 以下是使用上述示例相同的默认值创建新实例的方式：

jsPlumb.getInstance({
  PaintStyle : {
    strokeWidth:13,
    stroke: 'rgba(200,0,0,100)'
  },
  DragOptions : { cursor: "crosshair" },
  Endpoints : [ [ "Dot", { radius:7 } ], [ "Dot", { radius:11 } ] ],
  EndpointStyles : [
    { fill:"#225588" }, 
    { fill:"#558822" }
  ]
});

results matching ""

    No results matching ""