<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">就如之前文章里提到的那样,我的毕设是要做一个流程图。</span>
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">首先,我定义了画流程图的块。</span>
<div class="jtk-demo-main">
<!-- demo -->
<div class="jtk-demo-canvas canvas-wide flowchart-demo jtk-surface jtk-surface-nopan" id="canvas">
<div class="window jtk-node terminal" id="nodeStart">Start</div>
<div class="window jtk-node terminal" id="nodeEnd">End</div>
</div>
</div>
然后,定义了三个键question、action、output,每当单击后,会在canvas中添加相应的图形。
以question为例
function dispQuestionPrompt(){ // add question node
var name = prompt("enter the action name");
if (name) {
var canvas = document.getElementById("canvas");
var node = document.createElement("div");
node.setAttribute("class","window jtk-node nodeDiamond");
node.setAttribute("id","question");
node.id += counter;
counter++;
var textNode = document.createElement("p");
textNode.setAttribute("class","questionText");
var text = document.createTextNode(name);
textNode.appendChild(text);
node.appendChild(textNode);
canvas.appendChild(node);
}
}
}
那么,问题来了:如果我想为动态添加的div添加class属性怎么办?
可以监听canvas,如果canvas树有插入新的dom div节点,为其添加class属性。
$(document).ready(function(){
var canvas = $("#canvas");
canvas.bind("DOMNodeInserted",function(e){
$("#canvas div").addClass("jsplumb-connected");
});
});
但是,这个DOMNodeInserted有缺陷,可以将最内层函数体改成alert("hi")试一试。 :)
忽略这个缺陷,也能得到理想的结果。