sPlumb研究

以下jsPlumb介紹基于jsPlubm1.3.3版本，并且基礎(chǔ)庫是用jQuery1.3.x或以上，與其他版本基礎(chǔ)庫或jsPlumb的比較或后期版本升級(jí)，本文檔不做介紹。

摘要

Jsplumb是Jquery的一個(gè)插件，它能夠讓你用動(dòng)態(tài)的或靜態(tài)的鏈接來連接html界面上行的元素，并且從1.1.0版本開始，提供用鼠標(biāo)拖動(dòng)來鏈接。目前該插件支持三個(gè)javascript庫，有Jquery、MooToos、Yui3，jsplumb代碼是開源的，并且是麻省理工學(xué)院許可，由google進(jìn)行代碼托管。

官方示例：http://morrisonpitt.com/jsPlumb/html/demo.html

代碼地址：http://code.google.com/p/jsplumb/

Jsplumb介紹地址：http://jsplumb.tumblr.com/

JsPlumb允許您使用SVG、Canvas 或者 VML鏈接屏幕上的元素，這些取決于您使用的瀏覽器的能力。

瀏覽器的兼容性

jsPlumb 1.3.3 已經(jīng)在以下瀏覽器測(cè)試：

IE 6 on Windows XP

IE 7 on Windows XP

IE 8 on Windows XP

Firefox 3.5.8 on Windows XP

IE 9 on Windows 7

Chrome 12 on Windows 7

Firefox 3.5.8 on Windows 7

Firefox 3.6.3 on Ubuntu 10.04

Chrome on Ubuntu 10.04

Safari 4 on Mac Tiger

Safari 4 on Windows Vista

Safari 5.0.5 on Windows 7

Opera 10.54 on Windows XP

安裝

需要導(dǎo)入

使用jsPlumb需要到如的類庫文件，是根據(jù)您使用的javascript類庫的不同而定，目前提供以下版本。

jQuery

jquery的1.3.x或更高版本

jquery ui的1.7.x或1.8.x(如果您需要支持拖放)

MooTools

MooTools核心庫版本1.2.4或更高版本(jsPlumb已在1.2.4和1.3.3版本上測(cè)試)

MooTools的Drag.Move的1.2.4.4或更高版本

YUI3

YUI3.3.X ,目前jsPlumb只在YUI3.3.0上測(cè)試，YUI3其他版本可能也可以正常工作

jsPlumb可以使用SVG，HTML5的畫布元素或VML去呈現(xiàn)需要顯示的對(duì)象，現(xiàn)代大部分瀏覽器都支持Canvas 和 SVG,但是IE9以下都不支持這些，默認(rèn)情況下，jsPlumb都使用canvas去渲染，但如果在使用IE9以下的情況下，jsPlumb將使用vml去渲染，您可以通過下列方式調(diào)整渲染模式：

二．簡(jiǎn)介

1. 基本概念

jsPlumb是將所有鏈接的東西放在一起，所以在jsPlumb中，核心是鏈接對(duì)象，jsPlumb本身可以分成四個(gè)組成部分

錨(Anchor)：一個(gè)位置，放置端點(diǎn)的地方，相對(duì)于一個(gè)元素的來源，您不需要自己硬編碼來創(chuàng)建它，jsPlumb提供給您各種功能，您只需要按照您的需要?jiǎng)?chuàng)建它就可以了。它沒有可視化的顯示，只是一個(gè)邏輯位置，可以使用錨的id來引用它，jsPlumb支持這樣做，并且您可以使用坐標(biāo)來表示[x,y,x方向,y方向]

端點(diǎn)(Endpoint )：鏈接的一端的可視化表示，您可以創(chuàng)建并可以鏈接他們；您可以讓他們支持拖拽，或者您可以直接使用jsPlumb.connect()在創(chuàng)建鏈接時(shí)直接創(chuàng)建它們。

連接器(Connector)：鏈接兩個(gè)元素的線，頁面的可視化表示，jsPlumb有三種默認(rèn)類型:Bezier曲線，直線，和流程圖鏈接器，您不用去處理連接器，當(dāng)您需要使用它們時(shí)，您只需要定義它們即可。

覆蓋物(Overlay)：一個(gè)UI組件，是用來是用來裝飾連接器，例如標(biāo)簽、箭頭等。

錨(Anchors)

錨的概念是指：定義一個(gè)鏈接線能夠鏈接的點(diǎn)，jsPlumb有9個(gè)默認(rèn)的錨點(diǎn)位置，您可以使用它們?nèi)ユ溄釉兀唧w有：

這些位置在jsplumb底層代碼中都是以陣列語法表示的，[X,Y,DX,DY],其中X,Y是在區(qū)間[0,1]指定錨的位置，DX和DY是在區(qū)間[-1,1]指定曲線的事件錨的方向坐標(biāo)，例如[0，0.5，-1，0]定義了一個(gè)“LeftCenter”連接器的曲線，從錨點(diǎn)單向向左的曲線. 同樣，[0.5，0，0，-1]，定義一個(gè)“CenterTop”錨連接器所產(chǎn)生的向上的曲線。

動(dòng)態(tài)錨(Dynamic Anchors)

這些都是可以在若干地點(diǎn)之一定位的錨點(diǎn)，當(dāng)你每次移動(dòng)一個(gè)元素時(shí)，會(huì)自動(dòng)選擇一個(gè)最合適的位置，沒有特殊的語法來創(chuàng)建一個(gè)DynamicAnchor，你只需要提供一個(gè)獨(dú)立的錨位置，例如數(shù)組：

默認(rèn)的動(dòng)態(tài)錨：

