웹마스터 팁
트리메뉴(dtree) 대충 정리
2009.07.19 23:52
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'])--> document.write(d); <p><a href="javascript: d.openAll();">모두 펼치기</a> | <a href="javascript: d.closeAll();">모두 접기</a></p>
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-->
d.openTo(cnt, true);
d.openAll();
</script>
</div>
뉴아이콘 뽑아 올때 게시글 갯수도 같이 뽑아오면 좋겠는데 잘 안되서 루프 두번 돌렸습니다.(무식하게)
머 대충 이렇네요. 참고로 루프가 좀 많이 돌아가네요.
댓글 11
제목 | 글쓴이 | 날짜 |
---|---|---|
2차 메뉴가 없을 경우 왼쪽 메뉴 숨기기 [5] | 엔시아- | 2009.07.16 |
트리메뉴(dtree) 대충 정리 [11] | 한이73 | 2009.07.19 |
까오천사님의 만기일 팁을 1.2.4에 맞게 수정했어요. [15] | 도파 | 2009.08.27 |
http://www.도메인주소/~as/xe/ 로 로그인 접속후~ [3] | wjnam | 2009.09.07 |
특정그룹회원에게 서비스 제공하기 [4] | 똑디 | 2009.09.12 |
XE 서버 이전할 때 통채로 압축해서 옮기는 완벽한 방법-로그인, 첨부파일문제 해결 [5] | 웰빙샵 지영 | 2009.09.15 |
로그인이 안되거나 첨부파일이 등록이 안될때. [9] | 똑디 | 2009.09.30 |
-추가- 당신의 XE 기반 홈페이지를 훅가게 하는 방법 4가지 [26] | 老姜君 | 2009.10.08 |
로그인 폼에 관리자는 [Admin] 나타나게 하기 [4] | 오스카 | 2009.10.10 |
게시판 리스트에서 확장변수를 카테고리처럼 보여주기 [11] | 고진감래 | 2009.11.05 |
ZB4로 현재까지 사이트를 운영하는분들 긴급 상황안내 (???) [2] | DuRi | 2009.11.20 |
메인 레이아웃에서 로그인이 안보이는 경우. | 김찬회425 | 2009.12.06 |
회원과 비회원 구분하여 출력하기 [6] | NEARSTORY | 2009.12.26 |
Flash swf 플래쉬 때문에 로그인이나 메뉴가 감추어졌을때에... [5] | 태림씨야! | 2010.01.23 |
로그인페이지와 새페이지 연결법 [2] | poko | 2010.01.30 |
쉬운 설치 - unexpected error 메시지창이 뜰 때 [9] | 현의느낌 | 2010.01.30 |
외부프로그램에서 제로보드 xe 및 그누보드 회원 연동(로그인) 하기 - 초간단 [1] | 한이73 | 2010.02.03 |
로그인 후 특정 그룹 페이지 가기 다른버전 [9] | 눈물많은OrOi | 2010.02.22 |
초보자를 위한 제로보드에 애드온 프로그램 설치하기 강좌 | 이하늘690 | 2010.02.23 |
플래시 뒤로 로그인창 숨는 문제 [5] | 김지훈295 | 2010.02.25 |