標籤:demo 還需 asc target 綁定 absolute 簡單的 .net 調用
jsPlumb是一個強大的JavaScript連線庫,它可以將html中的元素用箭頭、曲線、直線等串連起來,適用於開發Web上的圖表、建模工具等。它同時支援jQuery+jQuery UI、MooTools和YUI3這三個JavaScript架構,十分強大。大家可以在官網的Demo中看看它的功能。目前可用的jsPlumb中文資料很少,希望這篇教程可以協助大家更快的瞭解jsPlumb。出於篇幅考慮,本教程將以jQuery為例介紹jsPlumb。
瀏覽器安全色性
在使用jsPlumb之前,大家需要先瞭解一下各瀏覽器對jsPlumb的相容性。jsPlumb支援IE6以上以及各大瀏覽器,但是仍然有一些bug:
- 在IE9上,由於jQuery1.6.x和1.7.x的SVG相關實現有一個bug,會導致滑鼠停留事件無法響應
- Safari5.1上有一個SVG的bug,會導致滑鼠事件無法通過SVG元素的透明地區傳遞
- 在Firefox11上基於MooTools使用SVG時會出現一些問題
下載和引入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上測試通過。另外,如果你使用1.7.x、1.8.x的jQuery UI,還需要額外引入jQuery UI Touch Punch。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script><script type="text/javascript" src="PATH_TO/jquery.jsPlumb-1.4.0-all-min.js "></script>
初始化jsPlumb只有等到DOM初始化完成之後才能使用,因此我們在以下代碼中調用jsPlumb方法
jsPlumb.ready(function() {... // some code...});
首先,我們給jsPlumb設一些預設值,然後聲明一個exampleDropOptions變數。
jsPlumb.importDefaults({ DragOptions : { cursor: ‘pointer‘},//拖動時滑鼠停留在該元素上顯示指標,通過css控制 PaintStyle : { strokeStyle:‘#666‘ },//元素的預設顏色 EndpointStyle : { width:20, height:16, strokeStyle:‘#666‘ },//連接點的預設顏色 Endpoint : "Rectangle",//連接點的預設圖案 Anchors : ["TopCenter"]//連接點的預設位置});var exampleDropOptions = { hoverClass:"dropHover",//釋放時指定滑鼠停留在該元素上使用的css class activeClass:"dragActive"//可拖動到的元素使用的css class};
添加jsPlumb連接點然後聲明兩種類型的連接點。
var color1 = "#316b31";var exampleEndpoint1 = {endpoint:["Dot", { radius:11 }],//設定連接點的形狀為圓形paintStyle:{ fillStyle:color1 },//設定連接點的顏色isSource:true,//是否可以拖動(作為連線起點)scope:"green dot",//連接點的標識符,只有標識符相同的連接點才能串連connectorStyle:{ strokeStyle:color1, lineWidth:6 },//連線顏色、粗細connector: ["Bezier", { curviness:63 } ],//設定連線為貝茲路徑maxConnections:1,//設定連接點最多可以串連幾條線isTarget:true,//是否可以放置(作為連線終點)dropOptions : exampleDropOptions//設定放置相關的css};var color2 = "rgba(229,219,61,0.5)";var exampleEndpoint2 = {endpoint:"Rectangle",//設定連接點的形狀為矩形anchor:"BottomLeft",//設定連接點的位置,左下角paintStyle:{ fillStyle:color2, opacity:0.5 },//設定連接點的顏色、透明度isSource:true,//同上scope:‘yellow dot‘,//同上connectorStyle:{ strokeStyle:color2, lineWidth:4},//同上connector : "Straight",//設定連線為直線isTarget:true,//同上maxConnections:3,//同上dropOptions : exampleDropOptions,//同上beforeDetach:function(conn) {//綁定一個函數,在連線前彈出確認框return confirm("Detach connection?");},onMaxConnections:function(info) {//綁定一個函數,當到達最大串連個數時彈出提示框alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id);}};
將連接點綁定到html元素上
var anchors = [[1, 0.2, 1, 0], [0.8, 1, 0, 1], [0, 0.8, -1, 0], [0.2, 0, 0, -1] ],maxConnectionsCallback = function(info) {alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id);};var e1 = jsPlumb.addEndpoint("state2", { anchor:"LeftMiddle" }, exampleEndpoint1);//將exampleEndpoint1類型的點綁定到id為state2的元素上e1.bind("maxConnections", maxConnectionsCallback);//也可以在加到元素上之後綁定函數jsPlumb.addEndpoint("state1", exampleEndpoint1);//將exampleEndpoint1類型的點綁定到id為state1的元素上jsPlumb.addEndpoint("state3", exampleEndpoint2);//將exampleEndpoint2類型的點綁定到id為state3的元素上jsPlumb.addEndpoint("state1", {anchor:anchors}, exampleEndpoint2);//將exampleEndpoint2類型的點綁定到id為state1的元素上,指定活動連接點
需要注意的是連接點分為動態連接點和靜態連接點。當指定一個數組作為連接點時,該連接點為動態連接點,連線時會自動選擇最近的連接點串連;當指定一個座標或者固定位置(TopRight、RightMiddle等)作為連接點時,該連接點為靜態連接點,不管怎麼連線都不會移動。具體可參見 官方文檔。Html和CSS代碼
<body><div id="state1" class="item"></div><div id="state2" class="item"></div><div id="state3" class="item"></div></body>
html部分僅聲明三個div,注意,jsPlumb通過id來識別html元素,因此如果要使用jsPlumb連線必須聲明id。
<style type="text/css">.dragActive { border:2px dotted orange; }//當拖動一個連接點時,可串連的連接點會自動使用該css .dropHover { border:1px dotted red; }//當拖動一個連接點到可串連的點時,該點會自動使用該css .item { border: 1px solid black; background-color: #ddddff; width: 100px; height: 100px; position: absolute; } #state1 { left: 100px; top: 100px; } #state2 { left: 250px; top: 250px; } #state3 { left: 100px; top: 250px; }</style>
最終效果到此我們就完成了一個簡單的jsPlumb連線樣本,大家可以在瀏覽器中運行一下看看效果。源碼可以在 這裡下載。 進一步學習本文中的例子參考了Emiel的教程 Getting started with jsPlumb以及官方Demo DraggableConnections,大家也可以看一看。由於篇幅限制,本文並未對jsPlumb的所有特性及功能進行說明,大家可以通過官網進行更深入的學習。不過個人認為官方文檔比較難讀,建議大家可以結合官網的Demo學習,Demo源碼可以在GitHub上下載到。Demo: http://jsplumbtoolkit.com/jquery/demo.html官方文檔: http://jsplumbtoolkit.com/doc/homeAPI: http://jsplumbtoolkit.com/apidocs/files/jsPlumb-1.4.1-apidoc.html 第一次發教程,如果對大家有用的話,還希望能留言支援一下。有任何問題也歡迎大家一塊交流探討。轉載請註明出處,謝謝!
jsPlumb開發入門教程(實現html5拖拽連線)