jsPlumb提供一個(gè)動(dòng)態(tài)的錨，定名為“AutoDefault” 默認(rèn)位置有：TopCenter，RightMiddle，BottomCenter和LeftMiddle

動(dòng)態(tài)錨和可拖動(dòng)的連接是可以進(jìn)行互操作的，當(dāng)你開始拖動(dòng)連接或釋放它時(shí)，jsPlumb會(huì)鎖定一個(gè)動(dòng)態(tài)的錨的位置， 您可以在界面上看到鏈接錨點(diǎn)的切換變化。

連接器、端點(diǎn)，覆蓋物(Connector, Endpoint & Overlay Definitions)

在我們討論連接器、終點(diǎn)和覆蓋物之前，需要提醒的是：你需要定義一個(gè)連接器，端點(diǎn)或覆蓋，您必須使用一個(gè)“定義”，而不是直接構(gòu)建一個(gè)，這個(gè)定義可以是一個(gè)字符串，它指定你需要?jiǎng)?chuàng)建的對(duì)象。

或者您需要構(gòu)件的對(duì)象的屬性名組成的數(shù)組，您可以通過其構(gòu)造函數(shù)來創(chuàng)建，例如

也有三個(gè)參數(shù)的方法，可以讓你指定兩套參數(shù)，jsPlumb會(huì)自動(dòng)為你合并，例如

連接器(Connectors)

鏈接的線，實(shí)際上是界面上的各個(gè)元素的鏈接線，jsPlumb有三條連接器實(shí)現(xiàn)，一條直線、Bezier曲線和”流程圖”連線，默認(rèn)的連接線是貝塞爾曲線，您可以有選擇的設(shè)置一個(gè)鏈接器，可以通過設(shè)置“connector”來定義一個(gè)連接線，或者在添加端點(diǎn)時(shí)設(shè)置連接線，如果您沒有為connector設(shè)置一個(gè)值，那么他會(huì)用他的默認(rèn)值”Default”

三種鏈接的定義語法類似

貝塞爾曲線：

貝塞爾曲線提供了兩個(gè)端點(diǎn)之間的立方體路徑，它支持一個(gè)構(gòu)造函數(shù)參數(shù)，

curviness -可選，默認(rèn)為150，這定義的錨點(diǎn)位于貝塞爾曲線的控制點(diǎn)，以像素為單位的距離，但這并不意味著你的連接器會(huì)穿過從你的曲線到這個(gè)距離的點(diǎn)，這僅是一個(gè)標(biāo)識(shí)而已。

直線：直連繪制直線的兩個(gè)端點(diǎn)之間。 沒有構(gòu)造函數(shù)的參數(shù)支持，使用參數(shù)endpointStyle定義連接樣式或添加端點(diǎn)時(shí)定義連接線樣式

流程圖：這種類型的連接器，繪制一系列垂直或水平段組成的連接 - 經(jīng)典的流程圖?，支持一個(gè)單一的構(gòu)造函數(shù)參數(shù)

存根 -這是最小長度，以像素為單位，從端點(diǎn)發(fā)出的初始存根。 此參數(shù)是可選的，默認(rèn)為30像素

端點(diǎn)類型(Endpoint Types)

一個(gè)端點(diǎn)的UI組件，標(biāo)志著一個(gè)錨的位置，是連接器連接的點(diǎn)，jsPlumb有三個(gè)端點(diǎn)實(shí)現(xiàn)，點(diǎn)、矩形和圖形，你可以指定端點(diǎn)的屬性，在jsPlumb.connect時(shí)指定屬性，或者jsPlumb.Addendpiont時(shí)指定，或者設(shè)置jsPlumbde target時(shí)設(shè)定屬性，語法可參照connector。

三個(gè)可用的端點(diǎn)類型，他們的構(gòu)造函數(shù)參數(shù)如下：

點(diǎn)端點(diǎn)(Dot Endpoint)：

此端點(diǎn)在屏幕上畫一個(gè)點(diǎn)。 它支持一個(gè)構(gòu)造函數(shù)參數(shù)：

半徑 -可選，默認(rèn)為10個(gè)像素。 定義點(diǎn)的半徑

矩形端點(diǎn)(Rectangle Endpoint)：

繪制一個(gè)矩形。 支持的構(gòu)造函數(shù)的參數(shù)是：

寬度 -可選;默認(rèn)為20像素。 定義矩形的寬度。

高度 -可選，默認(rèn)為20個(gè)像素。 定義矩形的高度。

圖片端點(diǎn)(Image Endpoint)：

從一個(gè)給定的的URL繪制圖像。 此端點(diǎn)支持一個(gè)構(gòu)造函數(shù)的參數(shù)：

SRC -必需的。 指定要使用的圖像的URL。

覆蓋物類型(Overlay Types)

覆蓋界面上的鏈接元素，如標(biāo)簽或箭頭等，jsPlumb有四個(gè)默認(rèn)值：

Arrow：可配置的箭頭，放在兩個(gè)點(diǎn)的連接線上，你可以控制箭頭的長度和寬度，

轉(zhuǎn)折點(diǎn)：是一個(gè)折回點(diǎn)，方向點(diǎn)(允許值是1和-1，意味著是點(diǎn)的鏈接方向)

Label：在點(diǎn)的連接器上的可配置的標(biāo)簽

PlainArrow：一個(gè)三角形箭頭，沒有折回點(diǎn)

Diamond:顧名思義，鉆石

最后的兩個(gè)實(shí)際上市Arrow的配置的實(shí)例，當(dāng)您調(diào)用jsPlumb.connect或jsPlumb.addEndpoint時(shí)，您可以指定一個(gè)或多個(gè)覆蓋物。

1. 這里我們舉個(gè)例子，默認(rèn)的箭頭，上面加上文字”foo”，如圖：

