웹마스터 팁
v1.5 관리자 페이지에서 v1.4처럼 모듈 목록 펼쳐놓기
2012.01.21 22:41
v1.5 관리자 페이지에서 v1.4처럼 모듈 목록 펼쳐놓기
관리자 모듈에서 2개의 파일을 수정합니다.
1. xe/modules/admin/tpl/_spLnb.content.html
<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) 보기를 클릭하여
추가되는 내용만 복사->붙여넣기 하십시오.
<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
<!--#include("./_spHeader.html")--> <div class="content" id="content"> {$content} </div> <!--@if($parentSrl != 0)--> <!--#include("./_spLnb.content.html")--> <!--@end--> <!--#include("./_spFooter.html")-->
관리자 페이지 레이아웃 템플릿도 별거 없습니다...^^ 요기서 아래처럼 2줄만 지워 줍니다.
<!--#include("./_spHeader.html")--> <div class="content" id="content"> {$content} </div> <!--#include("./_spLnb.content.html")--> <!--#include("./_spFooter.html")-->
<!--@if($parentSrl != 0)--> 과 <!--@end--> 만 지운 것이죠.
그러면 아래 그림처럼 관리자 페이지에서 v1.4 때처럼 모듈의 목록이 펼쳐져 보일 것입니다...^^
각각의 모듈마다 조금씩 변경된 내용들은 어쩔수 없지만 [설치된]을 찾지 않아도, [즐겨찾기]를 잘 몰라도
모듈로 곧바로 갈 수 있게 됩니다.
v1.5는 무채색의 매우 단조로운 관리자 페이지를 출력합니다.
다음 1개의 파일을 조금 수정하면 아래 그림과 같이 색감을 더할 수 있습니다.
● ZEROBOARD Style XE Admin Module CSS Setting
xe/modules/admin/tpl/_spHeader.html
{@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 탭메뉴처럼 만들기
v1.5에서 v1.4처럼 레이아웃 탭메뉴를 복원하여 사용하기 위해서는 다음 3개의 파일을 수정합니다.
1. xe/modules/layout/tpl/header.html
...중략 <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
<!--%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
<!--%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 기준으로 수정된 파일을 첨부하였습니다.
댓글 14
제목 | 글쓴이 | 날짜 |
---|---|---|
외부페이지를 생성해서 사용하면 무척 빠릅니다. [2] | 퍼니엑스이 | 2012.02.27 |
모바일 페이지가 스마트폰에서 가로폭이 넓게 나올경우의 팁 [2] | 카워시 | 2012.02.27 |
회원 가입 시 IP 중복 검사
[30]
![]() | CMD | 2012.02.24 |
v1.5를 위한 제어판 테마 애드온 정식
[4]
![]() | 우진홈 | 2012.02.13 |
댓글을 역순으로 출력하는 팁 (최근댓글이 가장 위에) [8] | sejin7940 | 2012.02.10 |
v1.5를 위한 팝업 모듈과 팝업 오프너 애드온
[55]
![]() | 우진홈 | 2012.02.06 |
부운영자
[26]
![]() | 송동우 | 2012.02.05 |
XE 1.5 이상으로 DB 이전시 일부 DB가 빠질 경우 - 내용추가(0203) [7] | sejin7940 | 2012.02.02 |
FTP로 폴더가 삭제가 안될때~!
[6]
![]() | 웹엔진 | 2012.01.30 |
v1.5 관리자 페이지에서 v1.4처럼 모듈 목록 펼쳐놓기
[14]
![]() | 우진홈 | 2012.01.21 |
모듈 이름은 대소문자 구분을 하지 않아요. | SkyKiDS | 2012.01.09 |
외부페이지에서 롤오버오류 !! | oem팩토리 | 2012.01.03 |
XE 1.5.1.1 업데이트후 갑자기 댓글 에디터가 나오지않는 문제 해결팁 [3] | 재주꾼 | 2012.01.02 |
XE 외부페이지 직접접속 차단 및 다국어 설정팁 [4] | 라르크앙시엘 | 2012.01.01 |
현재 트래픽 출력하기 [1] | 대류 | 2012.01.01 |
XE에서 Context의 이해 [3] | 우진홈 | 2011.12.28 |
확정변수 로 프린트 페이지 꾸미기(/print_page.html) | 세상의지배자 | 2011.12.26 |
XE 1.5.1 업그레이드시 조심해야 [1] | 소걸음 | 2011.12.23 |
친절한설명! 자신의홈페이지에 간단히 음악넣기
[10]
![]() | 준봉쿠 | 2011.12.18 |
XE관리자 메뉴 활용 방법 ^^
[24]
![]() | 똥똥 | 2011.12.09 |