Programming,  컴퓨터와 인터넷

[제로보드] 브라우저 호환성 높이기-레이어 메뉴

제로보드를 이곳저곳에 많이 쓰고 있는 편인데, 불여우(Mozilla Firefox)를 이용해 접근하면 사용자 닉네임을 클릭해서 홈페이지, 메일 보내기, 회원정보 보기, 이름으로 검색 등이 나오는 레이어 메뉴 기능이 동작하질 않는다.

이 문제는 2가지가 문제인데, 1) 사용자 닉네임 위로 마우스 포인터를 옮겼을 때, 포인터 모양이 변하지 않는 점, 2) 레이어를 만드는 자바스크립트의 호환성 문제이다.

제로보드의 버전은 최신인 4.1 pl7이다. http://nzeo.com 에서 받을 수 있다.

다음 파일들을 수정한다.
view.php
zboard.php
lib.php
script/script_zbLayer.php
include/list_check_php

* // modified by terzeron으로 주석처리하고 변경한 부분, 맥락을 확인할 수 있도록 여러 줄을 인용하지만 변경되는 것은 보통 한두 줄에 불과하다.

1. view.php

1) “cursor:hand”를 검색해서 이전글과 다음글 링크에 나오는 사용자 닉네임 부분의 마우스 이벤트 핸들러 함수를 약간 변경한다.

// 이전글 정리
if($data[prev_no]&&!$setup[use_alllist]) {
$prev_comment_num=”[“.$prev_data[total_comment].”]”; // 간단한 답글 수
if($prev_data[total_comment]==0) $prev_comment_num=””;
$a_prev=”<a onfocus=blur() xhref='”.$target.”?”.$href.$sort.”&no=$data[prev_no]’>”;
$prev_subject=$prev_data[subject]=stripslashes($prev_data[subject]).” “.$prev_comment_num;
$prev_name=$prev_data[name]=stripslashes($prev_data[name]);
$prev_data[email]=stripslashes($prev_data[email]);$temp_name = get_private_icon($prev_data[ismember], “2”);
if($temp_name) $prev_name=”<img xsrc=’$temp_name’ border=0 align=absmiddle>”;

if($setup[use_formmail]&&check_zbLayer($prev_data)) {
// modified by terzeron
//$prev_name = “<span $show_ip onMousedown=”ZB_layerAction(‘zbLayer$_zbCheckNum’, ‘visible’)” style=cursor:hand>$prev_name</span>”;
$prev_name = “<span $show_ip onMousedown=”ZB_layerAction(‘zbLayer$_zbCheckNum’, ‘visible’)” onMouseout=”this.blur();” style=cursor: pointer>$prev_name</span>”;
} else {
if($prev_data[ismember]) $prev_name=”<a onfocus=blur() xhref=”javascript:void(window.open(‘view_info.php?id=$id&member_no=$prev_data[ismember]’, ‘mailform’, ‘width=400, height=510, statusbar=no, scrollbars=
yes, toolbar=no’))” $show_ip>$prev_name</a>”;
else $prev_name=”<div $show_ip>$prev_name</div>”;
}

2) 다음글도 마찬가지 방법으로