這個(gè)鏈接將有一個(gè)箭頭標(biāo)簽在連線的一般，并且文字標(biāo)簽在連線的四分之一處，可以注意下id屬性，你可以用它來刪除標(biāo)簽或做其他操作。

1. 下面的實(shí)例，添加兩個(gè)覆蓋物，請(qǐng)注意，我們?cè)谶@個(gè)例子中使用的參數(shù)“connectorOverlays，”而不是上面例子中的“overlays”，這是因?yàn)榭傆幸惶靜verlays會(huì)用來作為終結(jié)點(diǎn)的覆蓋物樣式：

這個(gè)鏈接將有一個(gè)10*30的的箭頭和含有文字foo的標(biāo)簽，位置在連接線的開頭，另外，需要注意每一個(gè)覆蓋物的id。

1. PlainArrow

這僅僅是一個(gè)特殊的Arrow的實(shí)例，內(nèi)部jsPlumb給”foldback”硬編碼為1，意思是一個(gè)平面的箭頭尾部邊緣，Arror的所有構(gòu)造函數(shù)適用于PlainArrow.

1. Diamond

這也是一個(gè)特殊的Arrow實(shí)例，其中jsPlumb內(nèi)部給foldback硬編碼值為2，意味著箭頭轉(zhuǎn)變?yōu)镈iamond,Arrow的所有構(gòu)造函數(shù)適用于Diamond.

1. Lable

提供了一個(gè)文本的標(biāo)簽來裝飾連接器，可用的構(gòu)造函數(shù)參數(shù)有：

Lable：要顯示的文字，你也可用提供一個(gè)函數(shù)放這兒，用來替代文本，他是做為連接的參數(shù)返回，應(yīng)該返回一個(gè)string類型的字符串；

cssClass：一個(gè)可選的用于lable的樣式類，這是目前首選的”lableStyle”參數(shù)，樣式有：

Location：做為 “Arrow” 標(biāo)簽應(yīng)該顯示的位置,比例從0到1，包括1。

1. 顯示/隱藏 覆蓋

你可用使用setVisible來控制Arrow的顯示或隱藏，或者showOverlay（ID）方法，或者h(yuǎn)ideOverlay（ID）方法，請(qǐng)注意這里的參數(shù)id，是我們?cè)谠O(shè)定各個(gè)元素時(shí)指定的，它可用用來找到那個(gè)元素。簡(jiǎn)單的實(shí)例：

并且，連接器connection也有很方便的方法用來替代上面的方法

如圖：

連接器connection也提供刪除覆蓋物的方法，如圖：

默認(rèn)值(Defaults)

最簡(jiǎn)單的方式來設(shè)置你的pluming的顯示外觀等等，是重寫這些元素的默認(rèn)值，如果你不這么做，你得每次都手動(dòng)的去提供這些值；每一個(gè)connect和addEndpoint方法都有一個(gè)關(guān)聯(lián)的默認(rèn)值，這些默認(rèn)值存儲(chǔ)在jsPlumb.Defaults里面，他是一個(gè)javascript對(duì)象，這些參數(shù)的初始值是：

您可用用類似下面的方法來覆蓋默認(rèn)值

三．鏈接(Connections)

1.基本鏈接(Programmatic Connections)

1. 最簡(jiǎn)單的鏈接，你可用這樣寫

在這個(gè)例子中，我們已經(jīng)創(chuàng)建了“element1的”element2的“連接。 請(qǐng)記住，在jsPlumb中連接是靠?jī)蓚€(gè)端點(diǎn)，連接器，和零個(gè)或多個(gè)覆蓋物重疊組成，但是，這個(gè)實(shí)例的“連接”沒有提供這些東西，所以jsPlumb在需要這些的地方都用的是默認(rèn)值，這些默認(rèn)值是：

--鏈接的兩個(gè)端點(diǎn)，jsPlumb默認(rèn)使用的是Dot點(diǎn)端點(diǎn)，半徑10，填充顏色#456

--鏈接的兩個(gè)端點(diǎn)的錨，也是用的是默認(rèn)值

--設(shè)定兩個(gè)端點(diǎn)是否可被用來做為新的鏈接點(diǎn)，默認(rèn)值為false

--鏈接器的類型和外觀，默認(rèn)值是貝塞爾曲線，寬度8，顏色#456

所以這個(gè)鏈接是：

一個(gè)8px的貝塞爾曲線，從一個(gè)端點(diǎn)(element1)的bottomCenter移到另一個(gè)端點(diǎn)的bottomCenter，而且每一個(gè)端點(diǎn)的都是以10px為半徑，#456為顏色的Dot點(diǎn)，

1. 讓我們稍微加強(qiáng)一點(diǎn)這個(gè)鏈接，并且告訴jsPlumb我們想要什么，如圖：

具體樣式…就不介紹了，自己看圖。

1. 重用jsPlumb的鏈接設(shè)置

一種非常常見的情況，比如你想要同一個(gè)設(shè)置，來創(chuàng)造多個(gè)鏈接，jsPlumb connect有兩個(gè)參數(shù)

2.使用拖放的鏈接(Programmatic Connections)

如果需要鏈接支持拖放，你首先需要進(jìn)行一下設(shè)置，每一個(gè)需要支持拖放的鏈接，至少需要一個(gè)終結(jié)點(diǎn)，這里給一個(gè)實(shí)例，展示怎樣去創(chuàng)建Endpoint

此端點(diǎn)將作為連接的資源，任何來自他的鏈接都將使用jsPlumb默認(rèn)的樣式作為自己的樣式

Tip:一些常用的數(shù)據(jù)使用三個(gè)參數(shù)的addEndPoint方法

