dtree 메뉴에 대해 모아봤습니다.

 

조성우님의 dtree메뉴 적용하기

http://www.xpressengine.com/17647873

 

쫑득이님의 트리메뉴 구성

http://www.xpressengine.com/16560220 

 

보거스내친구님의 새글 아이콘

http://www.xpressengine.com/18089216

 

 

       사이트에 적용된 모습

 

저는 'XE 공식 사이트 레이아웃 ver 0.1 (xe_official)' - wite 를 사용하고 있습니다.

4가지정도 수정해줘서 사용중입니다.

조성우님이 올리신 파일을 받아서

 

1.

 /www/layouts/xe_official/images  여기에

dtree_img 폴더 저장

 

2.

/www/layouts/xe_official/js   여기에

dtree.js 파일 저장  

js 파일 중에 

 

처음부분에 count 와 new-icon 변수 추가

// Node object

function Node(id, pid, count, new_icon, name, url, title, target, icon, iconOpen, open) {

 this.id = id;

 this.pid = pid;  
 this.new_icon = new_icon; 
 this.count = count;

 this.name = name;

 this.url = url;

 this.title = title;

 this.target = target;

 this.icon = icon;

 this.iconOpen = iconOpen;

 this._io = open || false;

 this._is = false;

 this._ls = false;

 this._hc = false;

 this._ai = 0;

 this._p;

};

 

65번줄 정도 아이콘 경로 변경

// Tree object

var dtree_icon_path  = "./layouts/xe_official/images/dtree_img/";

