웹마스터 팁

  2. Support
  3. 웹마스터 팁

v1.5 관리자 페이지에서 v1.4처럼 모듈 목록 펼쳐놓기

2012.01.21 22:41

우진홈

v1.5 관리자 페이지에서 v1.4처럼 모듈 목록 펼쳐놓기


모듈 정보파일의 모듈분류(category)를 활용하여 v1.4 관리자 페이지와 같은 모듈 목록을 펼쳐 놓습니다.

관리자 모듈에서 2개의 파일을 수정합니다.


1. xe/modules/admin/tpl/_spLnb.content.html 


?
1
2
3
4
5
6
7
8
9
10
<div class="lnb">
    <h2 class="h2">{$gnbUrlList[$parentSrl]['text']}</h2>
    <ul>
        <!--@if(count($gnbUrlList[$parentSrl]['list']) > 0)-->
        <!--@foreach($gnbUrlList[$parentSrl]['list'] AS $key=>$value)-->
        <li <!--@if($value['text'] == $subMenuTitle)-->class="active"<!--@end-->><a href="{html_entity_decode($value['href'])}">{$value['text']}</a></li>
        <!--@end-->
        <!--@end-->
    </ul>
</div>


위 파일을 열면 요것이 전부인데 맨 아래 </div> 바로 윗줄에 아래와 같이 추가합니다.

v1.4 관리자 모듈의 loadSideBar() 함수를 통째로 복구한 내용입니다...^^ 

인스톨된 모듈의 목록과 선택된 모듈을 구하고 목록을 만들어 출력한 후 스크립트를 이용해 접고 펼수 있도록 합니다.

※ 수정된 파일을 첨부하였지만 직접 수정하려는 경우 코드 하이라이트 우측 상단에서 뷰소스(view source) 보기를 클릭하여

추가되는 내용만 복사->붙여넣기 하십시오.


?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<div class="lnb">
    <h2 class="h2">{$gnbUrlList[$parentSrl]['text']}</h2>
    <ul>
        <!--@if(count($gnbUrlList[$parentSrl]['list']) > 0)-->
        <!--@foreach($gnbUrlList[$parentSrl]['list'] AS $key=>$value)-->
        <li <!--@if($value['text'] == $subMenuTitle)-->class="active"<!--@end-->><a href="{html_entity_decode($value['href'])}">{$value['text']}</a></li>
        <!--@end-->
        <!--@end-->
    </ul>
 
<!-- // 여기서부터 -->
{@
    $oModuleModel = &getModel('module');
    $installed_module_list = $oModuleModel->getModulesXmlInfo();
 
    $installed_modules = $package_modules = array();
    $package_idx = 0;
}
<block loop="$installed_module_list=>$key, $val">
{@
    if($val->category == 'migration') $val->category = 'system';
    if($val->category == 'interlock') $val->category = 'accessory';
    if($val->category == 'statistics') $val->category = 'accessory';
 
    if($val->module == 'admin' || !$val->admin_index_act) continue;
    // get action information
    $action_spec = $oModuleModel->getModuleActionXml($val->module);
    $actions = array();
    if($action_spec->default_index_act) $actions[] = $action_spec->default_index_act;
    if($action_spec->admin_index_act) $actions[] = $action_spec->admin_index_act;
    if($action_spec->action) foreach($action_spec->action as $k => $v) $actions[] = $k;
 
    $obj = null;
    $obj->category = $val->category;
    $obj->title = $val->title;
    $obj->description = $val->description;
    $obj->index_act = $val->admin_index_act;
    if(in_array(Context::get('act'), $actions)) $obj->selected = true;
}
<!--@if($val->category == 'package')-->
{@
    if($package_idx == 0) $obj->position = "first";
    else $obj->position = "mid";
    $package_modules[] = $obj;
    $package_idx ++;
    if($obj->selected) $package_selected= 'true';
}
<!--@else-->
{@ $installed_modules[] = $obj;}
<!--@end-->
<!--@if($obj->selected)-->
{@
    $selected_module_category=$val->category;
    $selected_module_info=$val;
}
<!--@end-->
</block>
 