經(jīng)常發(fā)生的一件事：你有一個(gè)端點(diǎn)，他的樣式和其他的端點(diǎn)只有一點(diǎn)點(diǎn)區(qū)別，大多數(shù)都是一樣的，這樣的情況下，你可以定義個(gè)相同的樣式，有不同的樣式可以單獨(dú)立出來，如下圖，注意下anchor設(shè)置，兩個(gè)元素是不一致的：

現(xiàn)在你有一個(gè)源端點(diǎn)，你需要在其他元素上創(chuàng)建一個(gè)終結(jié)點(diǎn)，或者通知jsPlumb你需要使整個(gè)元素成為一個(gè)拖拽的目標(biāo)，讓我們看看怎樣去創(chuàng)建這樣一個(gè)端點(diǎn)：

還有另外一個(gè)方法，jsPlumb.makeTarget()，這個(gè)方法需要兩個(gè)參數(shù)，第一個(gè)參數(shù)是指需要設(shè)定的元素，或者元素列表，第二個(gè)參數(shù)是指當(dāng)一個(gè)鏈接建立時(shí)你需要的端點(diǎn)，在這個(gè)例子中，我們用我們之前就用過的端點(diǎn)，-the gray Rentangle—但是我們需要告訴jsPlumb,元素” aTargetDiv”將會(huì)被作為dorp的端點(diǎn)：

在jsPlumb中方法jsPlumb.addEndpoint 和方法jsPlumb.makeTarget，對(duì)象endpointOptions里面的參數(shù)都是一樣可以用的，你可以在端點(diǎn)終結(jié)點(diǎn)設(shè)置很多東西，這個(gè)你可以參見api列表說明。下面的示例顯示了指定的箭頭在鏈接拖動(dòng)到終結(jié)點(diǎn)的連接線的一半的地方

下面這個(gè)示例展示的是，這個(gè)終結(jié)點(diǎn)，連接到它的連接線是依賴這個(gè)終結(jié)點(diǎn)的位置，因?yàn)樗x了好幾個(gè)錨點(diǎn)，連接線會(huì)自動(dòng)找到該終結(jié)點(diǎn)的動(dòng)態(tài)錨：

3.”拖”選項(xiàng)(Drag Options）

這些拖動(dòng)選項(xiàng)將通過jsPlumb api庫來提供支持，jsPlumb將會(huì)提供你需要的一切，如果你需要一些拖動(dòng)過程中的生命周期事件 ，你需要提供給jsPlumb一個(gè)通知方法，如果觸發(fā)某個(gè)事件，它會(huì)調(diào)用該方法，比若說你需要在拖動(dòng)開始時(shí)：

4.”放”選項(xiàng)(Drop Options)

Drop選項(xiàng)和Drag方式是一樣的，用法可參見jquery用法

http://docs.jquery.com/UI/Droppable

5.”拖放”范圍(域)( Drop Options)

jsPlumb借用了jquery里面drag/drop的范圍概念，范圍的概念是指那些可拖放的元素只能夠被拖放到那些有范圍的元素里面，在jsPlumb中你可以在創(chuàng)建EndPoint時(shí)創(chuàng)建一個(gè)范圍”Scope”，下面給出一個(gè)例子：

如果你不提供一個(gè)”Scope”，jsPlumb將使用一個(gè)默認(rèn)的范圍，在這個(gè)方法中，這個(gè)值是可用的：

如果你因?yàn)槟承┰蛳敫淖兯闹担憧梢赃@樣做：

如果你想，你也可以這樣，提供一個(gè)drap和drop的范圍值：

四．外觀

1. 基本樣式

定義端點(diǎn)、覆蓋物(覆蓋物現(xiàn)在更傾向于用cssClass來替代)、連接線的樣式，這些樣式是由paintStyle作為jsPlumb connect、jsPlumb.makeTarget、jsPlumb.addEndPoint方法的參數(shù)來定義的，根據(jù)你調(diào)用的不同方法，參數(shù)名稱會(huì)不一樣，具體不同如下面所列：

連接線樣式

jsPlumb.connect:

jsPlumb.addEndpoint:

注意上面的樣式參數(shù)，下面我們對(duì)它進(jìn)行討論

終結(jié)點(diǎn)樣式：

像上面的定義我們可以有下列方法：

1. 添加終結(jié)點(diǎn)時(shí)定義：

1. 作為jsPlumb.connect連接時(shí)的參數(shù)

1. 或作為jsPlumb.connect連接對(duì)象樣式數(shù)組中的一個(gè)

1. 或者在jsPlumb.makeTarget方法中

在上面的示例中，我們講”e1”拖放到作為目標(biāo)的”e2”中，并且定義了終結(jié)點(diǎn)的樣式。

覆蓋物樣式

最完美的設(shè)置覆蓋物樣式的方式是使用創(chuàng)建overlay時(shí)的構(gòu)造函數(shù)來定義

樣式參數(shù)列表

這是設(shè)置paintStyle的完整參數(shù)列表

但是請(qǐng)注意，fillStyle參數(shù)在connector中會(huì)被忽略，strokeStyle在EndOptions中會(huì)被忽略，此外，如果你使用jsPlumb.connect創(chuàng)建鏈接，并且為指定任何EndOption樣式，EndOptions中的fillStyle樣式會(huì)被指定為連接線的strokeStyle。

fillStyle, strokeStyle and outlineColor可以使用任何有效的CSS3語法

fillStyle:定義EndPoint的顏色，例如rgba(100,100,100,50), "blue", "#456", "#993355", rgb(34, 56, 78)

strokeStyle:連接器的顏色

lineWidth:連接線的寬度，是個(gè)Int值

outlineWidth：連接器或端點(diǎn)的輪廓寬度，int值

