03.HTML 4.X, HTML5, XML.../HTML/Css/Script
XML & JAVASCRIPT로 트리 메뉴(tree menu) 만들기
1010
2008. 10. 24. 16:56
반응형
2006/12/19 02:37
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html>
<head>
<title> javascript와 xml을 이용한 트리만들기 </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script language="javascript">
<!--
var XMLConst =
{
ELEMENT_NODE :1,
ATTRIBUTE_NODE :2,
TEXT_NODE :3,
CDATA_SECTION_NODE :4,
ENTITY_REFERENCE_NODE :5,
ENTITY_NODE :6,
PROCESSING_INSTRUCTION_NODE :7,
COMMENT_NODE :8,
DOCUMENT_NODE :9,
DOCUMENT_TYPE_NODE :10,
DOCUMENT_FRAGMENT_NODE :11,
NOTATION_NODE :12
}
var favoriteGen =
{
xmlDoc : null,
Tree : null,
importXML : function()
{
if (document.implementation && document.implementation.createDocument)
{
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.onload = favoriteGen.generateXML;
}
else if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.onreadystatechange = function () {
if (xmlDoc.readyState == 4) favoriteGen.generateXML()
};
}
else
{
alert('브라우저가 스크립트를 지원하지 않습니다.');
}
xmlDoc.load("tree.xml");
},
generateXML : function()
{
if(xmlDoc != null)
{
if(xmlDoc.hasChildNodes())
{
var xChildNodes = "";
// 이크.. 참.. 별게 다 틀리네.
if(document.all)
xChildNodes = xmlDoc.childNodes[1].childNodes;
else
xChildNodes = xmlDoc.childNodes[0].childNodes;
for(var i=0 ; i < xChildNodes.length ; i++)
{
var node = xChildNodes[i];
if(node.nodeType == XMLConst.ELEMENT_NODE)
{
var title = getAttribute(node,"title");
if(node.nodeName == "folder")
{
// recursive
var folderNode = getFolder("true",title);
favoriteGen.Tree.appendChild(folderNode);
favoriteGen.generateXML_R(node,folderNode);
}
else
{
var url = getAttribute(node,"url");
var docNode = getDoc(title,url);
favoriteGen.Tree.appendChild(docNode);
}
}
}
}
}
},
generateXML_R : function(pNode,pAppendNode)
{
if(pNode.hasChildNodes())
{
var xChildNodes = pNode.childNodes;
for(var i=0 ; i < xChildNodes.length ; i++)
{
var node = xChildNodes[i];
if(node.nodeType == XMLConst.ELEMENT_NODE)
{
var title = getAttribute(node,"title");
if(node.nodeName == "folder")
{
// recursive
var folderNode = getFolder("true",title);
pAppendNode.appendChild(folderNode);
favoriteGen.generateXML_R(node,folderNode);
}
else
{
var url = getAttribute(node,"url");
var docNode = getDoc(title,url);
pAppendNode.appendChild(docNode);
}
}
}
}
}
};
function getFolder(pIsOpen,pText)
{
var div = document.createElement("div");
var isOpenAtt = document.createAttribute("isOpen");
isOpenAtt.value = "true";
var classNameAtt = document.createAttribute("class");
classNameAtt.value = "folder_node_visible";
div.setAttributeNode(isOpenAtt);
div.setAttributeNode(classNameAtt);
/* IE 이상하네... attribute 등록으로 onClick event가 안먹네 */
var spanHTML = "<span class=\"folder_open\" onClick=\"setOpen(this);\">[폴더]" + pText + "</span>";
div.innerHTML = spanHTML;
return div;
}
function getDoc(pText,pUrl)
{
var div = document.createElement("div");
var classNameAtt = document.createAttribute("class");
classNameAtt.value = "doc_node_visible";
div.setAttributeNode(classNameAtt);
div.innerHTML = "[문서]<a href=\"" + pUrl + "\">" + pText + "</a>";
return div;
}
function setOpen(pObj)
{
var folderNode = pObj.parentNode;
var isOpen = getAttribute(folderNode,"isOpen");
if(folderNode.hasChildNodes())
{
var xChildNodes = folderNode.childNodes;
for(var i=0 ; i < xChildNodes.length ; i++)
{
var node = xChildNodes[i];
if(node.nodeType == XMLConst.ELEMENT_NODE)
{
if(node.nodeName == "DIV")
{
var className = getAttribute(node,"class");
if(isOpen == "true")
{
if(className.substr(0,3) == "doc")
setAttribute(node,"class","doc_node_hidden");
else
setAttribute(node,"class","folder_node_hidden");
}
else
{
if(className.substr(0,3) == "doc")
setAttribute(node,"class","doc_node_visible");
else
setAttribute(node,"class","folder_node_visible");
}
}
}
}
}
setAttribute(pObj,"class",(isOpen=="true" ? "folder_closed" : "folder_open"));
setAttribute(folderNode,"isOpen",(isOpen=="true" ? "false" : "true"));
}
function getAttribute(pNode,pAttributeName)
{
var attributes = pNode.attributes;
var attNode = attributes.getNamedItem(pAttributeName);
return attNode != null ? attNode.nodeValue: null;
}
function setAttribute(pNode,pAttributeName,pValue)
{
var attributes = pNode.attributes;
var attNode = attributes.getNamedItem(pAttributeName);
if(attNode != null)
attNode.value = pValue;
}
//-->
</script>
<style type="text/css" media="all">
.folder_node_visible
{
margin-top:3px;
margin-left:20px;
display:block;
font-size:12px;
}
.doc_node_visible
{
margin-top:3px;
margin-left:20px;
padding:2px 2px 2px 20px;
/*background:url("/image/doc.gif") no-repeat;*/
cursor:pointer;
display:block;
font-size:12px;
}
.folder_node_hidden
{
margin-left:20px;
display:none;
font-size:12px;
}
.doc_node_hidden
{
margin-left:20px;
padding:2px 2px 2px 20px;
/*background:url("/image/doc.gif") no-repeat;*/
cursor:pointer;
display:none;
font-size:12px;
}
.folder_closed
{
padding:2px 2px 2px 20px;
/*background:url("/image/closed.gif") no-repeat;*/
cursor:pointer;
display:block;
font-size:12px;
}
.folder_open
{
padding:2px 2px 2px 20px;
/*background:url("/image/open.gif") no-repeat;*/
cursor:pointer;
display:block;
font-size:12px;
}
</style>
</HEAD>
<BODY>
<div id="treeView" name="treeView"></div>
<script language="javascript">
favoriteGen.Tree = document.getElementById("treeView");
favoriteGen.importXML();
</script>
</BODY>
</HTML>
<html>
<head>
<title> javascript와 xml을 이용한 트리만들기 </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script language="javascript">
<!--
var XMLConst =
{
ELEMENT_NODE :1,
ATTRIBUTE_NODE :2,
TEXT_NODE :3,
CDATA_SECTION_NODE :4,
ENTITY_REFERENCE_NODE :5,
ENTITY_NODE :6,
PROCESSING_INSTRUCTION_NODE :7,
COMMENT_NODE :8,
DOCUMENT_NODE :9,
DOCUMENT_TYPE_NODE :10,
DOCUMENT_FRAGMENT_NODE :11,
NOTATION_NODE :12
}
var favoriteGen =
{
xmlDoc : null,
Tree : null,
importXML : function()
{
if (document.implementation && document.implementation.createDocument)
{
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.onload = favoriteGen.generateXML;
}
else if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.onreadystatechange = function () {
if (xmlDoc.readyState == 4) favoriteGen.generateXML()
};
}
else
{
alert('브라우저가 스크립트를 지원하지 않습니다.');
}
xmlDoc.load("tree.xml");
},
generateXML : function()
{
if(xmlDoc != null)
{
if(xmlDoc.hasChildNodes())
{
var xChildNodes = "";
// 이크.. 참.. 별게 다 틀리네.
if(document.all)
xChildNodes = xmlDoc.childNodes[1].childNodes;
else
xChildNodes = xmlDoc.childNodes[0].childNodes;
for(var i=0 ; i < xChildNodes.length ; i++)
{
var node = xChildNodes[i];
if(node.nodeType == XMLConst.ELEMENT_NODE)
{
var title = getAttribute(node,"title");
if(node.nodeName == "folder")
{
// recursive
var folderNode = getFolder("true",title);
favoriteGen.Tree.appendChild(folderNode);
favoriteGen.generateXML_R(node,folderNode);
}
else
{
var url = getAttribute(node,"url");
var docNode = getDoc(title,url);
favoriteGen.Tree.appendChild(docNode);
}
}
}
}
}
},
generateXML_R : function(pNode,pAppendNode)
{
if(pNode.hasChildNodes())
{
var xChildNodes = pNode.childNodes;
for(var i=0 ; i < xChildNodes.length ; i++)
{
var node = xChildNodes[i];
if(node.nodeType == XMLConst.ELEMENT_NODE)
{
var title = getAttribute(node,"title");
if(node.nodeName == "folder")
{
// recursive
var folderNode = getFolder("true",title);
pAppendNode.appendChild(folderNode);
favoriteGen.generateXML_R(node,folderNode);
}
else
{
var url = getAttribute(node,"url");
var docNode = getDoc(title,url);
pAppendNode.appendChild(docNode);
}
}
}
}
}
};
function getFolder(pIsOpen,pText)
{
var div = document.createElement("div");
var isOpenAtt = document.createAttribute("isOpen");
isOpenAtt.value = "true";
var classNameAtt = document.createAttribute("class");
classNameAtt.value = "folder_node_visible";
div.setAttributeNode(isOpenAtt);
div.setAttributeNode(classNameAtt);
/* IE 이상하네... attribute 등록으로 onClick event가 안먹네 */
var spanHTML = "<span class=\"folder_open\" onClick=\"setOpen(this);\">[폴더]" + pText + "</span>";
div.innerHTML = spanHTML;
return div;
}
function getDoc(pText,pUrl)
{
var div = document.createElement("div");
var classNameAtt = document.createAttribute("class");
classNameAtt.value = "doc_node_visible";
div.setAttributeNode(classNameAtt);
div.innerHTML = "[문서]<a href=\"" + pUrl + "\">" + pText + "</a>";
return div;
}
function setOpen(pObj)
{
var folderNode = pObj.parentNode;
var isOpen = getAttribute(folderNode,"isOpen");
if(folderNode.hasChildNodes())
{
var xChildNodes = folderNode.childNodes;
for(var i=0 ; i < xChildNodes.length ; i++)
{
var node = xChildNodes[i];
if(node.nodeType == XMLConst.ELEMENT_NODE)
{
if(node.nodeName == "DIV")
{
var className = getAttribute(node,"class");
if(isOpen == "true")
{
if(className.substr(0,3) == "doc")
setAttribute(node,"class","doc_node_hidden");
else
setAttribute(node,"class","folder_node_hidden");
}
else
{
if(className.substr(0,3) == "doc")
setAttribute(node,"class","doc_node_visible");
else
setAttribute(node,"class","folder_node_visible");
}
}
}
}
}
setAttribute(pObj,"class",(isOpen=="true" ? "folder_closed" : "folder_open"));
setAttribute(folderNode,"isOpen",(isOpen=="true" ? "false" : "true"));
}
function getAttribute(pNode,pAttributeName)
{
var attributes = pNode.attributes;
var attNode = attributes.getNamedItem(pAttributeName);
return attNode != null ? attNode.nodeValue: null;
}
function setAttribute(pNode,pAttributeName,pValue)
{
var attributes = pNode.attributes;
var attNode = attributes.getNamedItem(pAttributeName);
if(attNode != null)
attNode.value = pValue;
}
//-->
</script>
<style type="text/css" media="all">
.folder_node_visible
{
margin-top:3px;
margin-left:20px;
display:block;
font-size:12px;
}
.doc_node_visible
{
margin-top:3px;
margin-left:20px;
padding:2px 2px 2px 20px;
/*background:url("/image/doc.gif") no-repeat;*/
cursor:pointer;
display:block;
font-size:12px;
}
.folder_node_hidden
{
margin-left:20px;
display:none;
font-size:12px;
}
.doc_node_hidden
{
margin-left:20px;
padding:2px 2px 2px 20px;
/*background:url("/image/doc.gif") no-repeat;*/
cursor:pointer;
display:none;
font-size:12px;
}
.folder_closed
{
padding:2px 2px 2px 20px;
/*background:url("/image/closed.gif") no-repeat;*/
cursor:pointer;
display:block;
font-size:12px;
}
.folder_open
{
padding:2px 2px 2px 20px;
/*background:url("/image/open.gif") no-repeat;*/
cursor:pointer;
display:block;
font-size:12px;
}
</style>
</HEAD>
<BODY>
<div id="treeView" name="treeView"></div>
<script language="javascript">
favoriteGen.Tree = document.getElementById("treeView");
favoriteGen.importXML();
</script>
</BODY>
</HTML>
tree.xml
<?xml version="1.0" encoding="utf-8" ?>
<tree>
<folder title="포탈">
<doc url="http://www.daum.net" title="다음"/>
<doc url="http://www.naver.com" title="네이버"/>
<doc url="http://yahoo.co.kr" title="야후"/>
<doc url="http://empas.com" title="엠파스"/>
<folder title="검색">
<doc url="http://www.google.co.kr" title="구글"/>
</folder>
</folder>
<doc url="http://mar.gar.in" title="마가린"/>
<doc url="http://blog.mar.gar.in" title="마가린 블로그"/>
<doc url="http://sodumarvin.tistory.com" title="소두마빈 블로그"/>
</tree>
<tree>
<folder title="포탈">
<doc url="http://www.daum.net" title="다음"/>
<doc url="http://www.naver.com" title="네이버"/>
<doc url="http://yahoo.co.kr" title="야후"/>
<doc url="http://empas.com" title="엠파스"/>
<folder title="검색">
<doc url="http://www.google.co.kr" title="구글"/>
</folder>
</folder>
<doc url="http://mar.gar.in" title="마가린"/>
<doc url="http://blog.mar.gar.in" title="마가린 블로그"/>
<doc url="http://sodumarvin.tistory.com" title="소두마빈 블로그"/>
</tree>
출처 : http://sodumarvin.tistory.com/5