zb5beta - 레이아웃 스킨 자료실
안녕하세요. 잠순이 입니다. 요즘 홈페이지 작업을 좀 쉬다가 오늘 대충 마무리 지었습니다. 현재 제 홈페이지에 적용한 아이프레임이 적용된 레이아웃 사용 예제를 올려드립니다. 기본 테마는 예전과 같은 블루 스카이와 그린입니다.
주의사항
해당 파일이 홈페이지에 존재하는 경우 모두 백업을 받아놓으시는게 피해를 최소화 하는 방법이며, 문제가 생겼을때 다시 복구할 수 있는 방법입니다. 모든 파일은 zb5.beta.0.0.5 기준입니다.
흠..설명 적어넣다가 아무생각없이 중간 저장한다는 것이....돌아가기 눌러버렸어요. 가장 기본적인 설명을 하자면...원래 기본은http://www.jamsun2.com/zb5/?sid=15 입니다. 이 방법으로도 불러지며 예전 모습으로 불러집니다. 그리고 http://www.jamsun2.com/zb5/popup.php?sid=15 는 레이아웃을 제거하고 내용(여기서는 페이지입니다.)만 불러집니다.
http://www.jamsun2.com/zb5/?sid=15&href=./popup.php?id=17 이 방법은 링크를 사용하는 것인데 타겟을 지정하지 않아서 기존의 http://www.jamsun2.com/zb5/?sid=15 와 동일하게 나옵니다.
http://www.jamsun2.com/zb5/?sid=15&target=content 이렇게 부르면 레이아웃은 http://www.jamsun2.com/zb5/?sid=15의 레이아웃을 불러주고 본문 내용은 아이프레임을 불러주지만 아이프레임 내용은 없습니다.
http://www.jamsun2.com/zb5/?sid=15&href=./popup.php?sid=17&target=content 이렇게 부르면 레이아웃은 sid=15 의 레이아웃을 불러주고 본문에 아이프레임을 만든다음 sid=17의 내용을 아이프레임에 채워줍니다.
http://www.jamsun2.com/zb5/?sid=3006&href=./popup.php?sid=17&target=content 이렇게 부르면 레이아웃은 sid=3006 의 레이아웃을 불러주고 본문에 아이프레임을 만든다음 sid=17의 내용을 아이프레임에 채워줍니다.
여기서 알 수 있듯이 target=content를 적용해주면 원래 가져오던 내용에서 레이아웃만을 가져오고 내용은 가져오지 않는 것입니다. 그러므로 레이아웃과 본문이 서로 독립적으로 동작 할 수 있는 것입니다.
설명 1: index.html
홈페이지의 최상위 폴더[/public_html/]에 위치하며 구조는
<html>
<head>
<title>잠순이 홈페이지입니다.</title>
</head>
<script>document.location="http://www.jamsun2.com/zb5/?sid=15&href=./popup.php?sid=15&target=content";</script>
</html>
입니다.
이 부분은 스크립트를 이용해서 /zb5/index.php를 불러주며 이때 아이프레임을 사용하는 레이아웃을 불러주고 아이프레임을 채워줍니다. 여기서 sid는 첫페이지 node_srl을 의미하며 나머지는 아이프레임 변수입니다. 본인의 홈페잊 주소에 맞춰서 변경하시고....뒤쪽 아이프레임 변수[&href=./popup.php?sid=15&target=content]를 주지 않으면 기존의 아이프레임이 없는 레이아웃을 보실 수 있습니다.
설명 2: zb5 폴더
홈페이지에서 zb5가 설치된 폴더가 있을 것입니다. 그 폴더를 기준으로 파일들을 넣어놓았습니다.
설명 3: /zb5/popup.php
홈페이지에서 모듈이나 페이지를 레이아웃 없이 불러올때 사용합니다.
설명 4: /zb5/classes/zSvc.class.php
홈페이지가 불려질때 변수를 처리하는 일반 클래스입니다. 여기서 수정된 부분이 너무 많아서....쩝....차후 한가할때 설명드리겠습니다.
설명 5: /zb5/classes/zSearch.class.php
달력모듈중 코멘트 달력을 사용할때 코멘트를 일괄적으로 불러오는 함수가 들어있습니다.
function searchComment($list_cnt, $page_cnt, $cur_page = null, $sid = null) {
$oDB = &zDB::instance();
$table_list = 'comment';
$member_srl = $oDB->addquotes($this->member_srl);
$module_srl = $oDB->addquotes($this->module_srl);
$serial_srl = $oDB->addquotes($this->serial_srl);
if($this->module_srl_list) $module_srl_list = implode(",",$this->module_srl_list);
if($module_srl) $cond_list[] = "module_srl = '{$module_srl}'";
elseif(count($module_srl_list)) $cond_list[] = "module_srl in ({$module_srl_list})";
if($member_srl) $cond_list[] = "member_srl='{$member_srl}'";
if ($this->archive) {
$archive = $oDB->addquotes($this->archive);
$cond_list[] = "regdate like '%{$archive}%'";
}
$total_articles = $oDB->getCount($table_list,$cond_list);
$t_obj['article_srl'] = null;
$t_obj['mid'] = null;
$t_obj['serial_srl'] = $this->serial_srl;
if($sid) $t_obj['sid'] = $sid;
elseif($this->sid) $t_obj['sid'] = $this->sid;
$oPageNav = Zeroboard::getPageNav($total_articles, $list_cnt, $page_cnt, $cur_page, $t_obj);
if($oPageNav->start_cnt<0) $oPageNav->start_cnt = 0;
$oDB->select('*','comment', $cond_list, 'modify_order', 0, 20);
while($tmp = $oDB->fetch()) {
$tmp->url = zUrl::getSourceUrl($tmp->article_srl);
$tmp->title = strip_tags($tmp->article);
$output->article_list[] = $tmp;
}
$output->total_articles = $total_articles;
$output->oPageNav = $oPageNav;
return $output;
}
설명 6: /zb5/common/tpl/iframe.tpl
아이프레임을 담고있는 파일입니다. 아이프레임을 레이아웃에서 사용할때, 아이프레임을 $this->content에 불러줍니다.
설명 7: /zb5/common/js/x.js
아이프레임이 없을때 아이프레임을 생성해주고, 아이프레임의 높이를 조절하는 부분이 들어있습니다.
레이아웃에서 아이프레임으로 링크를 사용할때는 xlink('content','링크주소')함수를 사용합니다.
function xlink(E,URL)
{
var div_parent=xGetElementById(E);
if(!xGetElementById('iframe'))
{
var div_child=document.createElement("iframe");
div_child.id = "iframe";
div_child.name = "iframe";
div_child.style.width = div_parent.offsetWidth;
div_child.style.height = xClientHeight();
div_child.style.display = 'block';
div_parent.innerHTML = "";
div_child.frameBorder='0';
div_child.attachEvent("onload",xIFrameSize);
div_parent.appendChild(div_child);
}
else
{
var div_child = xGetElementById('iframe');
div_child.style.width = div_parent.offsetWidth;
}
div_child.src = URL;
}
function xIFrameSize () {
try
{
var iframeElement = xGetElementById('iframe');
if(iframeElement==null) return;
if (iframeElement.contentDocument && iframeElement.Document.body.offsetHeight) //ns6 syntax
{
iframeElement.style.height = iframeElement.Document.body.offsetHeight;
}
else if (iframeElement.Document && iframeElement.Document.body.scrollHeight+50+'px') //ie5+ syntax
{
iframeElement.style.height = iframeElement.Document.body.scrollHeight+50+'px';
}else
{
iframeElement.style.height = 1000+'px';
}
}catch(e) {}
}
설명 8: /zb5/common/js/svc.js
글쓰기를 완료한 후 돌아가는 페이지를 수정했습니다. 원래는 ./?sid= 이런식이었는데 아이프레임에서 뜨는것을 기준으로 해서 ./popup.php?sid= 이런식으로 변경했습니다.
function svc_write_proc(ret_obj, response_tags) {
var sid = ret_obj['sid'];
var article_srl = ret_obj['article_srl'];
check_svc_write = false;
var href = "./popup.php?sid="+sid+"&article_srl="+article_srl;
location.href = href;
}
설명 9: /zb5/layout/chon_site/
아이프레임을 사용하기위한 예제 레이아웃입니다. 메뉴쪽에 링크 부분과 서브메뉴쪽 링크 부분이 메뉴일때만 수정되어있습니다. 그리고 $this->content 이 부분에 id를 부여하기 위해 <div id=content>로 감싸줬습니다.
layout.tpl에서
...
{foreach from=$menu_list.main_menu key=node_srl item=obj name=main_menu}
{if $smarty.foreach.main_menu.iteration ne '1'}
{if $obj.info.selected}
{assign var=menu_1st_title value=$obj.info.node_name}
{assign var=menu_2nd value=$obj.list}
{assign var=item_class value="i_se"}
{assign var=item_script value=""}
{else}
{assign var=item_class value="i_nm"}
{assign var=item_script value="onmouseover="this.className = 'item i_ov';" onmouseout="this.className = 'item i_nm';""}
{/if}
{if $obj.info.menu_type eq 1}
{assign var=item_href value="window.open('"|cat:$obj.info.link_url|cat:"','_blank')"}
{elseif $obj.info.menu_type eq 2}
{assign var=item_href value="location.href='./?sid="|cat:$obj.info.page_path|cat:"'"}
{else}
{assign var=item_href value="location.href='./?sid="|cat:$obj.info.node_srl|cat:"&href=./popup.php?sid="|cat:$obj.info.node_srl|cat:"&target=content'"}
{/if}
<div class="a_center">
<div class="item {$item_class}" onclick="{$item_href}" {$item_script}>{$obj.info.node_name}</div>
</div>
{/if}
{/foreach}
...
{foreach from=$menu_2nd key=node_srl item=obj name=menu_2nd}
{if $obj.info.selected}
{assign var=item_class value="class="i_se""}
{else}
{assign var=item_class value=""}
{/if}
{if $obj.info.menu_type eq 1}
{assign var=target value="target="_blank""}
{assign var=href value=$obj.info.link_url}
{else}
{assign var=target value=""}
{assign var=href value="./?sid="|cat:$obj.info.node_srl|cat:"&href=./popup.php?sid="|cat:$obj.info.node_srl|cat:"&target=content"}
{/if}
...
<td valign="top" class="l_center" >
<div id="content">
{$content}
</div>
</td>
설명 10: /zb5/modules/blog/, /zb5/modules/board/
변경된 부분이 거의없는데..블로그 모듈은 방명록 모둘이며 히스토리 부분을 변경했습니다. board모듈은 관리자용 모듈로 변경한 모듈에 히스토리 부분하고 전체 보기를 수정했습니다.
list.tpl 에서
...
{foreach from=$location_history key=key item=obj name=location_history}
{if !$smarty.foreach.location_history.last}
<a href="./popup.php?sid={$obj.node_srl}" class="fc_01">{$obj.node_name}</a> >
{else}
<a href="./popup.php?sid={$obj.node_srl}" class="fc_01 bold">{$obj.node_name}</a>
{/if}
{/foreach}
...
<td class="button_L"><button class="viewall" onClick="location.href='./popup.php?sid={$sid}'"></button></td>
설명 11: /zb5/modules/board_calendar/
일정관리 모듈입니다. 제가 뼈대 만들고 피터님이 완성해주셨죠. 여기서도 일부를 아이프레임에 맞게 수정했습니다.
설명 12: /zb5/modules/board_gallary_pop/
원래는 소마세월님의 갤러리 모듈입니다. 이 모듈을 팝업 갤러리 모듈로 변경했으며, 아이프레임에 맞게 히스토리와 전체보기를 수정했습니다.
설명 13: /zb5/plugins/
calendar : 레이아웃 삽입용 달력 플러그인
link_list : 레이아웃 삽입용 링크 플러그인
multi_get_comment : 레이아웃 삽입용 다중 코멘트 플러그인
nebi_status : 레이아웃 삽입용 홈페이지 현황.
get_articles: 페이지 삽입용 방명록 최근게시물
multi_get_gallery: 페이지 삽입용 갤러리 최근게시물
soma_get_articles:페이지 삽입용 갤러리,게시판 최근게시물
수정사항
2007/03/22 08:44 레이아웃에서 내 정보보기와 메시지 보기에서 상대 주소를 가져오는 관계로 잘 안보여서 그냥 절대 주소를 써줬습니다.
<tr>
<td colspan=3 height=39 width=907 background=./layout/blooz_site/theme/gray/images//bottom_grad.gif align=right valign=middle><img src=./layout/blooz_site/theme/gray/images//copyright_zx.gif> <a href='http://blzlife.net' target=_blank onfocus='this.blur()'><img src=./layout/blooz_site/theme/gray/images//copyright_blooz.gif border=0></a>Copyright (c) 2006 MADE Electronics. All rights reserved.</td>
</td>
</tr>
</table>
<!-- END CONTENT -->
</td>
<td>오른쪽 부분입니다.</td>
<td class=main_right_bg width=18></td>


모르겠당 ㅠ.ㅠ