outlineColor：連接器或端點(diǎn)的顏色

dashstyle、The VML spec、stroke-dasharray、stroke-dashoffset、stroke-dashoffset、stroke-linejoin

只適用于VML或SVG或VML和SVG，這里不做介紹

2. 懸浮樣式

當(dāng)鼠標(biāo)懸浮在這些元素上時(shí) ，連接線和終結(jié)點(diǎn)都支持鼠標(biāo)懸浮樣式。他們的樣式需要被精確的指定，指定的方式和我們?cè)谏厦嬗懻摰姆绞揭恢拢瑧腋邮揭惨粯永^承了基本樣式，這是因?yàn)楫?dāng)鼠標(biāo)移上去的時(shí)候，您通常會(huì)只希望更改顏色，或者輪廓顏色，所以你只需要指定需要改變的值即可，這樣避免了你需要定義重復(fù)的樣式，鼠標(biāo)懸浮樣式的參數(shù)名只是需要在正常樣式前加入”hover”即可，下面給個(gè)例子：

在這個(gè)示例中，我們指定兩個(gè)鏈接線和終結(jié)點(diǎn)的鼠標(biāo)懸浮樣式，這地方的兩個(gè)連接線和終結(jié)點(diǎn)的懸浮樣式是一樣的，我們也可以使用復(fù)數(shù)形式使兩個(gè)端點(diǎn)或兩條連接線的懸浮樣式不一樣，如下圖：

上面示例中兩個(gè)終結(jié)點(diǎn)的鼠標(biāo)懸浮樣式是不一樣的。通過下面的兩種方式也可以實(shí)現(xiàn)， jsPlumb.addEndpoint和jsPlumb.makeTarget ：

（這里我們指定了端點(diǎn)的樣式和所有從這個(gè)端點(diǎn)鏈接的線的樣式）

和

（makeTarget也同樣支持paintStyle樣式）

但是我們得注意，makeTarget不支持連接線的參數(shù)，它只支持終結(jié)點(diǎn)。所有的鏈接中的連接線的參數(shù)是當(dāng)你在用鏈接方法時(shí)在源端點(diǎn)設(shè)置的。

3. Gradients漸變

Canvas 和SVG 都支持漸變，VML不支持，jsPlumb用它自己的語法來定義漸變，來適用于SVG 和Canvas 之間不同的語法。

有兩種類型的漸變可用：

(Linear) 線條漸變：彩色線條都在同一個(gè)方向

(radial) 半徑的，光線似的漸變：有彩色圓圈組成，有這個(gè)圈到那個(gè)圈的樣式。

由于他們的基本樣式不同，jsPlumb僅為連接線提供了Linear(第一種)漸變，但為端點(diǎn)提供了兩種方式。

線條漸變：

要在鏈接中使用漸變，你需要提供一個(gè)漸變的對(duì)象，例如：

這里我們有個(gè)從win2到win3的連接線，寬度15px;顏色是從綠色到紅色的漸變。

注意這地方的漸變對(duì)象和stops列表，漸變對(duì)象里面的顏色梯度可以是任意數(shù)值，每中顏色梯度包含兩個(gè)值[position,color]，position值得范圍必須在0到1之間，數(shù)值類型是decimal，表示該種顏色開始的位置，顏色的有效值和strokeStyle是一樣的。

Stops列表可以包含任意個(gè)數(shù)，下面的例子表示顏色從紅-藍(lán)-綠-藍(lán)-紅

如果你使用VML，jsPlumb將會(huì)忽略你的漸變指令，所以最好的做法是，你需要單獨(dú)指定strokeStyle ，因?yàn)槟J(rèn)情況下，如果不支持gradient時(shí)，jsPlumb就會(huì)返回使用使用gradient的基本樣式strokeStyle ，如果你沒提供strokeStyle ，則默認(rèn)都是黑色的， 所以最好還是提供strokeStyle 樣式，例如：

端點(diǎn)漸變

端點(diǎn)的漸變樣式語法和連接線的語法是一樣的，你指定端點(diǎn)的漸變樣式要么放在endPoint的對(duì)象設(shè)置里面，要么放在連接線定義時(shí)，不同端點(diǎn)的定義數(shù)組里面，并且，該信息適用于您正在創(chuàng)建的需要拖拽的端點(diǎn)定義。

看下面示例：

只有Dot和Rectangle 類型的端點(diǎn)支持，圖片端點(diǎn)時(shí)不支持的，當(dāng)然在VML中也不支持。

Dot示例：

顯示一個(gè)端點(diǎn)，顏色漸變從最外端開始，端點(diǎn)的漸變需要的數(shù)據(jù)顯然會(huì)比線條漸變多，在一個(gè)線條的漸變中，我們只需要從一個(gè)點(diǎn)移動(dòng)到下個(gè)點(diǎn)即可，但是在端點(diǎn)的漸變中，我們需要從一個(gè)圈移動(dòng)到另一個(gè)圈，默認(rèn)情況下，jsPlumb會(huì)使用一個(gè)相同半徑的圈。

并且offset和innerRadius也可以使用百分?jǐn)?shù)來替代。

五．雜項(xiàng)

1. CSS樣式

jsPlumb在它創(chuàng)建的每個(gè)組件時(shí)都會(huì)附加一些類，這些類名都是公開的，并且如果你需要的話你可以將他們重寫，具體如下：

你可以運(yùn)用這些樣式類來使你的界面達(dá)到最佳效果。

2. Animation動(dòng)畫

jsPlumb提供動(dòng)畫的方法，它是將你使用的基礎(chǔ)庫中的動(dòng)畫引擎進(jìn)行封裝，并且提供一個(gè)回調(diào)函數(shù)，以供jsPlumb在每一步進(jìn)行跟蹤，你可以自己自己定義這個(gè)回調(diào)函數(shù)，非常方便：