// 다음글 정리
if($data[next_no]&&!$setup[use_alllist]) {
$a_next=”<a onfocus=blur() xhref='”.$target.”?”.$href.$sort.”&no=$data[next_no]’>”;
$next_comment_num=”[“.$next_data[total_comment].”]”; // 간단한 답글 수
if($next_data[total_comment]==0) $next_comment_num=””;
$next_subject=$next_data[subject]=stripslashes($next_data[subject]).” “.$next_comment_num;
$next_name=$next_data[name]=stripslashes($next_data[name]);
$next_data[email]=stripslashes($next_data[email]);$temp_name = get_private_icon($next_data[ismember], “2”);
if($temp_name) $next_name=”<img xsrc=’$temp_name’ border=0 align=absmiddle>”;

if($setup[use_formmail]&&check_zbLayer($next_data)) {
// modified by terzeron
//$next_name = “<span $show_ip onMousedown=”ZB_layerAction(‘zbLayer$_zbCheckNum’, ‘visible’)” style=cursor:hand>$next_name</span>”;
$next_name = “<span $show_ip onMousedown=”ZB_layerAction(‘zbLayer$_zbCheckNum’, ‘visible’)” onMouseout=”this.blur();” style=cursor:pointer>$next_name</span>”;
} else {
if($next_data[ismember]) $next_name=”<a onfocus=blur() xhref=”javascript:void(window.open(‘view_info.php?id=$id&member_no=$next_data[ismember]’, ‘mailform’, ‘width=400, height=510, statusbar=no, scrollbars=
yes, toolbar=no’))” $show_ip>$next_name</a>”;
else $next_name=”<div $show_ip>$next_name</div>”;
}

3) 같은 검색어로 검색하면 커멘트 출력 부분에도 같은 검색어가 보인다. 커멘트 부분에 나오는 사용자 닉네임도 마찬가지이다.

if($setup[use_formmail]&&check_zbLayer($c_data)) {
// modified by terzeron
//$comment_name = “<span $show_ip onMousedown=”ZB_layerAction(‘zbLayer$_zbCheckNum’, ‘visible’)” style=cursor:hand>$comment_name</span>”;
$comment_name = “<span $show_ip onMousedown=”ZB_layerAction(‘zbLayer$_zbCheckNum’, ‘visible’)” onMouseout=”this.blur();” style=cursor: pointer>$comment_name</span>”;
} else {
if($c_data[ismember]) $comment_name=”<a onfocus=blur() xhref=”javascript:void(window.open(‘view_info.php?id=$id&member_no=$c_data[ismember]’, ‘mailform’, ‘width=400, height=510, statusbar=no, scrollbars
=yes, toolbar=no’))” $show_ip>$comment_name</a>”;
else $comment_name=”<div $show_ip>$comment_name</div>”;
}

4) 마지막 출력 부분에 레이어 스크립트 코드 출력하고 레이어의 스타일을 추가해준다. div_style_msg는 lib.php에서 만들어지게 된다.

// layer 출력
if($zbLayer&&!$_view_included) {
$_skinTimeStart = getmicrotime();
echo ”
<script>”.$zbLayer.”
</script>”;
// modified by terzeron
echo ”
$div_style_msg
“;
$_skinTime += getmicrotime()-$_skinTimeStart;
unset($zbLayer);
}

2. zboard.php

1) 마지막 출력 부분에서 레이어 스크립트 코드 출력하는 부분 뒷쪽에 스타일도 출력되도록 추가한다. 바로 위 항목과 비슷하다.

// 마무리 부분 출력하는 부분;;
$_skinTimeStart = getmicrotime();
include $dir.”/list_foot.php”;
$_skinTime += getmicrotime()-$_skinTimeStart;if($zbLayer) {
$_skinTimeStart = getmicrotime();
echo ”
<script>”.$zbLayer.”
</script>”;
// modified by terzeron
echo ”
$div_style_msg
“;
unset($zbLayer);
$_skinTime += getmicrotime()-$_skinTimeStart;
}

3. lib.php

1) 레이어 관련 자바스크립트 함수 정의 부분에서 div_style_msg 변수를 global로 선언해야 zboard.php와 view.php에서 이 변수를 사용할 수 있다.

// zbLayer 출력
function check_zbLayer($data) {
global $zbLayer, $setup, $member, $is_admin, $id, $_zbCheckNum;
// modified by terzeron
global $div_style_msg;

2) 같은 함수 끝 부분에서 div_style_msg 문자열 변수를 만든다. 불여우에서는 IE와는 달리 레이어 메뉴가 유지되지 않거나 감추기가 잘 안 되는 문제가 있어서 레이어 메뉴마다 보임 상태를 변경해주는 마우스 이벤트 핸들러 함수를 달아줘야 한다.

