jsPlumb文档翻译

jsPlumb文档翻译
工具箱版:
这个版本包装社区关注基本的数据模型,以及一些有用的UI布局等特性,和一个小部件提供平移/缩放功能。

它提供了一个快速的方式构建应用程序与视觉连接的核心。

工具箱版本有一个商业,按照许可与可选的访问源代码和电子邮件的支持(加上每年更新新的发布版本)。

这里有一些许可条款。

HomeHOME主页：
jsPlumb Toolkit(工具包）
jsPlumb工具包是一个包装的开源jsPlumb库提供了一些关键部分的功能:
1通过客户端数据绑定模板,支持声明式配置的连接
2一个潜在的有向图,允许您在几个方面查询数据。

3平移/缩放小部件能够序列化状态(手动或自动)本地存储或cookies。

4一个小地图部件协助大型数据集的导航。

5自动布局(分层,spring,圆形,绝对),加上自己编写的能力。

6一个强有力的声明性机制来定义的外观和行为的各个部分你的UI。

7数据加载/保存自动或点播。

8工具箱版本的jsPlumb社区作为一个依赖。

当前版本的工具包是1.0.21,所需的最低版本的jsPlumb2.1.0.。

1.Getting Started（入门指南）
最好的地方开始自己受益匪浅的架构工具包是阅读文档的一个示例应用程序,数据库可视化工具或流程图设计师。

然后,与你的许可的副本工具包,您可以使用繁重的其中一个应用程序创建一个克隆,并开始削减。

如果你宁愿从一个基本的框架，您还可以使用Grunt创建一个空的应用程序（use Grunt to create an empty application）或者,您可能想从文档开始。

数据模型和基本概念页面开始环顾四周是最好的地方。

简而言之,该工具包使用一个有向图作为其核心的数据结构。

每个应用程序都需要jsPlumb――也就是说需要能够连接实体――可以认为的指示或无向图。

2.jsPlumb Community Edition（社区版）
工具箱版本是Community edition包装,而最直接的交互的Community edition jsPlumb抽象,与UI外观相关的设置一般管道直通到底层Community edition用于呈现内容。

注意,从版本2.1.0的开始,Community Edition支持组的概念,但工具箱版本,目前版
本1.0.21,还没有。

集团支持针对工具箱的版本1.1.0版。

这些页面推荐阅读:
Basic Concepts（基本概念）给你一个入门的基本UI类型中使用Community Edition。

当呈现内容在工具箱,您将想要了
解不同类型的可用的以及他们如何可以配置。

1
Configuring Defaults（默认配置）默认设置用于jsPlumb解释道。

这些可以使用工
具箱中呈现内容。

Styling via CSS（CSS样式）你几乎肯定会想读这个页面。

它向您展
示了如何使用CSS样式jsPlumb视图。

?事实上建议阅读所有的社区版文档,使熟悉自己,但这些页面将介绍最重要的事情。

Getting Started Getting Started
虽然强烈建议你编写一个应用程序之前熟悉的基本概念jsPlumb工具箱,每个人都知道,开发人员想要和得到一些工作,然后再做一些研究。

所以,有几个方法可以直接在工具箱。

Gruntfile.js和匹配方案.json是包含在你的工具箱的执照副本。

这个Gruntfile有
两个目标,允许您创建一个克隆的一个附带的示例应用程序工具包,或创建一个基本的“Hello World”应用程序。

Clone an example app via Grunt.克隆一个示例应用程序通过Grunt
在你的工具箱文件的根目录,运行这个命令(这是假定你在电脑上安装了Grunt,说明超出了本文的范围): grunt clone --app=database-visualizer --o= 这里我们克隆database-visualizer应用。

您可以克隆任何附带工具箱的示威游行。

完整的列表:
hierarchical.分层的；等级体系的 circular.通告 absolute.绝对；绝对事物
spring imageWidget
multiple倍数多重多种 database-visualizer flowchart-builder hello-world
如果你的your output directory输出目录已经存在,克隆将不会继续。

否则,应用程
序将克隆到合适的目录中,你可以通过访问index . html。

记得主机应用程序的http服务器,而不是试图通过打开本地文件中使用它
Create an empty app via Grunt.创建一个空的应用程序通过Grunt
grunt create --o= Create an empty app manually.手动创建一个空的应用程序
有一百万种不同的方法从头创建一个页面,这里我们只讨论进口的基本要求:
CSS
jsPlumbToolkit-defaults.css (/css目录中找到)建议你包含默认的CSS。

在这个文件,您将看到评论为每个风格细节是否它是一个绝对的要求,或建议,或只是一个化妆品工
具包使用的风格展示应该如何设置。

2
Javascript
你需要引入两个JS，为下列:
o o
jsPlumb Community Version 2.1.0 or later jsPlumb Toolkit
当然,你可能会有自己的JS文件包含应用程序代码。

记得总是将你的应用程序的初
始化: jsPlumbToolkit.ready({ // your code here }); 该方法包装jsPlumbready 函数,确保一切妥当之前调用API。

Ingest an existing jsPlumb instance.摄取现有jsPlumb实例
这是一个有用的升级路径的人现有jsPlumb设置和希望逐步利用工具箱提供的所有特性。

用这种方法你可以不对你当前的代码进行任何更改，直接将拖动和缩放功能添加到您的UI,。

这是很容易摄取jsPlumb实例:
varrenderer=jsPlumbToolkit.Support.ingest({ jsPlumb:instance }); 这里instance 是jsPlumb的一些实例。

你返回来的是一个Surface 小部件,这是通常的结果调用rendermethod
工具包的一个实例。

Surface 覆盖 (拖动和缩放的元素) 成为jsPlumb实例的 Container. Accessing
the underlying Toolkit。

访问底层工具箱
通常当你使用工具包执行数据操作工具本身。

从渲染器renderer来访问这个变量返
回从ingest,调用这个方法: vartoolkit=renderer.getToolkit(); 抑制呈现
默认情况下,摄取方法将配置一个表面从jsPlumb实例的容器。

你可以抑制这种行为,回到工具包实例: vartoolkit=jsPlumbToolkit.Support.ingest({ jsPlumb:instance, render:false }); 提供渲染参数
如果您希望你也可以提供参数表面部件:
3
varrenderer=jsPlumbToolkit.Support.ingest({ jsPlumb:instance, renderParams:{ consumeRightClick:false, clampZoom:false } }); 这里我们指示启用右键单击工具箱表面(开发)时非常有用,也不夹的运动界面clamp the movement of the UI,当用户之间。

如果用户缩放以这样一种方式,它通常会。

默认的行为是夹UI,以防止内容消失。

增加节点后摄取
一旦你吸收现有jsPlumb实例添加新节点的你有两个选择:
使用现有的机制和建议通过摄取表面的方法。

该方法通过
thejsPlumbToolkit.Support创建添加到任何表面。

摄取方法;它是一个表面上不存在通过工具包创建的渲染方法。

一个例子:
varrenderer=jsPlumbToolkit.Support.ingest({jsPlumb:instance}); /* time passes. eventually a DOM element - `el` - has been added to your UI. Now you want to tell the Toolkit about it.*/ renderer.ingest(el); 使用工具箱的添加和呈现新节点数据绑定机制。

要做到这一点,你很可能想renderParams提供一个视图。

这定义了很多事情有关UI 的外观和行为; the link provided goes through your options here in detail. A simple example:提供的链接在细节上通过你的选择。

一个简单的例子:
varrenderer=jsPlumbToolkit.Support.ingest({ jsPlumb:instance, renderParams:{ view:{ nodes:{ \:{ template:\,
events:{ click:function(params){alert(\+params.node.id);} } 4
}, events:{ \:function(){alert(\);} } } }}); renderParams支持的重点是具体的参数设置为params对象渲染方法调用工具箱的一个实例。

在这个例子中我们提供的模板来使用渲染节点的ID,我们点击注册侦听器节点以及工作区域的空白。

Basic ConceptsBasic Concepts，基本概念
jsPlumb工具包是一个数据绑定和呈现包装开源jsPlumb 图书馆。

其核心是图graph 的概念,代表数据模型的实体和关系。

工具包的每个实例管理一个单一的数据模型(单图),并且可以呈现零个或多个UI元素。

每一个渲染器jsPlumb的分配自己的实例。

Instantiating the jsPlumb Toolkit实例化jsPlumb工具包 Loading Data加载数据 Rendering表现。

Instantiating the jsPlumb Toolkit 您创建一个新的工具包通过调用newInstance方法的实例: vartoolkit=jsPlumbToolkit.newInstance(); 这给你一个工具包的实例没有数据加载和渲染器。

Loading Data加载数据
您可以用几个不同的方式:获取数据到工具箱。

o 传递给它的newInstance 方法:
vartoolkit=jsPlumbToolkit.newInstance({ data:[ \:[ {\:\,\:\}, {\:\,\:\} ], \:[ 5
感谢您的阅读，祝您生活愉快。