tree형 폴더 탐색기

var maxLoops = 3;
var bInterval = 3;
var count = 2;
function init() {
  blendObj.filters.blendTrans.apply();
  document.images.blendObj.src = eval("img"+count+".src");
  blendObj.filters.blendTrans.play();
  if (count  < maxLoops) {
    count++;
  } else {
    count = 1;
  }
  setTimeout("init()", bInterval*1000+3000);
}

var img1 = new Image();
img1.src = "img_basic/goods1.gif";
var img2 = new Image();
img2.src = "img_basic/goods2.gif";
var img3 = new Image();
img3.src = "img_basic/goods3.gif";


function Folder(folderDescription, hreference) //constructor 
{
  //constant data;
  this.desc = folderDescription;
  this.hreference = hreference;
  this.id = -1;
  this.navObj = 0;
  this.iconImg = 0;
  this.nodeImg = 0;
  this.isLastNode = 0;

  // dynamic data                                           
  this.isOpen = true;
  //    this.iconSrc = "openfolder.gif";
  this.iconSrc = "img_basic/folder.gif";
  this.children = new Array;
  this.nChildren = 0;

  // methods
  this.initialize = initializeFolder;
  this.setState = setStateFolder;
  this.addChild = addChild;
  this.createIndex = createEntryIndex;
  this.hide = hideFolder;
  this.display = display;
  this.renderOb = drawFolder;
  this.totalHeight = totalHeight;
  this.subEntries = folderSubEntries;
  this.outputLink = outputFolderLink;
}



function setStateFolder(isOpen)
{ 
  var subEntries; 
  var totalHeight; 
  var fIt = 0; 
  var i = 0; 

  if(isOpen == this.isOpen) 
    return 

  if(browserVersion == 2) {
    totalHeight = 0 
    for(i = 0; i  < this.nChildren; i++) 
      totalHeight = totalHeight + this.children[i].navObj.clip.height; 
    subEntries = this.subEntries(); 

    if(this.isOpen) 
      totalHeight = 0 - totalHeight; 

    for(fIt = this.id + subEntries + 1; fIt  < nEntries; fIt++) 
      indexOfEntries[fIt].navObj.moveBy(0, totalHeight); 
  }

  this.isOpen = isOpen; 
  propagateChangesInState(this); 
} 



function propagateChangesInState(folder) 
{   
var i=0 

if (folder.isOpen) 
{ 
if (folder.nodeImg) 
if (folder.isLastNode) 
folder.nodeImg.src = "img_basic/ftv2node.gif" 
else 
folder.nodeImg.src = "img_basic/minus_1.gif" 
folder.iconImg.src = "img_basic/openfolder.gif" 
for (i=0; i <folder.nChildren; i++) 
folder.children[i].display() 
} 
else 
{ 
if (folder.nodeImg) 
if (folder.isLastNode) 
folder.nodeImg.src = "img_basic/minus_5.gif" 
else 
folder.nodeImg.src = "img_basic/plus_2.gif" 
folder.iconImg.src = "img_basic/folder.gif" 
for (i=0; i <folder.nChildren; i++) 
folder.children[i].hide() 
}  
} 


function hideFolder() 
{ 
if(browserVersion == 1) { 
if(this.navObj.style.display == "none")
return 
this.navObj.style.display = "none"
}
else { 
if(this.navObj.visibility == "hiden")
return 
this.navObj.visibility = "hiden" 
} 

this.setState(0) 
} 


function initializeFolder(level, lastNode, leftSide) 
{ 
var i = 0;
var j = 0;

var numberOfFolders;
var numberOfDocs;
var nc;

nc = this.nChildren;
this.createIndex();

var auxEv = "";

if(browserVersion > 0)
auxEv = " <a href='javascript:clickOnNode("+this.id+")'>" 
//	    auxEv = " <a href='javascript:clickOnNode("+this.id+")'>" 
else 
auxEv = " <a>" 


if(level > 0) {
if(lastNode) { //the last 'brother' in the children array 
this.renderOb(leftSide + auxEv + " <img  name='nodeIcon" + this.id + "' src='img_basic/minus_5.gif'  border=0> </a>");
leftSide = leftSide + " <img src='img_basic/ftv2blank.gif' >";
this.isLastNode = 1;
} 
else { 
this.renderOb(leftSide + auxEv + " <img name='nodeIcon" + this.id + "' src='img_basic/minus_1.gif'  border=0 align=absmiddle> </a>");
leftSide = leftSide + " <img src='img_basic/line_1.gif' align=absmiddle>";
this.isLastNode = 0;
} 
}
else 
this.renderOb("");


if(nc > 0) {
level = level + 1;
for(i = 0; i  < this.nChildren; i++) { 
if(i == this.nChildren-1)
this.children[i].initialize(level, 1, leftSide);
else 
this.children[i].initialize(level, 0, leftSide);
} 
} 
} 