回調(diào)函數(shù)參數(shù)解釋：

el:元素id,或者元素的對(duì)象

properties:動(dòng)畫的屬性，例如持續(xù)事件等

options:動(dòng)畫選項(xiàng)，例如回調(diào)函數(shù)等。

3. 找到鏈接信息

jsPlumb提供了一個(gè)完全公用的方法，getConections—來找到關(guān)于當(dāng)前管理的鏈接，在用這個(gè)方法之前，你需要了解jsPlumb中scope概念，

1. 檢索單個(gè)范圍的鏈接

• 獲取jsPlumb默認(rèn)的“scope”中的鏈接

• 獲取“scope”為myScope中的鏈接

1. 更進(jìn)一步的過濾

getConnection方法提供含js對(duì)象的方法來篩選，可有如下三個(gè)對(duì)象：

scope:您要檢索的鏈接所屬范圍(域)

source:返回的鏈接限制為那些有此源id的鏈接

target: 返回的鏈接限制為那些有此目標(biāo)端點(diǎn)id的鏈接

提供的這三個(gè)參數(shù)，可以作為對(duì)象，也可作為字符串來傳遞

（返回的是在這兩個(gè)scope中的連接）

返回值是：

下面列出不同的獲取示例：

1. 獲取所有鏈接

1. 獲取默認(rèn)scope的鏈接

1. 獲取指定scope的鏈接

1. 獲取指定的多個(gè)scope的鏈接，返回

1. 返回指定source的鏈接

1. 返回指定target的鏈接

1. 返回指定source和指定target的鏈接

1. 三個(gè)參數(shù)并用

六．事件

jsPlumb支持綁定到不同的事件 ，有連接線、端點(diǎn)、覆蓋物和jsPlumb本身的事件 ，如果需要綁定時(shí)間，你需要使用一個(gè)方法：jsPlumb.bing(object,event,callback)，但是這除了overlay的事件，因?yàn)閛verlay的事件可以直接在overlay定義時(shí)直接綁定overlay的事件監(jiān)聽，

1. jsPlumb事件

jsPlumbConnection—當(dāng)設(shè)定一個(gè)連接時(shí)會(huì)通知，這個(gè)新連接對(duì)象將會(huì)作為回調(diào)函數(shù)參數(shù)傳遞

jsPlumbConnectionDetached—當(dāng)一個(gè)鏈接被取消時(shí)通知，這個(gè)被取消的鏈接對(duì)象會(huì)被作為回調(diào)函數(shù)的參數(shù)傳遞

Click—獲取鏈接的點(diǎn)擊事件，回調(diào)函數(shù)將傳遞點(diǎn)擊的鏈接和鼠標(biāo)事件

Dbclick—雙擊，其他同上

Endpointclick—當(dāng)端點(diǎn)點(diǎn)擊事件時(shí)通知，端點(diǎn)對(duì)象和鼠標(biāo)事件是回調(diào)函數(shù)的參數(shù)

endPointDbClick—雙擊，其他同上

2. Conection事件

Click—當(dāng)一個(gè)鏈接被點(diǎn)擊時(shí)觸發(fā)，回調(diào)函數(shù)傳遞的參數(shù)是鼠標(biāo)事件和connection對(duì)象

Dbclick—雙擊，其他同上

Mouseenter—當(dāng)鼠標(biāo)進(jìn)入鏈接的path觸發(fā)，回調(diào)函數(shù)傳遞的也是鼠標(biāo)事件和connection對(duì)象

mouseExit—當(dāng)鼠標(biāo)從connection的path離開時(shí)觸發(fā)，其他同上

3. Endpoint事件

Click-- 端點(diǎn)被點(diǎn)擊時(shí)觸發(fā)，回調(diào)函數(shù)傳遞的參數(shù)有鼠標(biāo)事件和端點(diǎn)對(duì)象

Dbclick—雙擊事件時(shí)觸發(fā)，其他同上

mouseEnter—鼠標(biāo)進(jìn)入端點(diǎn)時(shí)觸發(fā)，回調(diào)函數(shù)傳遞的也是鼠標(biāo)事件和端點(diǎn)對(duì)象

mouseExit—當(dāng)鼠標(biāo)從端點(diǎn)中離開時(shí)觸發(fā)，回調(diào)函數(shù)傳遞的參數(shù)也是鼠標(biāo)事件和端點(diǎn)對(duì)象

4. Overlay事件

Overlay的事件監(jiān)聽注冊(cè)有點(diǎn)不同，你將他們作為overlay的構(gòu)造函數(shù)參數(shù)，這是因?yàn)槟銖膩聿粫?huì)對(duì)overlay有真正的動(dòng)作，下面的示例看看怎么樣注冊(cè)一個(gè)overlay的事件：

jsPlumb.connect({

source:"el1",

target:"el2",

overlays:[

[ "Label", {

events:{

click:function(labelOverlay, originalEvent) { alert("you clicked on the label overlay for this connection :" + labelOverlay.connection) }

}

}]

]

});

七．示例

1. Connection示例

jsPlumb.connect示例、拖拽的connection示例參見文檔http://jsplumb.org/doc/usage.html

2. 使用工具函數(shù)

1. 分離win5和其他元素的所有鏈接

2. 隱藏win5的所有鏈接

3. 隱藏win5鏈接的所有鏈接和終結(jié)點(diǎn)

4. 顯示所有win5的鏈接

5. 顯示win5的所有鏈接和終點(diǎn)，請(qǐng)注意這個(gè)示例中的兩個(gè)參數(shù)，如果它決定這個(gè)鏈接中的其他端點(diǎn)也是不可見的，jsplumb也不會(huì)使這個(gè)鏈接顯現(xiàn)。

