xml & javascript로 트리 메뉴 만들기

JS/etc
출처: http://sodumarvin.tistory.com/5 (1) test.php <!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> ======================================================================================= (2) 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>[출처] xml & javascript로 트리 메뉴 만들기|작성자 없음

'JS > etc' 카테고리의 다른 글

Ajax - innerHTML  (0) 2009.01.05
innerHTML, innerText, outerHTML, outerText 비교하는 예  (0) 2009.01.05
innerHTML의 한계와 해결  (0) 2009.01.05
jQuery로 Ajax 개발을 단순화 하기  (0) 2009.01.05
FireFox, IE에서 모두 iframe 사이즈 자동 조절 하는 방법  (0) 2009.01.05
List of AJAX Start Page  (0) 2009.01.05
ajax를 이용한 파일 탐색기  (0) 2009.01.05
PHP와 AJAX를 연동해보자  (0) 2009.01.05
by Anna 안나 2008. 10. 24. 20:24

티스토리툴바