function drawFolder(leftSide) 
{ 
if (browserVersion == 2) { 
if (!doc.yPos) 
doc.yPos=8 
doc.write(" <layer id='folder" + this.id + "' top=" + doc.yPos + " visibility=hiden>") 
} 

doc.write(" <table class='shopmode' width=5 ") 
if (browserVersion == 1) 
doc.write(" id='folder" + this.id + "' style='position:block;' ") 
doc.write(" border=0 cellspacing=0 cellpadding=0>") 
doc.write(" <tr> <td>") 
doc.write(leftSide) 
this.outputLink() 
doc.write(" <img name='folderIcon" + this.id + "' ") 
doc.write("src='img_basic/" + this.iconSrc+"' border=0 align=absmiddle> </a>") 
doc.write(" </td> <td nowrap>") 

doc.write(" <DIV CLASS=\"fldrroot\">");
if (USETEXTLINKS) 
{ 
this.outputLink() 
doc.write(this.desc + " </a>") 
} 
else 
doc.write(this.desc) 

doc.write(" </DIV>");



doc.write(" </td>")  
doc.write(" </tr>")  
doc.write(" </table>") 

if (browserVersion == 2) { 
doc.write(" </layer>") 
} 


if (browserVersion == 1) { 
this.navObj = doc.all["folder"+this.id] 
this.iconImg = doc.all["folderIcon"+this.id] 
this.nodeImg = doc.all["nodeIcon"+this.id] 
} else if (browserVersion == 2) { 
this.navObj = doc.layers["folder"+this.id] 
this.iconImg = this.navObj.document.images["folderIcon"+this.id] 
this.nodeImg = this.navObj.document.images["nodeIcon"+this.id] 
doc.yPos=doc.yPos+this.navObj.clip.height 
} 
} 

function outputFolderLink() 
{
if (this.hreference) 
{ 
if (browserVersion > 0) 
doc.write(" <a href ='javascript:clickOnNode("+this.id+")'") 
doc.write("> <font color='483200'> <b>") 
} 
else 
doc.write(" <a>")
//  doc.write(" <a href='javascript:clickOnFolder("+this.id+")'>")   
} 

function addChild(childNode) 
{ 
this.children[this.nChildren] = childNode 
this.nChildren++ 
return childNode 
} 

function folderSubEntries() 
{ 
var i = 0 
var se = this.nChildren 

for (i=0; i  < this.nChildren; i++){ 
if (this.children[i].children) //is a folder 
se = se + this.children[i].subEntries() 
} 

return se 
} 


// Definition of class Item (a document or link inside a Folder) 
// ************************************************************* 

function Item(itemDescription, itemLink, itemImg) // Constructor 
{ 
// constant data 
this.desc = itemDescription 

this.link = itemLink 

this.id = -1 //initialized in initalize() 
this.navObj = 0 //initialized in render() 
this.iconImg = 0 //initialized in render() 

// iconSrc에 지정되는 이미지 파일을 각 아이템에 맞게 지정할 수 있도록 한다 (목표)
this.iconSrc = itemImg;

// methods 
this.initialize = initializeItem 
this.createIndex = createEntryIndex 
this.hide = hideItem 
this.display = display 
this.renderOb = drawItem 
this.totalHeight = totalHeight 
} 


function hideItem() 
{ 
if (browserVersion == 1) { 
if (this.navObj.style.display == "none") 
return 
this.navObj.style.display = "none" 
} else { 
if (this.navObj.visibility == "hiden") 
return 
this.navObj.visibility = "hiden" 
}     
} 

function initializeItem(level, lastNode, leftSide) 
{  
this.createIndex() 

if (level>0) 
if (lastNode) //the last 'brother' in the children array 
{ 
this.renderOb(leftSide + " <img src='img_basic/minus_3.gif' align=absmiddle>") 
leftSide = leftSide + " <img src='img_basic/ftv2blank.gif' >"  
} 
else 
{ 
this.renderOb(leftSide + " <img src='img_basic/minus_2.gif' align=absmiddle >") 
leftSide = leftSide + " <img src='img_basic/line_1.gif' >" 
} 
else 
this.renderOb("")   
} 


function drawItem(leftSide) 
{ 
if (browserVersion == 2) 
doc.write(" <layer id='item" + this.id + "' top=" + doc.yPos + " visibility=hiden>") 

doc.write(" <table  class='shopmode' width=5 ") 
if (browserVersion == 1) 
doc.write(" id='item" + this.id + "' style='position:block;' ") 
doc.write(" border=0 cellspacing=0 cellpadding=0>") 
doc.write(" <tr> <td>") 
doc.write(leftSide) 


if(this.link != "")
doc.write(" <a href=" + this.link + " ") 

doc.write(" <img id='itemIcon"+this.id+"' ") 
doc.write("src='img_basic/"+this.iconSrc+"' border=0 align=absmiddle> <img src='img_basic/sub_point.gif' border=0 align=absmiddle>") 

if(this.link != "")
doc.write(" </a>") 

doc.write(" </td> <td nowrap>") 

doc.write(" <div class=\"fldritem\">");
if (USETEXTLINKS) {
if(this.link != "")
doc.write(" <a href=" + this.link + " align=absmiddle> <font color='#000000'>" + this.desc + " </font> </a>") 
else
doc.write(this.desc)       

}
else {
doc.write(this.desc) 
}
doc.write(" </div>");

doc.write(" </td>") 
doc.write(" </tr>") 
doc.write(" </table>") 

if (browserVersion == 2) 
doc.write(" </layer>") 

if (browserVersion == 1) { 
this.navObj = doc.all["item"+this.id] 
this.iconImg = doc.all["itemIcon"+this.id] 
} else if (browserVersion == 2) { 
this.navObj = doc.layers["item"+this.id] 
this.iconImg = this.navObj.document.images["itemIcon"+this.id] 
doc.yPos=doc.yPos+this.navObj.clip.height 
} 
} 


