整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
以下jsPlumb介紹基于jsPlubm1.3.3版本，并且基礎(chǔ)庫是用jQuery1.3.x或以上，與其他版本基礎(chǔ)庫或jsPlumb的比較或后期版本升級，本文檔不做介紹。
Jsplumb是Jquery的一個插件，它能夠讓你用動態(tài)的或靜態(tài)的鏈接來連接html界面上行的元素，并且從1.1.0版本開始，提供用鼠標(biāo)拖動來鏈接。目前該插件支持三個javascript庫，有Jquery、MooToos、Yui3，jsplumb代碼是開源的，并且是麻省理工學(xué)院許可，由google進行代碼托管。
官方示例：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)在以下瀏覽器測試：
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
使用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版本上測試)
MooTools的Drag.Move的1.2.4.4或更高版本
YUI3
YUI3.3.X ,目前jsPlumb只在YUI3.3.0上測試，YUI3其他版本可能也可以正常工作
jsPlumb可以使用SVG，HTML5的畫布元素或VML去呈現(xiàn)需要顯示的對象，現(xiàn)代大部分瀏覽器都支持Canvas 和 SVG,但是IE9以下都不支持這些，默認情況下，jsPlumb都使用canvas去渲染，但如果在使用IE9以下的情況下，jsPlumb將使用vml去渲染，您可以通過下列方式調(diào)整渲染模式：
jsPlumb是將所有鏈接的東西放在一起，所以在jsPlumb中，核心是鏈接對象，jsPlumb本身可以分成四個組成部分
錨(Anchor)：一個位置，放置端點的地方，相對于一個元素的來源，您不需要自己硬編碼來創(chuàng)建它，jsPlumb提供給您各種功能，您只需要按照您的需要創(chuàng)建它就可以了。它沒有可視化的顯示，只是一個邏輯位置，可以使用錨的id來引用它，jsPlumb支持這樣做，并且您可以使用坐標(biāo)來表示[x,y,x方向,y方向]
端點(Endpoint )：鏈接的一端的可視化表示，您可以創(chuàng)建并可以鏈接他們；您可以讓他們支持拖拽，或者您可以直接使用jsPlumb.connect()在創(chuàng)建鏈接時直接創(chuàng)建它們。
連接器(Connector)：鏈接兩個元素的線，頁面的可視化表示，jsPlumb有三種默認類型:Bezier曲線，直線，和流程圖鏈接器，您不用去處理連接器，當(dāng)您需要使用它們時，您只需要定義它們即可。
覆蓋物(Overlay)：一個UI組件，是用來是用來裝飾連接器，例如標(biāo)簽、箭頭等。
錨的概念是指：定義一個鏈接線能夠鏈接的點，jsPlumb有9個默認的錨點位置，您可以使用它們?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]定義了一個“LeftCenter”連接器的曲線，從錨點單向向左的曲線. 同樣，[0.5，0，0，-1]，定義一個“CenterTop”錨連接器所產(chǎn)生的向上的曲線。
這些都是可以在若干地點之一定位的錨點，當(dāng)你每次移動一個元素時，會自動選擇一個最合適的位置，沒有特殊的語法來創(chuàng)建一個DynamicAnchor，你只需要提供一個獨立的錨位置，例如數(shù)組：
默認的動態(tài)錨：
jsPlumb提供一個動態(tài)的錨，定名為“AutoDefault” 默認位置有：TopCenter，RightMiddle，BottomCenter和LeftMiddle
動態(tài)錨和可拖動的連接是可以進行互操作的，當(dāng)你開始拖動連接或釋放它時，jsPlumb會鎖定一個動態(tài)的錨的位置， 您可以在界面上看到鏈接錨點的切換變化。
在我們討論連接器、終點和覆蓋物之前，需要提醒的是：你需要定義一個連接器，端點或覆蓋，您必須使用一個“定義”，而不是直接構(gòu)建一個，這個定義可以是一個字符串，它指定你需要創(chuàng)建的對象。
或者您需要構(gòu)件的對象的屬性名組成的數(shù)組，您可以通過其構(gòu)造函數(shù)來創(chuàng)建，例如
也有三個參數(shù)的方法，可以讓你指定兩套參數(shù)，jsPlumb會自動為你合并，例如
鏈接的線，實際上是界面上的各個元素的鏈接線，jsPlumb有三條連接器實現(xiàn)，一條直線、Bezier曲線和”流程圖”連線，默認的連接線是貝塞爾曲線，您可以有選擇的設(shè)置一個鏈接器，可以通過設(shè)置“connector”來定義一個連接線，或者在添加端點時設(shè)置連接線，如果您沒有為connector設(shè)置一個值，那么他會用他的默認值”Default”
三種鏈接的定義語法類似
貝塞爾曲線：
貝塞爾曲線提供了兩個端點之間的立方體路徑，它支持一個構(gòu)造函數(shù)參數(shù)，
curviness -可選，默認為150，這定義的錨點位于貝塞爾曲線的控制點，以像素為單位的距離，但這并不意味著你的連接器會穿過從你的曲線到這個距離的點，這僅是一個標(biāo)識而已。
直線：直連繪制直線的兩個端點之間。 沒有構(gòu)造函數(shù)的參數(shù)支持，使用參數(shù)endpointStyle定義連接樣式或添加端點時定義連接線樣式
流程圖：這種類型的連接器，繪制一系列垂直或水平段組成的連接 - 經(jīng)典的流程圖?，支持一個單一的構(gòu)造函數(shù)參數(shù)
存根 -這是最小長度，以像素為單位，從端點發(fā)出的初始存根。 此參數(shù)是可選的，默認為30像素
一個端點的UI組件，標(biāo)志著一個錨的位置，是連接器連接的點，jsPlumb有三個端點實現(xiàn)，點、矩形和圖形，你可以指定端點的屬性，在jsPlumb.connect時指定屬性，或者jsPlumb.Addendpiont時指定，或者設(shè)置jsPlumbde target時設(shè)定屬性，語法可參照connector。
三個可用的端點類型，他們的構(gòu)造函數(shù)參數(shù)如下：
點端點(Dot Endpoint)：
此端點在屏幕上畫一個點。 它支持一個構(gòu)造函數(shù)參數(shù)：
半徑 -可選，默認為10個像素。 定義點的半徑
矩形端點(Rectangle Endpoint)：
繪制一個矩形。 支持的構(gòu)造函數(shù)的參數(shù)是：
寬度 -可選;默認為20像素。 定義矩形的寬度。
高度 -可選，默認為20個像素。 定義矩形的高度。
圖片端點(Image Endpoint)：
從一個給定的的URL繪制圖像。 此端點支持一個構(gòu)造函數(shù)的參數(shù)：
SRC -必需的。 指定要使用的圖像的URL。
覆蓋界面上的鏈接元素，如標(biāo)簽或箭頭等，jsPlumb有四個默認值：
Arrow：可配置的箭頭，放在兩個點的連接線上，你可以控制箭頭的長度和寬度，
轉(zhuǎn)折點：是一個折回點，方向點(允許值是1和-1，意味著是點的鏈接方向)
Label：在點的連接器上的可配置的標(biāo)簽
PlainArrow：一個三角形箭頭，沒有折回點
Diamond:顧名思義，鉆石
最后的兩個實際上市Arrow的配置的實例，當(dāng)您調(diào)用jsPlumb.connect或jsPlumb.addEndpoint時，您可以指定一個或多個覆蓋物。
這個鏈接將有一個箭頭標(biāo)簽在連線的一般，并且文字標(biāo)簽在連線的四分之一處，可以注意下id屬性，你可以用它來刪除標(biāo)簽或做其他操作。
這個鏈接將有一個10*30的的箭頭和含有文字foo的標(biāo)簽，位置在連接線的開頭，另外，需要注意每一個覆蓋物的id。
這僅僅是一個特殊的Arrow的實例，內(nèi)部jsPlumb給”foldback”硬編碼為1，意思是一個平面的箭頭尾部邊緣，Arror的所有構(gòu)造函數(shù)適用于PlainArrow.
這也是一個特殊的Arrow實例，其中jsPlumb內(nèi)部給foldback硬編碼值為2，意味著箭頭轉(zhuǎn)變?yōu)镈iamond,Arrow的所有構(gòu)造函數(shù)適用于Diamond.
提供了一個文本的標(biāo)簽來裝飾連接器，可用的構(gòu)造函數(shù)參數(shù)有：
Lable：要顯示的文字，你也可用提供一個函數(shù)放這兒，用來替代文本，他是做為連接的參數(shù)返回，應(yīng)該返回一個string類型的字符串；
cssClass：一個可選的用于lable的樣式類，這是目前首選的”lableStyle”參數(shù)，樣式有：
Location：做為 “Arrow” 標(biāo)簽應(yīng)該顯示的位置,比例從0到1，包括1。
你可用使用setVisible來控制Arrow的顯示或隱藏，或者showOverlay（ID）方法，或者hideOverlay（ID）方法，請注意這里的參數(shù)id，是我們在設(shè)定各個元素時指定的，它可用用來找到那個元素。簡單的實例：
并且，連接器connection也有很方便的方法用來替代上面的方法
如圖：
連接器connection也提供刪除覆蓋物的方法，如圖：
最簡單的方式來設(shè)置你的pluming的顯示外觀等等，是重寫這些元素的默認值，如果你不這么做，你得每次都手動的去提供這些值；每一個connect和addEndpoint方法都有一個關(guān)聯(lián)的默認值，這些默認值存儲在jsPlumb.Defaults里面，他是一個javascript對象，這些參數(shù)的初始值是：
您可用用類似下面的方法來覆蓋默認值
在這個例子中，我們已經(jīng)創(chuàng)建了“element1的”element2的“連接。 請記住，在jsPlumb中連接是靠兩個端點，連接器，和零個或多個覆蓋物重疊組成，但是，這個實例的“連接”沒有提供這些東西，所以jsPlumb在需要這些的地方都用的是默認值，這些默認值是：
--鏈接的兩個端點，jsPlumb默認使用的是Dot點端點，半徑10，填充顏色#456
--鏈接的兩個端點的錨，也是用的是默認值
--設(shè)定兩個端點是否可被用來做為新的鏈接點，默認值為false
--鏈接器的類型和外觀，默認值是貝塞爾曲線，寬度8，顏色#456
所以這個鏈接是：
一個8px的貝塞爾曲線，從一個端點(element1)的bottomCenter移到另一個端點的bottomCenter，而且每一個端點的都是以10px為半徑，#456為顏色的Dot點，
具體樣式…就不介紹了，自己看圖。
一種非常常見的情況，比如你想要同一個設(shè)置，來創(chuàng)造多個鏈接，jsPlumb connect有兩個參數(shù)
如果需要鏈接支持拖放，你首先需要進行一下設(shè)置，每一個需要支持拖放的鏈接，至少需要一個終結(jié)點，這里給一個實例，展示怎樣去創(chuàng)建Endpoint
此端點將作為連接的資源，任何來自他的鏈接都將使用jsPlumb默認的樣式作為自己的樣式
Tip:一些常用的數(shù)據(jù)使用三個參數(shù)的addEndPoint方法
經(jīng)常發(fā)生的一件事：你有一個端點，他的樣式和其他的端點只有一點點區(qū)別，大多數(shù)都是一樣的，這樣的情況下，你可以定義個相同的樣式，有不同的樣式可以單獨立出來，如下圖，注意下anchor設(shè)置，兩個元素是不一致的：
現(xiàn)在你有一個源端點，你需要在其他元素上創(chuàng)建一個終結(jié)點，或者通知jsPlumb你需要使整個元素成為一個拖拽的目標(biāo)，讓我們看看怎樣去創(chuàng)建這樣一個端點：
還有另外一個方法，jsPlumb.makeTarget()，這個方法需要兩個參數(shù)，第一個參數(shù)是指需要設(shè)定的元素，或者元素列表，第二個參數(shù)是指當(dāng)一個鏈接建立時你需要的端點，在這個例子中，我們用我們之前就用過的端點，-the gray Rentangle—但是我們需要告訴jsPlumb,元素” aTargetDiv”將會被作為dorp的端點：
在jsPlumb中方法jsPlumb.addEndpoint 和方法jsPlumb.makeTarget，對象endpointOptions里面的參數(shù)都是一樣可以用的，你可以在端點終結(jié)點設(shè)置很多東西，這個你可以參見api列表說明。下面的示例顯示了指定的箭頭在鏈接拖動到終結(jié)點的連接線的一半的地方
下面這個示例展示的是，這個終結(jié)點，連接到它的連接線是依賴這個終結(jié)點的位置，因為它定義了好幾個錨點，連接線會自動找到該終結(jié)點的動態(tài)錨：
這些拖動選項將通過jsPlumb api庫來提供支持，jsPlumb將會提供你需要的一切，如果你需要一些拖動過程中的生命周期事件 ，你需要提供給jsPlumb一個通知方法，如果觸發(fā)某個事件，它會調(diào)用該方法，比若說你需要在拖動開始時：
Drop選項和Drag方式是一樣的，用法可參見jquery用法
http://docs.jquery.com/UI/Droppable
jsPlumb借用了jquery里面drag/drop的范圍概念，范圍的概念是指那些可拖放的元素只能夠被拖放到那些有范圍的元素里面，在jsPlumb中你可以在創(chuàng)建EndPoint時創(chuàng)建一個范圍”Scope”，下面給出一個例子：
如果你不提供一個”Scope”，jsPlumb將使用一個默認的范圍，在這個方法中，這個值是可用的：
如果你因為某些原因想改變它的值，你可以這樣做：
如果你想，你也可以這樣，提供一個drap和drop的范圍值：
定義端點、覆蓋物(覆蓋物現(xiàn)在更傾向于用cssClass來替代)、連接線的樣式，這些樣式是由paintStyle作為jsPlumb connect、jsPlumb.makeTarget、jsPlumb.addEndPoint方法的參數(shù)來定義的，根據(jù)你調(diào)用的不同方法，參數(shù)名稱會不一樣，具體不同如下面所列：
連接線樣式
jsPlumb.connect:
jsPlumb.addEndpoint:
注意上面的樣式參數(shù)，下面我們對它進行討論
終結(jié)點樣式：
像上面的定義我們可以有下列方法：
在上面的示例中，我們講”e1”拖放到作為目標(biāo)的”e2”中，并且定義了終結(jié)點的樣式。
覆蓋物樣式
最完美的設(shè)置覆蓋物樣式的方式是使用創(chuàng)建overlay時的構(gòu)造函數(shù)來定義
樣式參數(shù)列表
這是設(shè)置paintStyle的完整參數(shù)列表
但是請注意，fillStyle參數(shù)在connector中會被忽略，strokeStyle在EndOptions中會被忽略，此外，如果你使用jsPlumb.connect創(chuàng)建鏈接，并且為指定任何EndOption樣式，EndOptions中的fillStyle樣式會被指定為連接線的strokeStyle。
fillStyle, strokeStyle and outlineColor可以使用任何有效的CSS3語法
fillStyle:定義EndPoint的顏色，例如rgba(100,100,100,50), "blue", "#456", "#993355", rgb(34, 56, 78)
strokeStyle:連接器的顏色
lineWidth:連接線的寬度，是個Int值
outlineWidth：連接器或端點的輪廓寬度，int值
outlineColor：連接器或端點的顏色
dashstyle、The VML spec、stroke-dasharray、stroke-dashoffset、stroke-dashoffset、stroke-linejoin
只適用于VML或SVG或VML和SVG，這里不做介紹
當(dāng)鼠標(biāo)懸浮在這些元素上時 ，連接線和終結(jié)點都支持鼠標(biāo)懸浮樣式。他們的樣式需要被精確的指定，指定的方式和我們在上面討論的方式一致，懸浮樣式也一樣繼承了基本樣式，這是因為當(dāng)鼠標(biāo)移上去的時候，您通常會只希望更改顏色，或者輪廓顏色，所以你只需要指定需要改變的值即可，這樣避免了你需要定義重復(fù)的樣式，鼠標(biāo)懸浮樣式的參數(shù)名只是需要在正常樣式前加入”hover”即可，下面給個例子：
在這個示例中，我們指定兩個鏈接線和終結(jié)點的鼠標(biāo)懸浮樣式，這地方的兩個連接線和終結(jié)點的懸浮樣式是一樣的，我們也可以使用復(fù)數(shù)形式使兩個端點或兩條連接線的懸浮樣式不一樣，如下圖：
上面示例中兩個終結(jié)點的鼠標(biāo)懸浮樣式是不一樣的。通過下面的兩種方式也可以實現(xiàn)， jsPlumb.addEndpoint和jsPlumb.makeTarget ：
（這里我們指定了端點的樣式和所有從這個端點鏈接的線的樣式）
和
（makeTarget也同樣支持paintStyle樣式）
但是我們得注意，makeTarget不支持連接線的參數(shù)，它只支持終結(jié)點。所有的鏈接中的連接線的參數(shù)是當(dāng)你在用鏈接方法時在源端點設(shè)置的。
Canvas 和SVG 都支持漸變，VML不支持，jsPlumb用它自己的語法來定義漸變，來適用于SVG 和Canvas 之間不同的語法。
有兩種類型的漸變可用：
(Linear) 線條漸變：彩色線條都在同一個方向
(radial) 半徑的，光線似的漸變：有彩色圓圈組成，有這個圈到那個圈的樣式。
由于他們的基本樣式不同，jsPlumb僅為連接線提供了Linear(第一種)漸變，但為端點提供了兩種方式。
線條漸變：
要在鏈接中使用漸變，你需要提供一個漸變的對象，例如：
這里我們有個從win2到win3的連接線，寬度15px;顏色是從綠色到紅色的漸變。
注意這地方的漸變對象和stops列表，漸變對象里面的顏色梯度可以是任意數(shù)值，每中顏色梯度包含兩個值[position,color]，position值得范圍必須在0到1之間，數(shù)值類型是decimal，表示該種顏色開始的位置，顏色的有效值和strokeStyle是一樣的。
Stops列表可以包含任意個數(shù)，下面的例子表示顏色從紅-藍-綠-藍-紅
如果你使用VML，jsPlumb將會忽略你的漸變指令，所以最好的做法是，你需要單獨指定strokeStyle ，因為默認情況下，如果不支持gradient時，jsPlumb就會返回使用使用gradient的基本樣式strokeStyle ，如果你沒提供strokeStyle ，則默認都是黑色的， 所以最好還是提供strokeStyle 樣式，例如：
端點漸變
端點的漸變樣式語法和連接線的語法是一樣的，你指定端點的漸變樣式要么放在endPoint的對象設(shè)置里面，要么放在連接線定義時，不同端點的定義數(shù)組里面，并且，該信息適用于您正在創(chuàng)建的需要拖拽的端點定義。
看下面示例：
只有Dot和Rectangle 類型的端點支持，圖片端點時不支持的，當(dāng)然在VML中也不支持。
Dot示例：
顯示一個端點，顏色漸變從最外端開始，端點的漸變需要的數(shù)據(jù)顯然會比線條漸變多，在一個線條的漸變中，我們只需要從一個點移動到下個點即可，但是在端點的漸變中，我們需要從一個圈移動到另一個圈，默認情況下，jsPlumb會使用一個相同半徑的圈。
并且offset和innerRadius也可以使用百分數(shù)來替代。
jsPlumb在它創(chuàng)建的每個組件時都會附加一些類，這些類名都是公開的，并且如果你需要的話你可以將他們重寫，具體如下：
你可以運用這些樣式類來使你的界面達到最佳效果。
jsPlumb提供動畫的方法，它是將你使用的基礎(chǔ)庫中的動畫引擎進行封裝，并且提供一個回調(diào)函數(shù)，以供jsPlumb在每一步進行跟蹤，你可以自己自己定義這個回調(diào)函數(shù)，非常方便：
回調(diào)函數(shù)參數(shù)解釋：
el:元素id,或者元素的對象
properties:動畫的屬性，例如持續(xù)事件等
options:動畫選項，例如回調(diào)函數(shù)等。
jsPlumb提供了一個完全公用的方法，getConections—來找到關(guān)于當(dāng)前管理的鏈接，在用這個方法之前，你需要了解jsPlumb中scope概念，
getConnection方法提供含js對象的方法來篩選，可有如下三個對象：
scope:您要檢索的鏈接所屬范圍(域)
source:返回的鏈接限制為那些有此源id的鏈接
target: 返回的鏈接限制為那些有此目標(biāo)端點id的鏈接
提供的這三個參數(shù)，可以作為對象，也可作為字符串來傳遞
（返回的是在這兩個scope中的連接）
返回值是：
下面列出不同的獲取示例：
jsPlumb支持綁定到不同的事件 ，有連接線、端點、覆蓋物和jsPlumb本身的事件 ，如果需要綁定時間，你需要使用一個方法：jsPlumb.bing(object,event,callback)，但是這除了overlay的事件，因為overlay的事件可以直接在overlay定義時直接綁定overlay的事件監(jiān)聽，
jsPlumbConnection—當(dāng)設(shè)定一個連接時會通知，這個新連接對象將會作為回調(diào)函數(shù)參數(shù)傳遞
jsPlumbConnectionDetached—當(dāng)一個鏈接被取消時通知，這個被取消的鏈接對象會被作為回調(diào)函數(shù)的參數(shù)傳遞
Click—獲取鏈接的點擊事件，回調(diào)函數(shù)將傳遞點擊的鏈接和鼠標(biāo)事件
Dbclick—雙擊，其他同上
Endpointclick—當(dāng)端點點擊事件時通知，端點對象和鼠標(biāo)事件是回調(diào)函數(shù)的參數(shù)
endPointDbClick—雙擊，其他同上
Click—當(dāng)一個鏈接被點擊時觸發(fā)，回調(diào)函數(shù)傳遞的參數(shù)是鼠標(biāo)事件和connection對象
Dbclick—雙擊，其他同上
Mouseenter—當(dāng)鼠標(biāo)進入鏈接的path觸發(fā)，回調(diào)函數(shù)傳遞的也是鼠標(biāo)事件和connection對象
mouseExit—當(dāng)鼠標(biāo)從connection的path離開時觸發(fā)，其他同上
Click-- 端點被點擊時觸發(fā)，回調(diào)函數(shù)傳遞的參數(shù)有鼠標(biāo)事件和端點對象
Dbclick—雙擊事件時觸發(fā)，其他同上
mouseEnter—鼠標(biāo)進入端點時觸發(fā)，回調(diào)函數(shù)傳遞的也是鼠標(biāo)事件和端點對象
mouseExit—當(dāng)鼠標(biāo)從端點中離開時觸發(fā)，回調(diào)函數(shù)傳遞的參數(shù)也是鼠標(biāo)事件和端點對象
Overlay的事件監(jiān)聽注冊有點不同，你將他們作為overlay的構(gòu)造函數(shù)參數(shù)，這是因為你從來不會對overlay有真正的動作，下面的示例看看怎么樣注冊一個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) }
}
}]
]
});
jsPlumb.connect示例、拖拽的connection示例參見文檔http://jsplumb.org/doc/usage.html
1. 分離win5和其他元素的所有鏈接
2. 隱藏win5的所有鏈接
3. 隱藏win5鏈接的所有鏈接和終結(jié)點
4. 顯示所有win5的鏈接
5. 顯示win5的所有鏈接和終點，請注意這個示例中的兩個參數(shù)，如果它決定這個鏈接中的其他端點也是不可見的，jsplumb也不會使這個鏈接顯現(xiàn)。
（jQuery下，其他js庫下面不列出）
目前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
臺ID：WEB_wysj(點擊關(guān)注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄
（微信回復(fù)HTML5，獲取全套源碼）
● ● ●
HTML5標(biāo)準(zhǔn)已經(jīng)塵埃落定，未來的Web將會是由HTML5主導(dǎo)，當(dāng)然作為開發(fā)者對這一喜訊更為動心。本文主要分享了15個無比華麗的HTML5/CSS3動畫應(yīng)用，供大家參考學(xué)習(xí)。
今天我們來分享一款既炫酷又實用的HTML5圖片選擇特效，當(dāng)圖片被選中時，圖片上就會覆蓋一個半透明的層，上面有一個勾，并且在選中的時候圖片出現(xiàn)彈跳的動畫效果。
今天我們要分享一款非常酷的圖片效果，這個效果在很多P圖軟件中經(jīng)常可以看到，就是對一張圖片進行復(fù)古效果的渲染。這款CSS3圖片效果就實現(xiàn)了這個復(fù)古的特效，我們只要將鼠標(biāo)滑過圖片，就可以實現(xiàn)這一圖片復(fù)古效果了。
之前我們分享過一款非常出色的CSS3 Tab菜單HTML5 SVG Tab滑塊菜單，結(jié)合SVG，Tab菜單實現(xiàn)非常靈活。今天我們要再來分享一款基于CSS3的華麗Tab菜單，這款Tab菜單的菜單項是一個個小圖標(biāo)，鼠標(biāo)滑過時，菜單項展示對應(yīng)文字，并出現(xiàn)展開的動畫。
前段時間我們分享過很多牛叉的HTML5動畫，如果你對HTML5感興趣，可以移步至HTML5動畫欣賞學(xué)習(xí)。今天我們要分享一款基于HTML5和CSS3的書本翻頁3D動畫，當(dāng)我們將鼠標(biāo)滑過書本時，書本就會自動一頁頁翻過去，書本的3D效果非常不錯。
今天分享一款很特別的HTML5 3D圖片特效，當(dāng)鼠標(biāo)滑過圖片時，平面的圖片即會呈現(xiàn)3D的效果，和這款HTML5 3D圖片折疊特效類似，也是通過鼠標(biāo)滑過來展現(xiàn)3D效果。另外，這款HTML5 3D骨牌圖片特效還可以設(shè)置圖片描述信息。
今天我們再來介紹一款實用的jQuery插件，是基于jQuery UI的。這款jQuery滑桿插件非常漂亮，可以設(shè)置多種顏色，再加上CSS3上運用，可以讓滑桿的游標(biāo)變得有立體感，滑桿的Tooltip提示框也出現(xiàn)飛入飛出的動畫效果。更多jQuery插件可以移步至jQuery插件欄目。
對于分步驟表單，我們之前也已經(jīng)有過介紹了，像這款HTML5分步驟注冊表單就非常不錯，今天我們要來介紹另外一款分步驟表單，這是一款個人資料填寫表單，我們可以分兩步來填寫個人資料，每一步的切換都有淡入淡出的動畫效果，你也可以回退到上一步繼續(xù)填寫。
利用CSS3制作的登錄表單的確很漂亮，我們在html5tricks網(wǎng)站上也分享過幾款了，比如CSS3密碼強度驗證表單可以顯示密碼的強度，這款純CSS3發(fā)光登錄表單更是絢麗多彩。今天我們要分享一款仿Facebook的登錄表單，無論從外觀還是功能上說，這款登錄表單還是挺接近Facebook登錄表單的。
這是一款線條狀的CSS3進度條，這款進度條有兩個特點：一是隨著進度條的進度更新，都會有數(shù)字百分比實時顯示，讓數(shù)據(jù)更加直觀；二是在不同的進度階段，進度條的顏色會有所變化，這樣能更好的反應(yīng)當(dāng)前的進度狀態(tài)。加上黑色的背景，讓這款CSS3進度條更加鮮亮起來。
剛剛我們發(fā)布過一款CSS3開關(guān)切換滑動按鈕，應(yīng)該說出了有點3D立體的效果外，其他都很普通。現(xiàn)在我們要來分享一款更酷的CSS3開關(guān)切換按鈕，它不僅具有3D的效果，而且可以發(fā)光，當(dāng)開關(guān)處于打開狀態(tài)時，旁邊的小燈就會亮起來，然后燈光投射到開關(guān)上，效果挺逼真的。
利用HTML5制作圖表插件也比較常見，我們也收集過幾款很實用的HTML5圖表插件，它們確實可以幫助我們在網(wǎng)頁上直觀地展示數(shù)據(jù)。今天我們要再來分享一款實用的HTML5線性圖表插件，這款線性圖表可以在不同的數(shù)據(jù)區(qū)域內(nèi)繪制不同的顏色，讓每一個數(shù)據(jù)區(qū)域都非常明顯可見。
之前我們分享過好幾款不錯的HTML5柱狀圖表了，像這款HTML5/CSS3水平柱狀圖表，非常簡單實用的圖表。今天我們要再來分享一款HTML5柱狀圖表，這款圖表插件可以將多張圖表的數(shù)據(jù)合并成一張圖表顯示，在圖表數(shù)據(jù)合并過程中產(chǎn)生融入的動畫，挺不錯的。
之前我們已經(jīng)分享過一款HTML5/CSS3分步提示框Tooltip ，不過這款提示框主要是用來分步操作提示的，不是真正的Tooltip。今天我們要分享一款利用CSS3實現(xiàn)的提示框Tooltip動畫。當(dāng)鼠標(biāo)移到圖標(biāo)按鈕上時，就會在按鈕正上方彈出一個Tooltip提示框，并且伴有淡入淡出的效果。
CSS3菜單我們之前已經(jīng)分享很多了，有3D菜單、下拉菜單、Tab菜單等，具體大家可以移步至CSS3菜單欄目下查找。今天我們要分享的這款HTML5/CSS3滑塊動畫菜單非常酷，鼠標(biāo)滑過菜單項時會有一個漂亮的遮罩移動過來，并且這款動畫菜單還有非常酷的圖標(biāo)，菜單整體效果很大氣。
HTML5 Canvas還有一個比較實用的應(yīng)用，那就是網(wǎng)絡(luò)畫板，這樣我們就可以在網(wǎng)頁上直接進行畫圖操作。今天要分享的這款HTML5 Canvas畫圖工具就可以簡單實現(xiàn)網(wǎng)絡(luò)畫圖的功能，我們可以自定義筆刷的類型、粗細、顏色，也可以定義畫布的大小和背景顏色等。我們也可以對這款HTML5畫圖工具進行擴展，讓它的畫圖功能更加完善。
干貨！免費領(lǐng)取騰訊高級講師網(wǎng)頁設(shè)計教程
點我領(lǐng)取
點擊下方“閱讀原文”結(jié)交更多有才華的設(shè)計師！
↓↓↓
用說， Flash的效果大家都清楚。實際上，HTML5和JavaScript擁有很多新屬性，可以用它們來替代Flash。W3Cschool精選16個超牛逼的HTML5和JavaScript特效，看了這些特效，未來的Web發(fā)展前途無量。
1.特效：FlowerPower
創(chuàng)作者使用花朵作為畫刷，以貝茲曲線方式繪圖。
2.特效：Breathing Galaxies
動態(tài)變換直徑及顏色，可通過鼠標(biāo)或鍵盤產(chǎn)生新形狀，這個效果不錯!
3.特效：Noise Field
移動鼠標(biāo)可改變粒子運動，點擊可隨機生成不同粒子效果。
4.特效：HTML5 Canvas粒子效果文字動畫特效
W3Cschool利用HTML5，制造出了粒子效果文字動畫特效。只要你輸入框中輸入想要展示的文字，回車后即可在canvas上繪制出粒子效果的文字動畫，相當(dāng)酷的動畫效果。
5.特效：Swirling Tentacles
三維脈沖效果，沿著脈沖線有運動的顏色漸變模塊。
6.特效：Keylight
雙擊生成兩個以后的鍵即可發(fā)出聲音，移動鍵的位置可產(chǎn)生不同的聲音效果。W3Cschool上面有很多這樣的教程，有興趣可以去看一下！
7.特效：Rotating Spiral
旋轉(zhuǎn)的螺旋效果，單擊可以控制開始和停止旋轉(zhuǎn)，是不是覺得高大上？
8.Blob
拖動水滴有重力效果，雙擊可以分離，小水滴碰到大水滴會合并。
9.Trail
彩色顆粒跟隨鼠標(biāo)運動效果，帶尾巴淡出效果。
10.Graph Layout
一種交互的力向圖布局效果，刷新三觀。
11.Typographic Effects
使用HTML5 Canvas實現(xiàn)的文本特性，效果超過Flash。
12.Crazy Tentacles
移動鼠標(biāo)可以進行涂鴉，點擊鼠標(biāo)可以清除畫布，看著確實瘋狂。
13.Nebula
吸引眼球的粒子系統(tǒng)，目的是測試WebGL性能，如果滑動鼠標(biāo)，可以產(chǎn)生絢麗效果。
14.WebGL Globe
WebGL Globe 是一個開放的地理數(shù)據(jù)可視化平臺，我們鼓勵你復(fù)制代碼，添加自己的數(shù)據(jù)，創(chuàng)建自己的應(yīng)用。
15.Particle Playground
用鼠標(biāo)和粒子進行交互，能發(fā)現(xiàn)不一樣的精彩。
16.Surface
使用WebGL實現(xiàn)的水面特效實驗，可放入一張照片，使用鼠標(biāo)觸動水面會有奇特效果。
上面的HTML5和JavaScript特效，簡直趕超F(xiàn)lash。W3Cschool上面有很多用戶留言稱HTML5和JavaScriptit將替代Flash，不過對于這種說法，也不知道怎么去評判。畢竟這些用戶說的也是很有道理，你認為JavaScriptit會替代Flash嗎?很想知道你的答案!
公眾號：w3c技術(shù)教程
提供專業(yè)的web技術(shù)教程、手冊、工具。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