function dTree(objName) {

 

287번줄 정도 게시물갯수와 뉴아이콘 이미지 경로 추가

 else if ((!this.config.folderLinks || !node.url) && node._hc && node.pid != this.root.id)

  str += '<a href="javascript:" + this.obj + '.o(' + nodeId + ');" class="node">';

 str += node.name;

 if(node.count) str += '<span id="dnum"> [' + node.count + '] </span>';
 if(node.new_icon) str += ' <img src="http://www.hanistory.com/img/new.gif">'; 
 if (node.url || ((!this.config.folderLinks || !node.url) && node._hc)) str += '</a>'; 
 str += '</div>';

 

3.

/www/layouts/xe_official/css 아래

white.css 파일 수정

css 파일 제일 아래에 아래내용 추가 (따로 css 파일을 만들지 않고)

 

/*--------------------------------------------------|
| dTree 2.05 | www.destroydrop.com/javascript/tree/ |
|---------------------------------------------------|
| Copyright (c) 2002-2003 Geir Landr?              |
|--------------------------------------------------*/

#dtree { padding:0px 0 0 10px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; color: #666; white-space: nowrap; }
#dnum { font:1em "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; color: #666;}
#dhom { font-weight:bold; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 15px; color: #000000; white-space: nowrap;}
#dtree img { border: 0px; vertical-align: middle; }
#dtree a { color: #333; text-decoration: none; }
#dtree a.node { white-space: nowrap; padding: 1px 2px 1px 2px; }
#dtree a.nodeSel { white-space: nowrap; padding: 1px 2px 1px 2px; }
#dtree a.node:hover { color: #333; text-decoration: underline; }
#dtree a.nodeSel:hover { color: #333; text-decoration: underline; }
#dtree a.nodeSel { background-color: #c0d2ec; }
#dtree .clip { overflow: hidden; }
#dtree p { padding:0 10px 0 0; text-align:center; }
/***********************************************************/

 

4.

관리자 설정 - 레이아웃 편집창에 로그인위젯 아래부분에 코드추가

 

<!--트리메뉴-->
<!--%import("js/dtree.js")-->
<?php
$result = @mysql_query('SELECT * FROM `xe_documents`');

$time_interval = 86400;
$time_check = date("YmdHis", time()-$time_interval);

while($row = @mysql_fetch_array($result)){
$module_srl[] = $row[module_srl];
$regdate[] = $row[regdate];
}

$regdate_len = count($regdate);
?>
<div id="dtree">
<script type="text/javascript">

    var module_srl = new Array();
    var regdate = new Array();

    <?php
        echo "regdate_len = $regdate_len;";
        echo "time_check = $time_check;";
        for($i=0;$i<$regdate_len;$i++){
            $j = $regdate_len-$i-1;
            echo "module_srl[$i] = $module_srl[$j];";
            echo "regdate[$i] = $regdate[$j];";
        }
    ?>

function new_icon(board){
   var board_id;
 
   if(board.search("qna") != -1) board_id = '234';
   if(board.search("tip") != -1) board_id = '235';
   if(board.search("pds") != -1) board_id = '230';
   if(board.search("notice") != -1) board_id = '233';
   if(board.search("freeboard") != -1) board_id = '232';
   if(board.search("program") != -1) board_id = '2336';
   if(board.search("regular") != -1) board_id = '18730';
   if(board.search("besttip") != -1) board_id = '49605';
   if(board.search("gallery") != -1) board_id = '51822';
   if(board.search("regularpds") != -1) board_id = '52853';
   if(board.search("memo") != -1) board_id = '56439';
   if(board.search("link") != -1) board_id = '+ '+ '58787';
   if(board.search("backup") != -1) board_id = '54397';

   for(i=0;i<regdate_len;i++){     
        if(module_srl[i] == board_id) {
            if(regdate[i] > time_check) {
                return true;
            }
            else {
                return false;
            }
        }
    }
    return false;
};

function count(){    
   var num;
   num=0;

var board_id;
 
   if(board.search("qna") != -1) board_id = '234';
   if(board.search("tip") != -1) board_id = '235';
   if(board.search("pds") != -1) board_id = '230';
   if(board.search("notice") != -1) board_id = '233';
   if(board.search("freeboard") != -1) board_id = '232';
   if(board.search("program") != -1) board_id = '2336';
   if(board.search("regular") != -1) board_id = '18730';
   if(board.search("besttip") != -1) board_id = '49605';
   if(board.search("gallery") != -1) board_id = '51822';
   if(board.search("regularpds") != -1) board_id = '52853';
   if(board.search("memo") != -1) board_id = '56439';
   if(board.search("link") != -1) board_id = '58787';
   if(board.search("backup") != -1) board_id = '54397';

for(i=0;i<regdate_len;i++){     
  if(module_srl[i] == board_id) {
    num = num+1;
  }
 }
return num;
};

d = new dTree('d');

var x,y,z,cnt;
x=0;
y=10;
z=100;
cnt=0;

d.add(0,-1,0,0,'<span id="dhom"> Hani\'s Home </span>','','','');

<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
x=x+1;board="{$val['href'+ ']}";
d.add(x,0,0,0,"{$val['link']}","{$val['href']}",''<!--@if($val['open_window']=='Y')-->,true<!--@end-->);
<!--@if($val['selected']) -->
cnt=x;
<!--@end-->
<!--@foreach($val['list'] as $key1 => $val1)--><!--@if($val1['text'])-->
y=y+1;board="{$val1['href']}";
d.add(y,x,count(),new_icon(board),"{$val1['link']}","{$val1['href']}",''<!--@if($val1['open_window']=='Y')-->,true<!--@end-->);
<!--@if($val1['selected']) -->
cnt=y;
<!--@end-->
<!--@foreach($val1['list'] as $key2 => $val2)--><!--@if($val2['text'])-->
z=z+1;board="{$val2['href']}";
d.add(z,y,count(),new_icon(board),"{$val2['link']}","{$val2['href']}",''<!--@if($val2['open_window'+ ']=='Y')-->,true<!--@end-->);
<!--@end--><!--@end-->
<!--@end--><!--@end-->
<!--@end--><!--@end-->

document.write(d);
d.openTo(cnt, true);
d.openAll();
</script>

<p><a href="javascript: d.openAll();">모두 펼치기</a> | <a href="javascript: d.closeAll();">모두 접기</a></p>
</div>

 

 

뉴아이콘 뽑아 올때 게시글 갯수도 같이 뽑아오면 좋겠는데 잘 안되서 루프 두번 돌렸습니다.(무식하게)

머 대충 이렇네요.  참고로 루프가 좀 많이 돌아가네요.