<script type="text/javascript">
<!--
function toggleModuleMenu(category) {
    jQuery('#module_'+category).toggleClass('close');
     
    var arr = new Array();
    jQuery('ul.restored_navigation > li').each(function(){
        var o = jQuery(this);
        if(!o.hasClass('close')) return;
        var idx = o.attr('id').replace(/^module_/,'');
        arr.push(idx);
    });
    var expire= new Date();
    expire.setTime(expire.getTime()+(7000*24*3600000));
    xSetCookie('XEAM',arr.join(','),expire,'/');
}
//-->
</script>
 
<style type="text/css">
.x .restored_navigation_wrapper {position:relative; *zoom:1; margin-top:10px; padding:0; border-bottom:2px solid #CCC;}
.x .restored_navigation {list-style:none; position:relative; *zoom:1; margin:0; padding:0;}
.x .restored_navigation li {list-style:none;}
.x .restored_navigation li.close a.parent {border-bottom:none;}
.x .restored_navigation li.close ul {display:none;}
.x .restored_navigation li ul li a {text-decoration:none;}
.x .restored_navigation li ul li a:hover {font-weight:bold; text-decoration:none;}
.x .restored_navigation li ul li.on a {color:#a33;}
.x .restored_navigation li a.parent {border:none; border-top:1px solid #CCC;}
.x .restored_navigation li.active {border:none; border-bottom:1px solid #CCC;}
</style>
 
<div class="restored_navigation_wrapper">
    <ul class="restored_navigation">
    {@$_c = explode(',',$_COOKIE['XEAM'])}
        <!--@foreach($lang->module_category_title as $key => $val)-->
        <!--@if($key != 'migration' && $key != 'interlock' && $key != 'statistics')-->
 
            <!--@if(in_array($key,$_c)&&$key!=$selected_module_category)-->
                {@$_cs = true;}
            <!--@else-->
                {@$_cs = false;}
            <!--@end-->
 
            <li id="module_{$key}" class="parent <!--@if($_cs)-->close<!--@end--> <!--@if($key==$selected_module_category)-->active<!--@end-->"><a href="#"  onclick="toggleModuleMenu('{$key}'); return false;" class="parent">{$val}</a>
                <ul>
                    <!--@foreach($installed_modules as $k => $v)--><!--@if($v->category == $key)-->
                    <li class="on"|cond="$v->selected"><a href="{getUrl('','module','admin','act',$v->index_act)}" title="{$v->description}">{$v->title}</a></li>
                    <!--@end--><!--@end-->
                </ul>
            </li>
        <!--@end-->
        <!--@end-->
    </ul>
</div>
<!-- // 여기까지 -->
</div>


 
2. xe/modules/admin/tpl/layout.html


?
1
2
3
4
5
6
7
8
<!--#include("./_spHeader.html")-->
<div class="content" id="content">
    {$content}
</div>
<!--@if($parentSrl != 0)-->
<!--#include("./_spLnb.content.html")-->
<!--@end-->
<!--#include("./_spFooter.html")-->


관리자 페이지 레이아웃 템플릿도 별거 없습니다...^^ 요기서 아래처럼 2줄만 지워 줍니다.


?
1
2
3
4
5
6
7
8
<!--#include("./_spHeader.html")-->
<div class="content" id="content">
    {$content}
</div>
 
<!--#include("./_spLnb.content.html")-->
 
<!--#include("./_spFooter.html")-->


<!--@if($parentSrl != 0)--> 과 <!--@end--> 만 지운 것이죠.

그러면 아래 그림처럼 관리자 페이지에서 v1.4 때처럼 모듈의 목록이 펼쳐져 보일 것입니다...^^


각각의 모듈마다 조금씩 변경된 내용들은 어쩔수 없지만 [설치된]을 찾지 않아도, [즐겨찾기]를 잘 몰라도

모듈로 곧바로 갈 수 있게 됩니다.


xe_admin.gif 


v1.5 ZEROBOARD 스타일 관리자 페이지 만들기


v1.5는 무채색의 매우 단조로운 관리자 페이지를 출력합니다.

다음 1개의 파일을 조금 수정하면 아래 그림과 같이 색감을 더할 수 있습니다.


ZEROBOARD_Style_01.gif


ZEROBOARD_Style_02.gif


● ZEROBOARD Style XE Admin Module CSS Setting


xe/modules/admin/tpl/_spHeader.html


?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{@Context::addHtmlHeader('<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=yes" />')}
 
<!-- // 여기서부터 -->
<style type="text/css">
/* ZEROBOARD Style XE Admin Module CSS Setting --- XESCHOOL */
 
/* common */
body{background: #333}
.x p input,.x textarea{background: #FFF !important;}
.x .header{background:#6F080A !important;}
.x .header .account{background: #000 !important;}
.x .footer{background: #333 !important; border:none !important; padding:1.5em 1em;}
.x .footer p,.x .footer a,.x .footer .cache button{color:#FFF !important;}
.x .body{box-shadow:0 0 10px #aaa; border-radius:0 0 5px 5px;}
 
/* Setting #1 Simple White --- 심플한 흰색 바탕
.x .body{background:#FFF !important;}
*/
/* Setting #2 Light gray --- 옅은 회색 바탕 */
.x .body{background:#EFEFEF !important;}
</style>
<!-- // 여기까지 -->
 
<div class="x">
... 생략...


관리자 템플릿 _spHeader.html 파일을 열고 이번에는 맨 윗줄 상단에 내부 스타일 설정 방법으로 관리자 페이지에서 사용할 CSS를 추가 합니다. 뷰포트(viewport) 설정 바로 다음 줄에 스타일을 추가하고 저장하면 끝... 

저는 개인적으로 옅은 회색바탕이 좋아서#2번을 씁니다. 하지만 심플한 흰색 바탕을 좋아하시는 분들도 있을 것입니다.

그런 경우#2 부분을 주석 처리하고#1번 흰색 바탕 설정의 주석 /* ... */ 을 풀고 사용하시면 됩니다.


※ 위 소스를 조금씩 수정해 보면 나만의 색감을 이용한 관리자 페이지를 만들 수 있습니다...^^


이 방법은 코어의 동작과 운영 내용에 전혀 영향을 주지 않습니다. 

CSS 재정의의 아주 기초적인 원리를 응용한 것입니다...^^

코어 1.5을 사용하시는데 도움이 되시기를 바랍니다...^^



설치된 레이아웃 v1.4 탭메뉴처럼 만들기


tabMenu_layout.gif


v1.5에서 v1.4처럼 레이아웃 탭메뉴를 복원하여 사용하기 위해서는 다음 3개의 파일을 수정합니다.


1. xe/modules/layout/tpl/header.html

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
...중략
<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
    <p>{$XE_VALIDATOR_MESSAGE}</p>
</div>
 
<!-- // 설치된 레이아웃 v1.4 탭메뉴처럼 만들기  시작 -->
<style type="text/css">
.tabMenu_layout {position:relative; *zoom:1; margin:0; padding:0;}
.tabMenu_layout:after {content:""; display:block; clear:both;}
.tabMenu_layout li{list-style:none; float:left; margin:0; padding:0; background:#666; border:1px solid #666;}
.tabMenu_layout li a{ float:left; padding:4px 5px 0 5px; height:18px; border:1px solid #ddd; text-decoration:none !important; color:#FFF !important;}
.tabMenu_layout li a:hover,.tabMenu_layout li.on a {background: #FFF; color:#222 !important;}
</style>
<ul class="tabMenu_layout">
    <li class="on"|cond="$act == 'dispLayoutAdminContent'"><a href="{getUrl('act','dispLayoutAdminContent','path','/','type','','layout','','layout_srl','')}">{$lang->layout_list}</a></li>
    <li class="on"|cond="$act == 'dispLayoutAdminInstalledList'"><a href="{getUrl('act','dispLayoutAdminInstalledList','path'+
 ','','type','','layout','','layout_srl','')}">{$lang->downloaded_list}</a></li>
    <li class="on"|cond="$act == 'dispLayoutAdminMobileContent'"><a href="{getUrl('act','dispLayoutAdminMobileContent','path','','layout_srl','')}">{$lang->mobile_layout_list}</a></li>
    <li class="on"|cond="$act == 'dispLayoutAdminInstalledMobileList'"><a href="{getUrl('act','dispLayoutAdminInstalledMobileList','path','','layout_srl','')}">{$lang->mobile_downloaded_list}</a></li>
    <li cond="$layout_srl" class="on"|cond="$act == 'dispLayoutAdminModify'"><a href="{getUrl('act','dispLayoutAdminModify','path','','layout_srl',$layout_srl)}">{$lang->cmd_layout_management}</a></li>
    <li cond="$layout_srl" class="on"|cond="$act == 'dispLayoutAdminEdit'"><a href="{getUrl('act','dispLayoutAdminEdit','path','','layout_srl',$layout_srl)}">{$lang->cmd_layout_edit}</a></li>
</ul>
<!-- // 끝 -->


header.html 파일을 열어서 맨 하단에 위 내용을 추가합니다. {$XE_VALIDATOR_MESSAGE}를 받는 곳 아래에 추가하는 것입니다. header.html 파일은 레이아웃 모듈의 템플릿 파일들이 항상 include하여 쓰기 때문에 이곳에 추가하면 좋겠네요. 


위 내용을 추가하면 1.5에서 버린 index.html 과 mindex.html 파일을 다시 불러 사용하게 됩니다. 그런데 [삭제]링크와 [생성] 링크에서 문제가 생깁니다. 삭제는 layout_admin.js를 불러오면 되는데, 생성은 방법이 달라졌습니다. 그래서 새로운 레이아웃은  우선 설치된 레이아웃을 1개 선택한 후에 생성해야 합니다. 따라서 index.html 과 mindex.html 파일을 다음과 같이 수정합니다.


2. xe/modules/layout/tpl/index.html

?
1
2
3
4
5
6
7
8
9
10
11
<!--%import("filter/delete_layout.xml")-->
 
<!-- // 선택된 레이아웃 삭제를 위한 스크립트 추가 -->
<load target="js/layout_admin.js" usecdn="true" />
 
...중략...
 
<!-- // 새로운 레이아웃의 생성은 해당 레이아웃을 선택하고 생성하기 때문에 필요없음
<div class="btnArea">
    <span class="btn"><a href="{getUrl('act','dispLayoutAdminInsert','layout_srl','')}">{$lang->cmd_make}</a></span>
</div> // 레이아웃 생성은 [다운로드 목록]에서 레이아웃을 선택후 생성하세요.-->


맨 윗줄 import문 아래에 [선택된 레이아웃 삭제를 위한 스크립트 추가] 이 부분을 추가하고

맨 아래 [생성] 버튼을 주석처리합니다.


3. xe/modules/layout/tpl/mindex.html

?
1
2
3
4
5
6
7
8
9
10
11
<!--%import("filter/delete_layout.xml")-->
 
<!-- // 선택된 레이아웃 삭제를 위한 스크립트 추가 -->
<load target="js/layout_admin.js" usecdn="true" />
 
...중략...
 
<!-- // 새로운 레이아웃의 생성은 해당 레이아웃을 선택하고 생성하기 때문에 필요없음
<div class="btnArea">
    <span class="btn"><a href="{getUrl('act','dispLayoutAdminInsert','layout_srl','','layout_type','M')}">{$lang->cmd_make}</a></span>
</div> //모바일 레이아웃 생성은 [다운로드 목록]에서 레이아웃을 선택후 생성하세요. -->


모바일 레이아웃 목록보기 파일에서도 같은 방법으로 스크립트를 추가하고 [생성] 버튼은 주석처리 합니다.


v1.6에서 dispLayoutAdminContent() 와 같은 소스가 없어지지 않는다면 유효하게 작동할 것입니다. 하지만 // deprecated(사용중지됨)라고 적혀있어서 계속 유효할지는 모르겠습니다.


도움이 되시기를 바랍니다...^^


위 내용은 v1.5.1.3 기준으로 수정된 파일을 첨부하였습니다.



이 게시물을
좋아요(+3)
목록
제목 글쓴이 날짜
역삼오피 역삼오피 ⦑오피.CLUB⦒ 역삼OP 역삼스파 역삼오피 koykoyah 2025.02.22
대구오피 대구출장안마 ⦑오피.CLUB⦒ 대구OP 대구오피 대구오피 koykoyah 2025.02.22
강서오피 강서출장안마 ⦑오피.CLUB⦒ 강서OP 강서오피 강서오피 koykoyah 2025.02.22
영등포오피 ⦑출장마사지안내.COM⦒ 영등포OP 영등포오피 영등포출장샵 영등포오피 koykoyah 2025.02.22
제주도오피 ⦑오피.CLUB⦒ 제주도마사지 제주도오피 제주도오피 제주도OP koykoyah 2025.02.22
선릉오피 선릉OP ⦑오피쓰.COM⦒ 선릉휴게텔 선릉오피 선릉오피 koykoyah 2025.02.22
강남오피 ⦑오피쓰.COM⦒ 강남오피 강남출장마사지 강남오피 강남OP koykoyah 2025.02.22
일산오피 ⦑출장마사지안내.COM⦒ 일산오피 일산OP 일산건마 일산오피 koykoyah 2025.02.22
수원오피 ⦑오피쓰주소.COM⦒ 수원오피 수원OP 수원건마 수원오피 koykoyah 2025.02.22
목포오피 목포출장안마 ⦑오피사이트.NET⦒ 목포OP 목포오피 목포오피 koykoyah 2025.02.22
대전오피 대전오피 ⦑출장마사지안내.COM⦒ 대전OP 대전스파 대전오피 koykoyah 2025.02.22
동대문오피 ⦑출장안마사이트.COM⦒ 동대문OP 동대문오피 동대문출장샵 동대문오피 koykoyah 2025.02.22
수원오피 수원출장안마 ⦑출장마사지안내.COM⦒ 수원OP 수원오피 수원오피 koykoyah 2025.02.22
판교오피 판교오피 ⦑오피.CLUB⦒ 판교OP 판교스파 판교오피 koykoyah 2025.02.22
대구오피 대구OP ⦑오피사이트.NET⦒ 대구휴게텔 대구오피 대구오피 koykoyah 2025.02.22
신도림오피 신도림OP ⦑오피.CLUB⦒ 신도림휴게텔 신도림오피 신도림오피 koykoyah 2025.02.22
청주오피 청주OP ⦑출장마사지안내.COM⦒ 청주휴게텔 청주오피 청주오피 koykoyah 2025.02.22
신도림오피 신도림오피 ⦑출장안마사이트.COM⦒ 신도림OP 신도림스파 신도림오피 koykoyah 2025.02.22
답십리오피 ⦑오피.CLUB⦒ 답십리마사지 답십리오피 답십리오피 답십리OP koykoyah 2025.02.22
부평오피 ⦑오피쓰주소.COM⦒ 부평오피 부평출장마사지 부평오피 부평OP koykoyah 2025.02.22
태그 쓰기