1. 切換win5的鏈接線的顯示或隱藏

1. 重畫win5的所有鏈接

1. 重畫win5,win6,win11的所有鏈接

1. 重畫所有鏈接

1. 取消所有鏈接

1. 刪除從win1出發(fā)到給定終結(jié)點(diǎn)中間的所有鏈接和終結(jié)點(diǎn)

1. 刪除和win1鏈接的所有端點(diǎn)和之間的鏈接

1. 刪除jsplumb實(shí)例管理的端點(diǎn)，刪除他們之間的鏈接，這是和jsplumb.reset()方法相同的地方，但它不會(huì)清除時(shí)間監(jiān)聽列表。

1. 刪除指定的端點(diǎn)和它的連接線

1. 刪除所有的端點(diǎn)、端點(diǎn)、并且清除事件監(jiān)聽列表，返回jsplumb實(shí)例的初始化形態(tài)

1. 設(shè)置端點(diǎn)不可拖動(dòng)，不管怎樣發(fā)出指令

1. 設(shè)置兩個(gè)端點(diǎn)不可以拖動(dòng)：

1. 設(shè)置默認(rèn)情況下是否可拖動(dòng)元素，默認(rèn)情況下是可以拖動(dòng)的

1. 設(shè)置win1可拖動(dòng)

1. 設(shè)置win1和win2都可拖動(dòng)

1. 設(shè)置所有包含class=”windows”的元素可拖動(dòng)

（jQuery下，其他js庫下面不列出）

八．開發(fā)

目前jQuery-jsplumb-1.3.3-all.js包含了下面的js庫集合：

jsPlumb-1.3.3.js

jsPlumb-defaults-1.3.3.js

jsPlumb-renderers-canvas-1.3.3.js

jsPlumb-renderers-svg-1.3.3.js

jsPlumb-renderers-vml-1.3.3.js

jquery.jsPlumb-1.3.3.js

jsBezier-0.2-min.js

臺(tái)ID：WEB_wysj(點(diǎn)擊關(guān)注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄

（微信回復(fù)HTML5，獲取全套源碼）

● ● ●

HTML5標(biāo)準(zhǔn)已經(jīng)塵埃落定，未來的Web將會(huì)是由HTML5主導(dǎo)，當(dāng)然作為開發(fā)者對(duì)這一喜訊更為動(dòng)心。本文主要分享了15個(gè)無比華麗的HTML5/CSS3動(dòng)畫應(yīng)用，供大家參考學(xué)習(xí)。

1、HTML5/CSS3圖片選擇動(dòng)畫 可選擇多張圖片

今天我們來分享一款既炫酷又實(shí)用的HTML5圖片選擇特效，當(dāng)圖片被選中時(shí)，圖片上就會(huì)覆蓋一個(gè)半透明的層，上面有一個(gè)勾，并且在選中的時(shí)候圖片出現(xiàn)彈跳的動(dòng)畫效果。

2、純CSS3實(shí)現(xiàn)圖片復(fù)古效果 鼠標(biāo)滑過切換

今天我們要分享一款非常酷的圖片效果，這個(gè)效果在很多P圖軟件中經(jīng)常可以看到，就是對(duì)一張圖片進(jìn)行復(fù)古效果的渲染。這款CSS3圖片效果就實(shí)現(xiàn)了這個(gè)復(fù)古的特效，我們只要將鼠標(biāo)滑過圖片，就可以實(shí)現(xiàn)這一圖片復(fù)古效果了。

3、CSS3華麗的Tab菜單 帶小圖標(biāo)動(dòng)畫

之前我們分享過一款非常出色的CSS3 Tab菜單HTML5 SVG Tab滑塊菜單，結(jié)合SVG，Tab菜單實(shí)現(xiàn)非常靈活。今天我們要再來分享一款基于CSS3的華麗Tab菜單，這款Tab菜單的菜單項(xiàng)是一個(gè)個(gè)小圖標(biāo)，鼠標(biāo)滑過時(shí)，菜單項(xiàng)展示對(duì)應(yīng)文字，并出現(xiàn)展開的動(dòng)畫。

4、HTML5/CSS3書本翻頁3D動(dòng)畫

前段時(shí)間我們分享過很多牛叉的HTML5動(dòng)畫，如果你對(duì)HTML5感興趣，可以移步至HTML5動(dòng)畫欣賞學(xué)習(xí)。今天我們要分享一款基于HTML5和CSS3的書本翻頁3D動(dòng)畫，當(dāng)我們將鼠標(biāo)滑過書本時(shí)，書本就會(huì)自動(dòng)一頁頁翻過去，書本的3D效果非常不錯(cuò)。

5、HTML5 3D骨牌圖片特效 帶文字描述

今天分享一款很特別的HTML5 3D圖片特效，當(dāng)鼠標(biāo)滑過圖片時(shí)，平面的圖片即會(huì)呈現(xiàn)3D的效果，和這款HTML5 3D圖片折疊特效類似，也是通過鼠標(biāo)滑過來展現(xiàn)3D效果。另外，這款HTML5 3D骨牌圖片特效還可以設(shè)置圖片描述信息。

6、jQuery UI滑桿插件 可Tooltip提示

今天我們?cè)賮斫榻B一款實(shí)用的jQuery插件，是基于jQuery UI的。這款jQuery滑桿插件非常漂亮，可以設(shè)置多種顏色，再加上CSS3上運(yùn)用，可以讓滑桿的游標(biāo)變得有立體感，滑桿的Tooltip提示框也出現(xiàn)飛入飛出的動(dòng)畫效果。更多jQuery插件可以移步至jQuery插件欄目。