// Methods common to both objects (pseudo-inheritance) 
// ******************************************************** 

function display() 
{ 
if (browserVersion == 1) 
this.navObj.style.display = "block" 
else 
this.navObj.visibility = "show" 
} 

function createEntryIndex() 
{ 
this.id = nEntries 
indexOfEntries[nEntries] = this 
nEntries++ 
} 

// total height of subEntries open 
function totalHeight() //used with browserVersion == 2 
{ 
  var h = this.navObj.clip.height 
  var i = 0 

  if (this.isOpen) //is a folder and _is_ open 
    for (i=0 ; i  < this.nChildren; i++)  
      h = h + this.children[i].totalHeight() 

  return h 
} 


// Events 
// ********************************************************* 

function clickOnFolder(folderId) { 
  var clicked = indexOfEntries[folderId] 

  if (!clicked.isOpen) {
    clickOnNode(folderId)
    return 
  }

  if (clicked.isSelected) 
    return 
} 


function clickOnNode(folderId) { 
  var clickedFolder = 0 
  var state = 0 

  clickedFolder = indexOfEntries[folderId] 
  state = clickedFolder.isOpen 

  clickedFolder.setState(!state) //open <->close  
} 


function initializeDocument() 
{ 
  if(doc.all) 
    browserVersion = 1; //IE4
  else if(doc.layers)
    browserVersion = 2; //NS4
  else 
    browserVersion = 0; //other

  foldersTree.initialize(0, 1, "");
  foldersTree.display();

  if(browserVersion > 0) {
    doc.write(" <layer top="+indexOfEntries[nEntries-1].navObj.top+">&nbsp; </layer>");
    // close the whole tree
    clickOnNode(0) 
    // open the root folder 
    clickOnNode(0) 
  } 
} 


// Auxiliary Functions for Folder-Treee backward compatibility 
// ********************************************************* 

function gFldr(description, hreference) { 
  folder = new Folder(description, hreference);
  return folder;
} 




function gLnk(target, description, linkData, itemImg) 
{ 
fullLink = "" 

if (target==0) { 
  if(linkData != "")
    fullLink = "'"+linkData+"' target=\"content\"" 
  else
    fullLink = "";
} else { 
  if (target==1) {
    if(linkData != "")
      fullLink = "'http://"+linkData+"' target=content" 
    else
      fullLink = "";
  } else { // target == 2
  if(linkData != "")
    fullLink = "'http://"+linkData+"' target=\"content\"" 
  else
    fullLink = "";
  }
} 

linkItem = new Item(description, fullLink, itemImg)   
  return linkItem 
} 

function insFldr(parentFolder, childFolder) { 
  return parentFolder.addChild(childFolder) 
} 

function insDoc(parentFolder, document) { 
  parentFolder.addChild(document) 
} 


// Global variables 
// **************** 

USETEXTLINKS = 1;
indexOfEntries = new Array;
nEntries = 0;
doc = document;
browserVersion = 0;
selectedFolder=0;


foldersTree = gFldr("관리자 페이지","")

aux1 = insFldr(foldersTree, gFldr("고객 서비스","test"))
insDoc(aux1, gLnk(0, "공지사항",  "notice_list.html", "sub_point.gif"))

insDoc(aux1, gLnk(0, "Q&A 게시판",  "brd_list.html?TableName=qna_brd", "sub_point.gif"))


aux1 = insFldr(foldersTree, gFldr("취급품목","test"))


insDoc(aux1, gLnk(0, "보리풀",  "Goods_list.html?Cate1=보리풀&Code1=000001", "sub_point.gif"))   

insDoc(aux1, gLnk(0, "난스프레이",  "Goods_list.html?Cate1=난스프레이&Code1=000002", "sub_point.gif"))   

aux1 = insFldr(foldersTree, gFldr("온라인 문의","test"))
insDoc(aux1, gLnk(0, "온라인 문의",  "online_list.html", "sub_point.gif"))

aux1 = insFldr(foldersTree, gFldr("통계관리","test"))
insDoc(aux1, gLnk(0, "접속통계",  "/stat/start.html", "sub_point.gif"))

insDoc(foldersTree, gFldr("메뉴구성끝",""))

initializeDocument();

CodePen

See the Pen tree 형 폴더 탐색기 by younghyeong ryu (@wangta69) on CodePen.