1、jsplumb開發(fā)入門教程整理jsplumb是一個強大的javascript連線庫，它可以將html中的元素用箭頭、曲線、直線等銜接起來，適用于開發(fā)web上的圖表、建模工具等。它同時支持jquery+jquery ui、mootools和yui3這三個javascript框架，非常強大。大家可以在官網(wǎng)的demo中看看它的功能。目前可用的jsplumb中文資料很少，希翼這篇教程可以協(xié)助大家更快的了解jsplumb。出于篇幅考慮，本教程將以jquery為例介紹jsplumb。在用法jsplumb之前，大家需要先了解一下各掃瞄器對jsplumb的兼容性。jsplumb支持ie6以上以及各大掃瞄器，但

2、是仍然有一些bug：在ie9上，因為jquery1.6.x和1.7.x的svg相關(guān)實現(xiàn)有一個bug，會導(dǎo)致鼠標(biāo)停歇大事無法響應(yīng)safari5.1上有一個svg的bug，會導(dǎo)致鼠標(biāo)大事無法通過svg元素的透亮區(qū)域傳遞在firefox11上基于mootools用法svg時會浮現(xiàn)一些問題jsplumb的源碼和demo可以在github上下載，不想下載囫圇工程的可以挺直從這里下載1.4.0版本。在引入jsplumb的同時，還需要引入jquery和jquery ui。需要解釋的是，jsplumb只兼容jquery1.3.x及以上版本，并在jquery ui 1.7.x、1.8.x及1.9.x上測試通過。

3、另外，假如你用法1.7.x、1.8.x的jquery ui，還需要額外引入jquery ui touch punch。jsplumb惟獨等到dom初始化完成之后才干用法，因此我們在以下代碼中調(diào)用jsplumb辦法首先，我們給jsplumb設(shè)一些默認值，然后聲明一個exampledropoptions變量。然后聲明兩種類型的銜接點。需要注重的是銜接點分為動態(tài)銜接點和靜態(tài)銜接點。當(dāng)指定一個數(shù)組作為銜接點時，該銜接點為動態(tài)銜接點，連線時會自動挑選最近的銜接點銜接；當(dāng)指定一個坐標(biāo)或者固定位置（topright、rightmiddle等）作為銜接點時，該銜接點為靜態(tài)銜接點，不管怎么連線都不會移動。詳細可參見官方文檔。html部分僅聲明三個div，注重，jsplumb通過id來識別html元素，因此假如要用法jsplumb連線必需聲明id。到此我們就完成了一個容易的jsplumb連線示例，大家可以在掃瞄器中運行一下看看效果。源碼可以在這里下載。本文中的例子參考了emiel的教程getting started with jsplumb以及官方demo draggableconnections，大家也可以看一看。因為篇幅限制，本文并未對jsplumb的全部特性及功能舉行解釋，大家可以通過官網(wǎng)舉行更深化的學(xué)習(xí)。不過個人