안녕하세요. 참 오랜만이조. 그동안 참 바빴습니다.
쪽지로 저에게 물어보신분이 있어서 이곳에 그 해답을 남깁니다.
참, 지난 연재내용보니 너무 한심하네요..ㅎㅎ 이제보니 완전 허접티 팍팍 내고 있더군요..ㅋㅋ;;

이번 강죄의 목적은 메뉴1 | 메뉴2 | 메뉴3 | 메뉴4
이렇게 네가지메뉴가 있는데 이중 한가지를 클릭하고 그 하단에 테이블로 된 디자인이
나오게 되며, 나머지 세가지는 감춰지고 실시간으로 나머지를 클릭하였을시 나머지는
감춰지는 그런 방식을 설명 드리려 합니다.

function ChangeLayer(name,id,su) {

var layer, layer2;
    var cnt;
    for (cnt = 1; cnt <= su; cnt++) {
layer = document.getElementById(name+cnt);
layer.style.display = (layer == (layer2=document.getElementById(name+id)))? "block" : "none";
    }
}
실제 이부분은 이곳의 모 스킨으로 부터 따온 소스를 원하는방식으로 변형시켜 본것입니다.
본 소스가 어느분것인지 정확히 기억이 나지를 않는군요.
본 소스는....

<script language='javascript'>
<!--
function toggleLayer(name, id) {
var layer = document.getElementById(name+id);
layer.style.display = (layer.style.display == "none")? "block" : "none";
}
//-->
</script>

이렇습니다. 이것은
메뉴1 => 클릭시 아래 테이블이 보여지고 말고만 결정 합니다.

그러나 위에 변형된 소스의 경우는 몇가지 메뉴가 번갈아 가며 선택된것만 보여주게 됩니다.
두가지르 적절히 혼용하신다면 여러가지 응용이 가능할 것입니다.

그럼 이제부터 블록을 설정해 보도록 하조.

<A href="javascript:toggleLayer('Comment', '<?=$list[$i][wr_id]?>')" onfocus='blur()'>덧글쓰기</a>
이부분은 응용된 리스트 스킨의 일부입니다. 무엇에 쓰이는지는 짐작이 가실것입니다.
맞습니다. 덧글쓰기 부분이 보여지고 말고를 결정하는 것이조. 그러므로 처음에는 보여지지 않다가
"덧글쓰기" 를 클릭하면 해당 부분이 보여지게 됩니다.

<DIV id=Comment<?=$list[$i][wr_id]?>' style="DISPLAY: none">
글쓰기폼
</DIV>

이부분이 보여지고 말고 하는 부분인데요. $list[$i][wr_id] 부분은 프로그램 소스상 게시물 번호조. 예를 들어 두번째 글이라면 wr_id 는 2이되면 이것은 다시 풀어 되어 Comment2 이 됩니다. 이렇게 출력된 것을 위에 "덧글보기" 링크에서 위 자바스크립트 함수를 호출 하여 <DIV></DIV> 부분을 보여주거나 말거나를 결정하게 됩니다.

자 . 지금까지 보신 내용을 이해 하셨다면, 다음 제가 가장 처음에 올린 변형 소스를 이해 하시는데에 어려움이 없으실것입니다. 만일 부족하다면 다음 기회에 설명드리겠습니다.

P.S 하도 타자를 많이 치다보니 근 일주일동안 손목에 엄청난 무리가 가서 통증이 심각하네요.
더쓰고 싶은데 손목이 쓰지 말라고 강요하네요.ㅡ.;;

[이 게시물은 홍석명님에 의해 2004-03-30 09:23:18 PHP Forum(으)로 부터 이동됨]

[이 게시물은 관리자님에 의해 2004-05-12 09:08:32 연재(으)로 부터 이동됨]