$zbLayer = $zbLayer.”
print_ZBlayer(‘zbLayer$_zbCheckNum’, ‘$data[homepage]’, ‘$data[email]’, ‘$data[ismember]’, ‘$id’, ‘$data[name]’, ‘$traceID’, ‘$traceType’, ‘$isAdmin’, ‘$isMember’);”;
// modified by terzeron
$div_style_msg = $div_style_msg . ”
<div id=zbLayer” . $_zbCheckNum . ” style=”z-index: 10; position: absolute; width: 100; visibility: hidden; border-style: solid; border-color: 444444; border-width: 1px; left: 0; top: 0;” onmouseover=show_layer(‘zbLayer” . $_zbCheckNum . “‘, ‘visible’); onmouseout=show_layer(‘zbLayer” . $_zbCheckNum . “‘, ‘hidden’);></div>”;

4. script/script_zbLayer.php

1) IE 이외의 브라우저들을 위한 호환성 지원 코드 때문에 변경할 부분이 많아서 고쳐야 할 부분을 따로 표시하지 않았다.

<script language=’JavaScript’>
var select_obj;
var x, y;n6 = (document.getElementById && !document.all);
ie = (document.all);
x = 0;
y = 0;

if (n6)
document.onmousemove=mouseMoveHook;

function mouseMoveHook(event) {
x = event.pageX;
y = event.pageY;
}

function show_layer(name, status) {
document.getElementById(name).style.visibility = status;
}

function ZB_layerAction(name,status) {
//var obj=document.all[name];
var obj = document.getElementById(name);
var pos_x, pos_y;
if (ie) {
pos_x = event.clientX;
pos_y = event.clientY;
} else {
pos_x = x;
pos_y = y;
}

if (ie) {
obj.style.posLeft= pos_x – 13;
obj.style.posTop= pos_y – 12;
} else {
obj.style.left = pos_x – 13;
obj.style.top = pos_y – 12;
}

if(status==’visible’) {
if(select_obj) {
select_obj.style.visibility=’hidden’;
select_obj=null;
}
select_obj=obj;
}else{
select_obj=null;
}
obj.style.visibility=status;
}

5. include/list_check.php

1) zboard.php에서 게시물 목록을 출력하기 전에 글 제목, 작성자, 글 번호 등의 정보를 수집하는데 이 때, 작성한 사용자의 닉네임을 위한 HTML 코드를 작성하는 부분에서도 마우스 포인터 핸들링 함수를 변경할 필요가 있다.

// 폼메일을 사용하고 관련메뉴가 생성이 되면 레이어오픈
if($_zbCount&&$setup[use_formmail]) {
// modified by terzeron
//$name = “<span onMousedown=”ZB_layerAction(‘zbLayer$_zbCheckNum’,’visible’)” style=cursor:hand>$name</span>”;
$name = “<span onMousedown=”ZB_layerAction(‘zbLayer$_zbCheckNum’,’visible’)” onMouseout=”this.blur();” style=’cursor:pointer’>$name</span>”;

다음 사이트에서 불여우로 확인할 수 있다.
http://lifephoto.net

댓글 2개

  • June

    좋은 팁 감사합니다. ^^

    다만 제로보드 4.1 pl8(현 최신)을 사용할 경우 올려주신 스크립트를 붙여넣기 할 경우 따옴표들 때문에 에러가 생깁니다. “”는 모두 “로, `’는 모두 ‘로 바꿔줘야 잘 돌아가네요.

    그리고 마지막 list_check.php에서도
    $name = “$name”;
    처럼 \ 두개가 들어가지 않았더니 에러가 생겼습니다.

    위 두가지만 고쳐주시면 제로보드 최신 업데이트에서도 잘 돌아가네요. 다시 한번 감사드립니다.

답글 남기기