ajax탭 적용시 div 목록이 아래로 늘어나는 현상 수정하기

작성자	yerangman
분 류	설정
첨부#1	jurrrrr.jpg (91KB) (Down:5)

ㆍ조회: 369 ㆍ추천: 0

ㆍ작성일: 2010년 4월 24일 토요일

“ ajax탭 적용시 div 목록이 아래로 늘어나는 현상 수정하기 ”

관련 자료를 찾던 중 유용한 내용이 질문응답 페이지에 묻혀 있어
추가로 보완, 수정한 후 많은 분들이 사용할 수 있도록 팁에 올립니다.
아래는 원문 및 해결 방법입니다.

먼저 테크노트 메인에 있는 ajax_imgarray(테크노트 적용 홈페이지: 추천순, 최근등록순, 쇼핑몰) 처럼 하려면
아래에 부리부리님이 올리신 관련 소스가 있습니다.

http://www.technote.co.kr/php/technote1/board.php?board=memberqna&command=body&no=14317&search=%C5%D7%C5%A9%B3%EB%C6%AE+%B8%DE%C0%CE&shwhere=subject

첨부 자료가 텍스트 파일이므로 클릭하면 새창에서 그대로 실행됩니다.
새창에 마우스를 오른버튼으로 눌러 소스보기로 해서 열리는 창의 내용을 복사해 받으면 됩니다.

이 자료를 적용해 실행할 때 첨부 이미지처럼 ajax 탭 화면에서 div가 하단으로 나열되는 현상이 나타납니다.
마우스를 탭부분에 가져가면 정상으로 돌아오는데, 이 부분을 해결하려면 소스를 수정해야 합니다.

자세한 내용은 아래 소스를 공개하니 그대로 활용하시면 됩니다. 이 자료는 인채널님이 질의하신 내용을
관리자님이 답변 주셨고 제가 조금더 추가하여 공개하는 것이니 보드명, 주소나 div 내용은 자신의 것으로
바꿔서 적용하셔야 합니다.

원문 :

탭버튼 부분 소스입니다.



<div style="width:468; border:1px solid #d2d2d2; border-top:0; margin-top:2; padding:0 1 0 1;">
<? $localid++;?>
<table width=100% cellspacing=0 border=0>
<tr align=center >
<td width=90 id="<?=$localid.'tab_1'?>" onmouseover="ibd_TabMenuChan(this)">인테리어테마</td>
<td width=90 id="<?=$localid.'tab_2'?>" onmouseover="ibd_TabMenuChan(this)">공간과제품</td>
<td width=90 id="<?=$localid.'tab_3'?>" onmouseover="ibd_TabMenuChan(this)">디자인과사람</td>
<td width=90 id="<?=$localid.'tab_4'?>" onmouseover="ibd_TabMenuChan(this)">업체탑방</td>

</tr>
</table>


<div id="<?=$localid.'ibd_1'?>" style='display:block'>
<script language="JavaScript">
innerhtml_ON('ajax_main_center1','<?=$localid.'ibd_1'?>' ,'iboard=kkknewsmain');
</script>

</div>

<div id="<?=$localid.'ibd_2'?>" style='display:block'>
<script language="JavaScript">
innerhtml_ON('ajax_main_center2','<?=$localid.'ibd_2'?>' ,'iboard=kkknewsmain');
</script>

</div>

<div id="<?=$localid.'ibd_3'?>" style='display:none'>
<script language="JavaScript">
innerhtml_ON('ajax_main_center3','<?=$localid.'ibd_3'?>' ,'iboard=kkknewsmain');
</script>

</div>

<div id="<?=$localid.'ibd_4'?>" style='display:none'>
<script language="JavaScript">
innerhtml_ON('ajax_main_center4','<?=$localid.'ibd_4'?>' ,'iboard=kkknewsmain');
</script>

</div>

</div>

----------------------------------------------

관리자 :

<div id="<?=$localid.'ibd_2'?>" style='display:none'>

<div id="abcd1234">
<script language="JavaScript">
innerhtml_ON('ajax_main_center2','abcd1234' ,'iboard=kkknewsmain');
</script>
</div>

</div>

처럼 tab 컨트롤용 div 와 ajax용 div 를 구분하십시오

----------------------------------------------

yerangman :

비슷한 문제로 고민만하고 해결을 못하는 분들을 위해
조금 더 자세한 설명을 올려 드립니다.

관리자님이 tab 컨트롤용 div와 ajax용 div를 구분해야 한다고 하신 것은
실행 명령을 구분해야 한다는 의미로서,display:block과 display:none과는 다른 의미입니다.

따라서 위와 같은 경우 $localid.'ibd_2'만 구분해서는 문제 해결이 안되며
$localid.'ibd_1' $localid.'ibd_2' $localid.'ibd_3' $localid.'ibd_4' 이렇게 모두 적용해야 합니다.

처음에 보일 탭 하나만 그냥 놔두고 나머지 3개는 구분해야 합니다. 소스는 아래와 같습니다.


<div id="<?=$localid.'ibd_1'?>" style='display:none'>
<script language="JavaScript">
innerhtml_ON('ajax_main_center1','<?=$localid.'ibd_1'?>' ,'iboard=kkknewsmain');
</script>

</div>


<div id="<?=$localid.'ibd_2'?>" style='display:none'>
<div id="bcde1234">
<script language="JavaScript">
innerhtml_ON('ajax_main_center2','bcde1234' ,'iboard=kkknewsaa');
</script>
</div>
</div>


<div id="<?=$localid.'ibd_3'?>" style='display:none'>
<div id="cdef1234">
<script language="JavaScript">
innerhtml_ON('ajax_main_center3','cdef1234'?>' ,'iboard=kkknewsbb');
</script>
</div>
</div>


<div id="<?=$localid.'ibd_4'?>" style='display:none'>
<div id="defg1234">
<script language="JavaScript">
innerhtml_ON('ajax_main_center4','defg1234' ,'iboard=kkknewscc');
</script>
</div>
</div>

</div>

수정내용을 잘 적용하셔서 이미지가 많은 홈페이지를
테크노트 메인처럼 깔끔하게 잘 사용하시기 바랍니다.
관련 정보를 제공해 주신 인채널님과 관리자님에게 감사드립니다.

참고로 테크노트 메인처럼 가로 5개 세로 2줄이 아니라
가로 4개 세로 1줄처럼 나오는 내용을 바꾸려면
해당스킨/innerhtml 폴더 안의 ajax_imgarray.php 상단에서

// ▨ 설정 #################################################

// 이미지 출력 갯수 (가로줄)
$conf_cols_img=4; //

// 이미지 출력 갯수 (세로줄)
$conf_rows_img=1;

출력갯수 및 정렬 기준 등을 변경하실 수 있습니다....