세이박스

자바스크립트를 이용해서 링크 클릭시 테이블 보이기 숨기기 style display 활용

웹프로그램

고객센터 질문과답변 페이지를 보여 줄때 답변 내용이 길게 나올 경우 페이지가 쭉 늘어나 정작 필요한 답변을 찾기가 쉽지가 않습니다.
이럴때 답변은 숨겨 놓고 질문 제목을 클릭하면 답변이 보이며 좀전 열었던 답변은 숨기는 기능을 자바스크립트와 style display을 이용해서 적용해 보겠습니다.


1. 자바스크립트 소스

<script language="javascript">
<!--
function QnaShow(qna) {
 /* 질문 갯수 만큼 추가 해 줍니다 */
 document.all.qna1.style.display = "none";
 document.all.qna2.style.display = "none";
 document.all.qna3.style.display = "none";
 /* 요청한 답변을 보이기 처리 입니다 */
 var obj = eval("document.all." + qna);
 obj.style.display = "block";
}
//-->
</script>



2. 테이블 소스

<table>
 <!-- 질문 1 -->
 <tr>
  <td><a href="javascript:QnaShow('qna1')">질문1</a></td>
 </tr>
 <tr id="qna1" style="display:none;">
   <td>답변1</td>
 </tr>
 <!-- 질문 2 -->
 <tr>
  <td><a href="javascript:QnaShow('qna2')">질문2</a></td>
 </tr>
 <tr id="qna2" style="display:none;">
   <td>답변2</td>
 </tr>
 <!-- 질문 3 -->
 <tr>
  <td><a href="javascript:QnaShow('qna3')">질문3</a></td>
 </tr>
 <tr id="qna3" style="display:none;">
   <td>답변3</td>
 </tr>
</table>


3. 소스 설명 :
제목을 클릭시 자바스크립트 QnaShow() 함수를 호출합니다.
이때 함께 전달한 qna 값으로 어떤 질문을 클릭했는지 구분합니다.
먼저 모든 질문을 숨기기 처리합니다.
1번 질문을 본뒤에 2번 질문을 클릭시 1번 질문을 숨기고 2번 질문의 답변을 보여주기 위한 처리인데 일괄적으로 모든 질문의 답변을 숨긴뒤에 원하는 답변만 보여주는 처리 입니다.
열려있는 질문만 숨기기 코딩하면 좋겠지만 오히려 소스가 복잡해줄수 있으므로 질문추가시 자바스크립트 항목중 document.all.qna3.style.display = "none"; 이부분도 함께 추가해 줍니다.
숨기기 처리가 끝나면 var obj = eval("document.all." + qna); 에서 obj로 클릭한 질문의 답변 <tr> id값을 조합합니다.
그리고, obj.style.display = "block"; 에서 지정한 <tr> style의 display 값을 block 으로 적용해서 보이도록 합니다.
이와같은 적용으로 페이지를 다시 접속하지 않고도 보이기 또는 숨기기 적용이 됩니다.


 ▶ 최신영화, 최신 미국드라마 무료 다운로드... 

그누보드(배추빌드) 기반 전광판 만들었습니다.

웹프로그램

사용자 삽입 이미지


전광판 기능 입니다. 아직 초기작이라 디테일한 기능은 없습니다.
추후 요청시 기능을 반영하고자 합니다.
예를 들어 당일 게시글에 한해서만 노출하기라던지 또는 함수 함수 호출시 폭지정 등을 할 수 있도록 개선 할 예정 입니다.
일단 현재 버전에서는 latest.skin.php 파일에서 폭,높이 등을 수정 하셔야 합니다.

전광판 노출 옵션 설정 : /skin/latest/saybox.display/latest.skin.php
cont.width = 380; //폭수정
cont.height = 15; //높이수정
cont.scrollspeed = 20; //글자 스크롤 속도(20->0.02초)
cont.pausedelay = 3000; //글자 머무는 시간 (3000->3초)
cont.pausemouseover = true; //마우스 올렸을때 멈춤 기능

설치경로 : /skin/latest/saybox.display

latest 적용예 :
<?=캐시함수("saybox.display", "게시판", 노출갯수, 글자길이, 이미지유무, 갱신시간)?>

캐시함수는 아래 2가지 함수중 사용 :
- mw_latest_rand() : 랜덤으로 글 가져옴 (캐시 미적용)
- mw_latest() : 최근글 (캐시사용)

게시판 : 게시판 테이블명 입력

글자길이 : 지정한 길이 이상일 경우 "..." 처리 됩니다.

이미지유무 : 0 (고정, 이미지 사용하지 않으므로)

갱신시간 : 기본값 설정값 $mw[config][cf_index_cache] 또는 임의 시간 지정 (mw_latest() 함수 이용시만 적용됨)


세이박스 적용 예)
<?=mw_latest_rand("saybox.display", "display", 5, 50, 0, $mw[config][cf_index_cache])?>

적용 페이지 : http://www.saybox.co.kr
등록 게시글 : http://www.saybox.co.kr/bbs/board.php?bo_table=display

추가 기능 및 개선 사항에 대해선 이곳에 코멘트 남겨 주세요!
기능 개선해서 올려 드리겠습니다. ^^

그리고, 사이트 적용시 반드시 아래 코멘트에 적용할 곳 남겨 URL 남겨 주시기 바랍니다.
안그럼 미워 할겁니다. ^^ ㅋㅋ