就如之前文章中提到的，我的畢設是要做一個線上的流程圖編輯系統。

首先，我定義三個<li>，單擊後為canvas新增相應的形狀。

<div class="sidebar node-palette" > 
		<div id="sidebarMenu">
			<ul>
				<li title="Click to add new" class="jtk-surface-droppable-node jsplumb-draggable" jtk-node-type="question">
					<i class="icon-tablet"></i>
					Question
				</li>
				<li title="Click to add new" class="jtk-surface-droppable-node jsplumb-draggable" jtk-node-type="action">
					<i class="icon-eye-open"></i>
					Action 
				</li>
				<li title="Click to add new" class="jtk-surface-droppable-node jsplumb-draggable" jtk-node-type="output">
					<i class="icon-eye-open"></i>	
					Output  
				</li>
			</ul>
		</div>
	</div>
 

/*-------------------我是註釋，我是註釋，程式碼粘上去灰底黑字好醜好醜，嫌棄臉( ▼-▼ )---------------------*/

以question為例，定義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.setAttribute("title","Down to false, Right to true");
		node.id += countQuestion;
		countQuestion++;
		var textNode = document.createElement("p");
		textNode.setAttribute("class","questionText");
		var text = document.createTextNode(name);
		textNode.appendChild(text);
		node.appendChild(textNode);
		canvas.appendChild(node);
		return(node.id);

	}
}
 

方法之一就是監聽”canvas“，也就是新增的div所在的parentnode。

$(document).ready(function(){
	var canvas = $("#canvas");
	canvas.bind("DOMNodeInserted",function(e){
		$("#canvas div").addClass("jsplumb-connected");
	});
}); 

但是，這個方法有缺陷，就是每當改動一次 canvas，就會為canvas的所有div節點設定一次屬性。有心的小夥伴可以將函式體改為alert（”biu~biu~biu~“）試試。

如果不影響效果，此缺陷可以忽略。

當然，我也會再找其它改進方法，期待我以後的部落格吧~~~