?? index.html
字號:
<html>
<head>
<title>節點創建</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type=text/css>
.text_input { background-color: #EEEEEE; }
</style>
</head>
<body>
<form onsubmit="return false">
<button onclick="createNode(0)">增加同級節點</button>
<button onclick="createNode(1)">增加子節點</button>
<button onclick="deleteNode()">刪除</button>
<button onclick="moveUp()">上移</button>
<button onclick="moveDown()">下移</button>
<button onclick="moveFront()">前移</button>
<button onclick="moveBack()">后移</button><br><br>
<span id=nodeNote class=node_note> </span><br><br>
<div id=dynamicNode>
<nobr>Root</nobr>
<div style='margin-left:17px;padding:1px;'><nobr onclick='autoSelect(this)'><img
onclick="nodeTree(this)" src='images/end.gif'><input type=radio style='display:none;'
checked name=nodeItem onpropertychange='selectNode(this)'><input type=hidden
value=1><input onfocus='autoSelect(this.parentNode)'></nobr></div>
</div>
</form>
<script language=javascript>
var icons=new Array(); //使用到的圖標
icons["dot"]="images/end.gif"; //沒有下級節點的圖標
icons["plus"]="images/plus.gif"; //有下級節點且當前狀態為展開的圖標
icons["sub"]="images/min.gif"; //有下級節點且當前狀態為收縮的圖標
var activeNode=document.getElementById("dynamicNode").getElementsByTagName("DIV")[0];
activeNode.getElementsByTagName("INPUT")[0].checked=true;
function createNode(bChild) //創建節點。bChild為0時，創建同級節點；bChild為1時，創建子節點。
{
var nodeGrade;
if(activeNode.id=="dynamicNode")
nodeGrade=1;
else
if(bChild)
nodeGrade=parseInt(activeNode.getElementsByTagName("INPUT")[1].value)+1
else
nodeGrade=activeNode.getElementsByTagName("INPUT")[1].value
if(bChild&&activeNode.id!="dynamicNode")
if(activeNode.getElementsByTagName("IMG")[0].getAttribute("src",2)==icons["plus"])
nodeTree(activeNode.getElementsByTagName("INPUT")[0]);
var theElement=document.createElement("<DIV style='margin-left:17px;padding:1px;'>");
theElement.innerHTML="<nobr onclick='autoSelect(this)'>"+
"<img src='"+icons["dot"]+"' onclick='nodeTree(this)'>"+
"<input type=radio style='display:none;' name=nodeItem onpropertychange='selectNode(this)'>"+
"<input type=hidden value='"+nodeGrade+"'>"+
"<input onfocus='autoSelect(this.parentNode)'>"+
"</nobr>";
if(bChild||activeNode.id=="dynamicNode")
{
activeNode.insertBefore(theElement);
if(activeNode.id!="dynamicNode")
activeNode.getElementsByTagName("IMG")[0].src=icons["sub"];
}
else
activeNode.parentNode.insertBefore(theElement,activeNode.nextSibling);
theElement.getElementsByTagName("INPUT")[0].checked=true;
}
function deleteNode() //刪除節點，包括該節點下的所有子節點。
{
if(!confirm("你確認要刪除該節點嗎？\n如果該節點下有子節點，那么連同子節點也會一并刪除。\n繼續請點“確定”，否則點“取消”。"))
{
activeNode.getElementsByTagName("INPUT")[2].focus();
return;
}
if(activeNode.id=="dynamicNode")
document.getElementById("nodeNote").innerHTML="沒有可以刪除的節點！";
else
{
theNode=activeNode
if(activeNode.nextSibling)
activeNode=activeNode.nextSibling;
else if(activeNode.previousSibling.tagName=="DIV")
activeNode=activeNode.previousSibling;
else
{
activeNode=activeNode.parentNode;
activeNode.getElementsByTagName("IMG")[0].src=icons["dot"];
}
theNode.removeNode(true);
if(activeNode.id!="dynamicNode")
activeNode.getElementsByTagName("INPUT")[0].checked=true;
}
}
function moveUp() //上移
{
if(activeNode.id=="dynamicNode")
{
document.getElementById("nodeNote").innerHTML="沒有可以上移的節點！";
return;
}
if(activeNode.previousSibling.tagName!="DIV")
{
document.getElementById("nodeNote").innerHTML="該節點已位于同級節點的最上面！";
activeNode.getElementsByTagName("INPUT")[2].focus();
return;
}
theElement=activeNode.cloneNode(true);
activeNode.parentNode.insertBefore(theElement,activeNode.previousSibling);
activeNode.removeNode(true);
activeNode=theElement;
activeNode.getElementsByTagName("INPUT")[2].focus();
}
function moveDown() //下移
{
if(activeNode.id=="dynamicNode")
{
document.getElementById("nodeNote").innerHTML="沒有可以下移的節點！";
return;
}
if(!activeNode.nextSibling)
{
document.getElementById("nodeNote").innerHTML="該節點已位于同級節點的最下面！";
activeNode.getElementsByTagName("INPUT")[2].focus();
return;
}
theElement=activeNode.cloneNode(true);
activeNode.parentNode.insertBefore(theElement,activeNode.nextSibling.nextSibling);
activeNode.removeNode(true);
activeNode=theElement;
activeNode.getElementsByTagName("INPUT")[2].focus();
}
function moveFront() //前移
{
if(activeNode.id=="dynamicNode")
{
document.getElementById("nodeNote").innerHTML="沒有可以前移的節點！";
return;
}
if(activeNode.getElementsByTagName("INPUT")[1].value=="1")
{
document.getElementById("nodeNote").innerHTML="該節點已處于最頂級！";
activeNode.getElementsByTagName("INPUT")[2].focus();
return;
}
if(activeNode.parentNode.childNodes.length==2)
activeNode.parentNode.getElementsByTagName("IMG")[0].src=icons["dot"];
var inputs=activeNode.getElementsByTagName("INPUT");
for(var i=0; i<inputs.length; i++)
if(inputs[i].type=="hidden")
inputs[i].value=parseInt(inputs[i].value)-1;
theElement=activeNode.cloneNode(true);
activeNode.parentNode.parentNode.insertBefore(theElement,activeNode.parentNode);
activeNode.removeNode(true);
activeNode=theElement;
activeNode.getElementsByTagName("INPUT")[2].focus();
}
function moveBack() //后移
{
if(activeNode.id=="dynamicNode")
{
document.getElementById("nodeNote").innerHTML="沒有可以后移的節點！";
return;
}
if(activeNode.previousSibling.tagName!="DIV")
{
document.getElementById("nodeNote").innerHTML="位于同級節點最上面的不可以向后移動！";
activeNode.getElementsByTagName("INPUT")[2].focus();
return;
}
activeNode.previousSibling.getElementsByTagName("IMG")[0].src=icons["sub"];
var inputs=activeNode.getElementsByTagName("INPUT");
for(var i=0; i<inputs.length; i++)
if(inputs[i].type=="hidden")
inputs[i].value=parseInt(inputs[i].value)+1;
theElement=activeNode.cloneNode(true);
activeNode.previousSibling.insertBefore(theElement);
activeNode.removeNode(true);
activeNode=theElement;
activeNode.getElementsByTagName("INPUT")[2].focus();
}
function selectNode(obj) //選擇節點輸入框時發生的動作
{
if(obj.checked)
{
obj.parentNode.getElementsByTagName("INPUT")[2].className='text_input';
obj.parentNode.getElementsByTagName("INPUT")[2].focus();
activeNode=obj.parentNode.parentNode;
}
else
obj.parentNode.getElementsByTagName("INPUT")[2].className='active_node';
}
function autoSelect(obj) //選擇節點輸入框
{
obj.getElementsByTagName("INPUT")[0].checked=true;
}
function nodeTree(obj) //操作節點樹菜單
{
var childNodes=obj.parentNode.parentNode.childNodes;
if(childNodes.length>1)
childNodes[0].getElementsByTagName("IMG")[0].src=(childNodes[1].style.display?icons["sub"]:icons["plus"]);
for(var i=1; i<childNodes.length; i++)
childNodes[i].style.display=(childNodes[i].style.display?"":"none");
}
</script>
</body>
</html>?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -