FAQ 를 구성할 때..
평소에는 제목만 보이다가, 제목을 클릭하면 상세 내용이 제목 밑으로 펼쳐지는 방식의 아코디온 FAQ 가 필요할 때가 있죠.
그런데, FAQ 내용을 웹에디터를 사용해서 관리한다면 간혹 곤란한 경우가 발생하기도 합니다.
수작업으로 만들어 낼 때는 FAQ 목록에 html 태그가 들어가지 않는데,
웹에디터를 사용해서 FAQ 를 관리하면 펼쳐지는 본문 내용 부분에 <HTML> 태그가 들러붙죠.
이때 FAQ 목록의 첫번째는 제대로 나오는데 그 다음부터 나오지 않을 수도 있어요.
FAQ 를 구성하는 구조를 어떻게 했느냐에 따라서 발생하기도 발생하지 않기도 하는 현상입니다만..
<div style="display:none">본문내용</div> 로 해 두었다가 클릭했을때 나오게 하거나,
<div style="display:none" id="..."></div> 를 두고
<textarea style="display:none">본문내용</textarea> 에 담았다가 div 에 표시되게 하는 방법이 먹히지 않을 때가 있어요.
어쨌든.. 이곳에서는 이런 경우의 해결 방법론을 설명합니다. 방법은 간단합니다. Ajax 를 이용하는 것이죠.
FAQ 목록을 만들 때는 제목과 순번, 조회수 등의 기본 내용만 주르륵 표시되게 하고,
제목을 클릭했을때 펼쳐질 수 있도록 블럭을 잡은 다음..
제목을 클릭하면 Ajax 로 본문 내용을 가져와서 숨겨졌던 블럭에 담아서 보이게 하는 것입니다.
Ajax 호출시 Cache 를 사용하거나 사용하지 않을 수도 있는데..
본문 내용이 동적으로 갱신되는 것이라면 No-Cache 로 가야 겠지요.
그런데, Cache 로 가더라도 서버에서 관련 내용을 가져오니까 네트워크 리소스를 사용하잖아요.
그래서 본문 내용이 표시되는 블럭에 html 요소가 있으면 Ajax 없이 보여주기만 하고,
본문 내용이 없을 때에만 Ajax 로 해당 본문 내용을 가져오게 하는 것도 좋은 방법입니다.
FAQ 목록이 펼쳐질 때 맨 위에 있는 항목은 본문이 펼쳐져 있으면 좋겠구요.
그런데, 특정 FAQ 항목이 기본으로 펼쳐지게 하는 방법도 고민해 봐야겠지요.
아래 자바스크립트는, 화면에서 목록 list1.jsp 와 view1.jsp 를 jQuery Ajax 로 호출하는 방식입니다.
document.ready 부분에 openUri 로 목록을 가져오면.. 전체 화면이 먼저 뜨고 목록이 나중에 뜨는 방식이 됩니다.
사람들의 요구는 FAQ에 있긴 하지만, FAQ 가 뜨는 동안 눈요기 거리도 필요해요. 잡스 스타일이고 스마트 기기 스타일.
var f = document.form1; // 여러번 사용할 것을 전역으로 잡아 봤습니다. jQuery 남용 금지. ^^;; 여기선 사용 못했네요.
$(document).ready(function(){
openUri(); // 목록을 ajax 로 호출. 본 화면의 다른 부분들이 로딩된 이후에 목록을 가져와 표시
});
function openUri(){ openSimpleUri('idList1','list1.jsp','seq=','openFirst'); } // openSimpleUri 는 하단에 기술
function openFirst(){ openFaqView(''); } // 특정 항목이 펼쳐지게 하려면, 본 화면 호출시 받은 파라미터를 이곳에 기술
function openFaqView(seq){
var s = $('#id'+seq).html();
if(s=='') openSimpleUri('id'+seq,'view1.jsp','seq='+seq); // FAQ 본문을 이미 가져왔으면, 필요 이상의 Ajax 호출 자제
showFaqView(seq);
}
function showFaqView(seq){
$('.faqCont').hide(100); // 모두 닫기
$('#faqCont'+seq).show(); // 특정 id 열기. 닫을때 Animation 이 들어갔기 때문에 열리는 부분에 넣을 필욘 없음
}
function openSimpleUri(id,uri){
var args = openSimpleUri.arguments; // 추가 파라미터. args[0] id, args[1] uri, args[2] parameter, args[3] callback
var param; if(args[2]) param = args[2]; // 파라미터가 필요없으면 그냥 통과
$.ajax({
type: 'POST',
url: uri,
data: param,
cache:false,
success:function(resultText){
//$('#'+id).html('').html(resultText); // 간혹 이런 코드가 필요할 수도 있어요. 이전 내용이 표시되는 걸 막는 거죠.
//$('#'+id).hide().html(resultText); // 간혹 이런 코드가 필요할 수도 있어요. 이전 내용이 표시되는 걸 막는 거죠.
$('#'+id).html(resultText);
if(args[3]){ try{ eval(args[3]+ '()'); }catch(e){} } // callback 함수가 필요할 때 사용. 오류 예방용 try~catch 사용
},
error:function(){
}
});
} /* openSimpleUri */
'Local Oriented > jQuery' 카테고리의 다른 글
| jQuery 로 이미지 preLoading (1) | 2011.10.19 |
|---|---|
| jQuery 플러그인 모음, 별점 (0) | 2011.10.19 |
| [모음] jQuery Slide 슬라이드/스크롤 (2) | 2011.10.06 |
| 서적, 시작하세요! 모바일 웹 개발 (위키북스). jQTouch jQueryMobile SenchaTouch (16) | 2011.10.05 |
| jQuery 로 Ajax 가 중첩되어 또는 순차적으로 Call 할때 CallBack 함수 사용 (1) | 2011.10.05 |
