PXE Basic Plugin은 XE에서 새로 배포한 레이아웃 스킨 XE Official Ver.2에 사용된 로그인 Form과 통합 검색창을 기존의 모든 레이아웃에 쉽게 적용시키기 위해 분리한 플러그인입니다. 획기적인 것은 아니지만 Premiumxe.com과 같이 레이아웃을 많이 만드는 작업을 가진 분들이 그간의 불편함을 어느정도 해소 할 수 있는 방법입니다.
- 기존에 만들어 두었던 레이아웃에 아주 손쉽게 Modal Window 로그인 Form과 통합 검색창을 넣을 수 있습니다.
- 레이아웃 스킨을 하나 만들때마다 매번 새로 디자인 해야했던 불편함을 플러그인으로 분리시킴으로해서 언제든 쉽게 첨삭이 가능하고 디자인을 새로 만들때도 디자인에 관련된 부분의 코드만 쉽게 찾아 바꿀 수 있어 편리합니다.
- 수동이지만 위젯과 같이 언제든 기존에 만들어 두었던 Modal Window와 통합 검색창을 추가/삭제하면서 여러 레이아웃에 사용 할 수 있습니다.
압축을 풀어 나온 packages 폴더를 복사하여 적용하고자 하는 레이아웃 폴더안에 넣습니다. 기존에 packages 폴더가 존재하면 덮어쓰기 하면 필요한 파일만 복사가되니 안심하고 덮어쓰세요.
예) /layouts/PXE_blackplain/
packages
1. JS와 CSS 로드를 위한 코드 넣기
적용하고자 하는 레이아웃의
layout.html을 열어 상단에 파란색 부분의 코드를 넣어줍니다. 다른 부분들은 샘플이니 신경 안써도 됩니다.
<!-- 기본 JS 파일 로드 -->
<!--%import("/common/js/jquery.js")-->
<!--%import("/common/js/iepngfix_tilebg.js")-->
<!--%import("./js/swfobject.js")-->
<!-- PXE Packages JS 파일 로드 -->
<!--%import("레이아웃 절대경로/packages/basic_plugin/modal_window.js")-->
<!--%import("/layouts/PXE_platinum/packages/pxe_droppy_menu/jquery.droppy.js")-->
<!-- 기본 CSS 파일 로드 -->
<!--%import("./css/default.css")-->
<!-- PXE Packages CSS 파일 로드 -->
<!--%import("./packages/basic_plugin/accounts.css")-->
<!--%import("./packages/basic_plugin/isSearch.css")-->
<!--%import("./packages/pxe_droppy_menu/droppy.css")-->
<!--%import("./packages/pxe_vertical_menu/vertical_menu.css")-->
<!--%import("./samples/sample.css")-->
레이아웃 절대경로에는 반드시 절대경로를 넣어주세요. 이유는 모르겠지만 XE가 JS 파일을 로드 할 때, 레이아웃 폴더의
js 폴더 이외의 다른 곳에 위치한 JS 파일을 로드 할 때는 상대경로가 잘 안먹히는 문제가 보입니다. 따라서 꼭 절대경로를 적어주세요. CSS 파일의 경우는 위 샘플코드와 똑같이 상대경로 그대로 넣어줘도 됩니다.
2. ACCOUNTS 코드 추가 혹은 기존 코드 삭제하기
만일 지금 여러분이 사용하고 있는 레이아웃이 XE에서 제공하는 XE Official Ver.2라면
layout.html을 열어 아래의 코드 부분을 모두 삭제합니다. 지금 추가하려는 코드는 아래 그림과 같이
계정 및 언어설정을 표시하는 부분입니다.
<ul class="account">
<li class="log">
<!--@if($is_logged)-->
<a href="./{getUrl("act','dispMemberLogout')}"><img src="./img/buttonLogout.gif" width="33" height="5" alt="LOGOUT" /></a>
<!--@else-->
<a href="./#loginWindow" onclick="jQuery('#loginWindow').css('display','block');" accesskey="L"><img src="./img/buttonLogin.gif" width="25" height="5" alt="LOGIN" /></a>
<!--@end-->
</li>
<!--@if(!$is_logged)-->
<li class="register"><a href="./{getUrl("act','dispMemberSignUpForm')}"><span>Register</span></a></li>
<!--@else-->
<li class="profile">
<button type="button" onclick="jQuery('#memberProfile').toggleClass('active');"><span>Profile</span></button>
<!-- memberProfile -->
<div id="memberProfile" class="memberProfile">
<!-- class="memberProfile" | class="memberProfile active" -->
<button type="button" class="close" onclick="jQuery('#memberProfile').toggleClass('active');" accesskey="X"><span>Close profile layer</span></button>
<h2 class="authorName">{$logged_info->nick_name}</h2>
<ul>
<!--@foreach($logged_info->menu_list as $key => $val)-->
<li><a href="./{getUrl("act',$key,'member_srl','')}">{Context::getLang($val)}</a></li>
<!--@end-->
</ul>
<button type="button" class="close" onclick="jQuery('#memberProfile').toggleClass('active');" accesskey="X"><span>Close profile layer</span></button>
</div>
<!-- /memberProfile -->
</li>
<!--@end-->
<li class="language">
<!-- class="language" | class="language open" -->
<em class="{$lang_type}"><span>{$lang_supported[$lang_type]}</span></em>
<button type="button" class="sLanguage" onclick="jQuery('.language').toggleClass('open'); return false;"><span>Select Language</span></button>
<ul class="languageList">
<!--@foreach($lang_supported as $key => $val)--><!--@if($key!= $lang_type)-->
<li class="{$key}"><button type="button" onclick="doChangeLangType('{$key}');return false;"><span>{$val}</span></button></li>
<!--@end--><!--@end-->
</ul>
</li>
</ul>
이렇게 삭제한 위치에 아래의 코드를 대신 넣어줍니다. PremiumXE에서 새로 코딩한 코드입니다. 만일 위의 코드가 없는 다른 레이아웃이었다면 아래의 코드를 공간이 확보된 곳에 넣어줍니다(조금 긴 위젯코드를 넣는다고 생각하세요).
<!--계정/다국어 설정 시작-->
<ul class="account">
<li class="log">
<!--@if($is_logged)-->
<a href="./{getUrl("act','dispMemberLogout')}"><img src="./packages/basic_plugin/images/buttonLogout.gif" width="33" height="5" alt="LOGOUT" /></a>
<!--@else-->
<a href="./#loginWindow" onclick="jQuery('#loginWindow').css('display','block');" accesskey="L"><img src="./packages/basic_plugin/images/buttonLogin.gif" width="25" height="5" alt="LOGIN" /></a>
<!--@end-->
</li>
<!--@if(!$is_logged)-->
<li class="register"><a href="./{getUrl("act','dispMemberSignUpForm')}"><span>Register</span></a></li>
<!--@else-->
<li class="profile">
<button type="button" onclick="jQuery('#memberProfile').toggleClass('active');"><span>Profile</span></button>
<!-- memberProfile -->
<div id="memberProfile" class="memberProfile">
<!-- class="memberProfile" | class="memberProfile active" -->
<button type="button" class="close" onclick="jQuery('#memberProfile').toggleClass('active');" accesskey="X"><span>Close profile layer</span></button>
<h2 class="authorName">{$logged_info->nick_name}</h2>
<ul>
<!--@foreach($logged_info->menu_list as $key => $val)-->
<li><a href="./{getUrl("act',$key,'member_srl','')}">{Context::getLang($val)}</a></li>
<!--@end-->
</ul>
<button type="button" class="close" onclick="jQuery('#memberProfile').toggleClass('active');" accesskey="X"><span>Close profile layer</span></button>
</div>
<!-- /memberProfile -->
</li>
<!--@end-->
<li class="language">
<!-- class="language" | class="language open" -->
<em class="{$lang_type}"><span>{$lang_supported[$lang_type]}</span></em>
<button type="button" class="sLanguage" onclick="jQuery('.language').toggleClass('open'); return false;"><span>Select Language</span></button>
<ul class="languageList">
<!--@foreach($lang_supported as $key => $val)--><!--@if($key!= $lang_type)-->
<li class="{$key}"><button type="button" onclick="doChangeLangType('{$key}');return false;"><span>{$val}</span></button></li>
<!--@end--><!--@end-->
</ul>
</li>
</ul>
<!--계정/다국어 설정 끝-->
이제
layout.html의 가장 하단에 아래의 코드를 넣어줍니다. 이 코드는 어차피 숨어있는 코드이기 때문에 위치와 상관없이 알아보기 쉽도록 코드의 맨 마지막 부분에 넣어줍니다. 여러분의 layout.html의 하단부에 이미 이런 코드가 있다면 그것을 모두 삭제한 후에 아래 코드를 넣어주세요.
<!--AJAX 로그인 창 시작-->
<!--@if(!$is_logged)-->
{@ $member_config = MemberModel::getMemberConfig(); }
<!--%import("packages/basic_plugin/filter/login.xml")-->
<!--@if($member_config->enable_openid=='Y')--><!--%import("packages/basic_plugin/filter/openid_login.xml")--><!--@end-->
<!-- loginWindow -->
<div id="loginWindow" class="loginWindow">
<!-- class="loginWindow" | class="loginWindow open" -->
<span class="modalWindow"></span>
<div id="loginLayer" class="loginLayer loginTypeA">
<!-- class="loginLayer loginTypeA" | class="loginLayer loginTypeB" -->
<button type="button" class="close" onclick="document.getElementById('loginWindow').style.display='none'" accesskey="X"><span>Close Login Layer</span></button>
<form action="" method="post" id="commonLogin" onsubmit="return procFilter(this, login)">
<input name="user_id" type="text" class="id" id="uid" value="" class="id" onFocus="this.style.backgroundImage='none';" />
<input name="password" type="password" class="password" id="upw" onFocus="this.style.backgroundImage='none';" /> <input name="" type="submit" value=" " class="submit" />
<div class="saveIDinfo">
<input name="keep_signed" type="checkbox" id="keepA" value="Y" class="inputCheck" onclick="if(this.checked) return confirm('{$lang->about_keep_signed}');"/>
<label for="keepA">{$lang->keep_signed}</label>
</div>
</form>
<!--@if($member_config->enable_openid=='Y')-->
<hr noshade="noshade" width="100%" color="#e8e8e8" size="1" />
<div class="clear"></div>
<div class="oid_desc"><img src="./packages/basic_plugin/images/oid_desc.gif" alt="" /></div>
<div class="form_field">
<form action="./" method="post" id="openidLogin" onsubmit="return procFilter(this, openid_login)">
<input name="openid" type="text" class="oid" id="oid" onFocus="this.style.backgroundImage='none';" />
<input name="" type="submit" value=" " class="submit_oid" />
</form>
</div>
<!--@end-->
<ul class="help">
<li class="join"><a href="./{getUrl("act','dispMemberSignUpForm')}">{$lang->cmd_signup}</a></li>
<li class="find"><a href="./{getUrl("act','dispMemberFindAccount')}">{$lang->cmd_find_member_account}</a></li>
<li class="find"><a href="./{getUrl("act','dispMemberResendAuthMail')}">{$lang->cmd_resend_auth_mail}</a></li>
</ul>
<button type="button" class="close" onclick="document.getElementById('loginWindow').style.display='none'" accesskey="X"><span>Close Login Layer</span></button>
</div>
</div>
<!-- /loginWindow -->
<!--@end-->
<!--AJAX 로그인 창 끝-->
지금까지의 과정이 모두 잘 되었다면 이제 여러분의 페이지에는 새로 적용 된
계정 및 언어선택 부분이 출력됩니다. 앞으로 여러분이 이 부분의 디자인을 고치고 싶다면 packages/basic_plugin 폴더 속의 파일들만 수정하면 됩니다. 또한 수정된 파일들을 다른 레이아웃에도 적용하고 싶다면 packages/basic_plugin 폴더를 다른 레이아웃 폴더속에 복사하여 위의 코드 추가/삭제 과정을 거쳐 쉽게 사용할수 있습니다.
3. 통합 검색창 코드 추가하기
아래 그림과 같이 통합 검색창 역시 플러그인으로 분리시켜 놓았기 때문에 쉽게 디자인을 변경 할 수 있고 이것을 여러 레이아웃에 손쉽게 붙여 넣을 수 있습니다. 기존의 통합 검색창 코드 부분을 삭제하고 아래의 코드를 대신 넣어보세요. 깔끔한 통합 검색창이 쉽게 추가 됩니다.
<!--통합 검색창 시작-->
<div id="searchLanguage">
<form action="{getUrl()}" method="post" id="isSearch">
<input type="hidden" name="mid" value="{$mid}" />
<input type="hidden" name="act" value="IS" />
<input type="hidden" name="search_target" value="title_content" />
<input name="is_keyword" type="text" class="inputText" title="keyword" />
<input type="image" src="./packages/basic_plugin/images/buttonSearch.gif" alt="{$lang->cmd_search}" class="submit" />
</form>
</div>
<!--통합 검색창 끝-->
이 통합 검색창은 부유 엘리먼트 즉
position:absolute를 사용합니다. 따라서 이 코드를 감싸고 있는 DIV의 position값은 꼭
relative로 설정을 해주세요.
- 이 플러그인은 XE의 모든 버전에서 작동합니다
- 이 플러그인은 IE6/7/8, 가장 최신의 FireFox, Opera 그리고 Safari에서 테스트 되었습니다
- 이 플러그인에 사용된 코드들은 use_this_code.html에도 기재되어 있습니다
- Platinum Membership 전용 추가 악세사리
꾸벅..