7、CSS3個(gè)人資料表單 分兩步驟表單

對(duì)于分步驟表單，我們之前也已經(jīng)有過介紹了，像這款HTML5分步驟注冊(cè)表單就非常不錯(cuò)，今天我們要來介紹另外一款分步驟表單，這是一款個(gè)人資料填寫表單，我們可以分兩步來填寫個(gè)人資料，每一步的切換都有淡入淡出的動(dòng)畫效果，你也可以回退到上一步繼續(xù)填寫。

8、HTML5/CSS3仿Facebook登錄表單

利用CSS3制作的登錄表單的確很漂亮，我們?cè)趆tml5tricks網(wǎng)站上也分享過幾款了，比如CSS3密碼強(qiáng)度驗(yàn)證表單可以顯示密碼的強(qiáng)度，這款純CSS3發(fā)光登錄表單更是絢麗多彩。今天我們要分享一款仿Facebook的登錄表單，無論從外觀還是功能上說，這款登錄表單還是挺接近Facebook登錄表單的。

9、HTML5/CSS3超酷進(jìn)度條 不同進(jìn)度多種顏色

這是一款線條狀的CSS3進(jìn)度條，這款進(jìn)度條有兩個(gè)特點(diǎn)：一是隨著進(jìn)度條的進(jìn)度更新，都會(huì)有數(shù)字百分比實(shí)時(shí)顯示，讓數(shù)據(jù)更加直觀；二是在不同的進(jìn)度階段，進(jìn)度條的顏色會(huì)有所變化，這樣能更好的反應(yīng)當(dāng)前的進(jìn)度狀態(tài)。加上黑色的背景，讓這款CSS3進(jìn)度條更加鮮亮起來。

10、CSS3 3D發(fā)光切換按鈕 模擬效果很逼真

剛剛我們發(fā)布過一款CSS3開關(guān)切換滑動(dòng)按鈕，應(yīng)該說出了有點(diǎn)3D立體的效果外，其他都很普通。現(xiàn)在我們要來分享一款更酷的CSS3開關(guān)切換按鈕，它不僅具有3D的效果，而且可以發(fā)光，當(dāng)開關(guān)處于打開狀態(tài)時(shí)，旁邊的小燈就會(huì)亮起來，然后燈光投射到開關(guān)上，效果挺逼真的。

11、HTML5線性圖表 圖表數(shù)據(jù)區(qū)域可著色

利用HTML5制作圖表插件也比較常見，我們也收集過幾款很實(shí)用的HTML5圖表插件，它們確實(shí)可以幫助我們?cè)诰W(wǎng)頁上直觀地展示數(shù)據(jù)。今天我們要再來分享一款實(shí)用的HTML5線性圖表插件，這款線性圖表可以在不同的數(shù)據(jù)區(qū)域內(nèi)繪制不同的顏色，讓每一個(gè)數(shù)據(jù)區(qū)域都非常明顯可見。

12、HTML5柱狀圖表 可合并多張圖表的數(shù)據(jù)

之前我們分享過好幾款不錯(cuò)的HTML5柱狀圖表了，像這款HTML5/CSS3水平柱狀圖表，非常簡(jiǎn)單實(shí)用的圖表。今天我們要再來分享一款HTML5柱狀圖表，這款圖表插件可以將多張圖表的數(shù)據(jù)合并成一張圖表顯示，在圖表數(shù)據(jù)合并過程中產(chǎn)生融入的動(dòng)畫，挺不錯(cuò)的。

13、HTML5/CSS3提示框Tooltip動(dòng)畫

之前我們已經(jīng)分享過一款HTML5/CSS3分步提示框Tooltip ，不過這款提示框主要是用來分步操作提示的，不是真正的Tooltip。今天我們要分享一款利用CSS3實(shí)現(xiàn)的提示框Tooltip動(dòng)畫。當(dāng)鼠標(biāo)移到圖標(biāo)按鈕上時(shí)，就會(huì)在按鈕正上方彈出一個(gè)Tooltip提示框，并且伴有淡入淡出的效果。

14、HTML5/CSS3滑塊動(dòng)畫菜單 圖標(biāo)動(dòng)畫很酷

CSS3菜單我們之前已經(jīng)分享很多了，有3D菜單、下拉菜單、Tab菜單等，具體大家可以移步至CSS3菜單欄目下查找。今天我們要分享的這款HTML5/CSS3滑塊動(dòng)畫菜單非常酷，鼠標(biāo)滑過菜單項(xiàng)時(shí)會(huì)有一個(gè)漂亮的遮罩移動(dòng)過來，并且這款動(dòng)畫菜單還有非常酷的圖標(biāo)，菜單整體效果很大氣。

15、HTML5 Canvas畫板畫圖工具 可定義筆刷和畫布

HTML5 Canvas還有一個(gè)比較實(shí)用的應(yīng)用，那就是網(wǎng)絡(luò)畫板，這樣我們就可以在網(wǎng)頁上直接進(jìn)行畫圖操作。今天要分享的這款HTML5 Canvas畫圖工具就可以簡(jiǎn)單實(shí)現(xiàn)網(wǎng)絡(luò)畫圖的功能，我們可以自定義筆刷的類型、粗細(xì)、顏色，也可以定義畫布的大小和背景顏色等。我們也可以對(duì)這款HTML5畫圖工具進(jìn)行擴(kuò)展，讓它的畫圖功能更加完善。

干貨！免費(fèi)領(lǐng)取騰訊高級(jí)講師網(wǎng)頁設(shè)計(jì)教程

點(diǎn)我領(lǐng)取

點(diǎn)擊下方“閱讀原文”結(jié)交更多有才華的設(shè)計(jì)師！

↓↓↓