jquery - How to set different colors for source and target Endpoint with jsplumb -
i new jsplumb. need complete sample.
how set different colors source , target endpoint jsplumb?
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <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="../js/jquery.jsplumb-1.3.16-all-min.js"></script> <script type="text/javascript"> jsplumb.bind("ready", function () { var source= jsplumb.addendpoint("source", { overlays: [["label", { label: "source", id: "labelsource"}]], paintstyle: { fillstyle: 'red' }, //endpointstyle: { fillstyle: '#808000' }, endpoint: ["dot", { radius: 15}] }); var secure = jsplumb.addendpoint("target", { overlays: [["label", { label: "target", id: "labeltarget"}]], paintstyle: { fillstyle: 'green' }, endpoint: ["dot", { radius: 15}] }); jsplumb.connect({ source: 'source', target: 'target', paintstyle: { linewidth: 10, strokestyle: '#66ccff' }, sourceendpointstyle: { fillstyle: '#808000' }, targetendpointstyle: { fillstyle: '#800000' }, endpoint: ["dot", { radius: 15}], anchor: "bottomcenter", //connector: [ "bezier", 0 ], connector: "straight", detachable: false, overlays: [ ["label", { fillstyle: "rgba(100,100,100,80)", color: "white", font: "12px sans-serif", //label:"static label", borderstyle: "black", borderwidth: 2 }], ["arrow", { location: 0.5}] ] }) }); </script> </head> <body> <div id="source" style="position: absolute; left: 100px; top: 250px;"> </div> <div id="target" style="position: absolute; left: 600px; top: 250px;"> </div> </body> </html>
the above code not apply proper colors source , target node.
you can use following method set connection color when create connection
jsplumb.bind("jsplumbconnection", function (conn) { var source = conn.source; var target = conn.target; conn.connection.setpaintstyle({ strokestyle: getconnectioncolor(source, target), linewidth: 3 }); });
implement getconnectioncolor(source, target) method color according source , target