jsPlumb開發(fā)入門教程整理

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

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

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