WebProgramming/HTML

HTML 펼침목록 태그 using JavaScript

유기농코더 2012. 3. 6. 18:29
저번 포스팅(HTML 펼침목록 태그)에서는 오로지 HTML만을 이용해서 펼침 목록을 만들었는데요, 이게 사용도 힘들고, 매번 비슷한 내용을 기입해야 해서 JavaScript를 이용해서 될 수 있게끔 고쳤습니다.
   
물론 제가 포스팅 하는 과정에 있어서 사용하는 기능을 적는 거라 해당 내용도 팁으로 적어 볼 까 합니다 :)
   
  • 문서의 구성
    일단 여러가지 상황에 대해서 제대로 나오는지 확인을 해봐야 하니까, 아래와 같은 내용의 문서를 임의로 만들었습니다.

     
       
    펼침목록을 구성하면서 가장 보기에 좋지 않은 것이, 스크롤링이 마음대로 되는 거 때문에 여러가지 테스트를 하면서 이 포스트를 작성하는 거에요.

    열고 닫았을 때, 다시 원래의 "열기" 버튼이 있는 곳으로 제대로 이동되면 성공!
       
  • JavaScript 함수 삽입
    HTML 문서의 <head>에 아래와 같은 javascript코드를 삽입 합니다. 
    <script type="text/javascript">
function openBox(boxName, a_Name){
	var box = document.getElementById(boxName);

	//box.style.display = (box.style.display == 'block') ? 'none' : 'block';
	if(box.style.display == 'none')
		box.style.display = 'block';
	else
	{
		box.style.display = 'none';
		document.getElementById(a_Name).scrollIntoView();
	}
	return false;
}
</script>

       
  • 테스트 문서 구현
    위의 javascript를 삽입한 전체 문서코드는 아래와 같습니다. 
    <html>
<head>
<script type="text/javascript">
function openBox(boxName, a_Name){
	var box = document.getElementById(boxName);

	//box.style.display = (box.style.display == 'block') ? 'none' : 'block';
	if(box.style.display == 'none')
		box.style.display = 'block';
	else
	{
		box.style.display = 'none';
		document.getElementById(a_Name).scrollIntoView();
	}
	return false;
}
</script>

<body>
<a id="text1_ctrl" href="#; return false;" onclick="openBox('text1', 'text1_ctrl');">
	text1 열어보기
</a>
<div id="text1" style="display:none; border:solid;">
	<p style="background:#c3edaf; height:800px">
		text1 본문(800 높이)
	</p>
	<a href="#; return false;" onclick="openBox('text1', 'text1_ctrl');">
		text1 그만 볼래요
	</a>
</div>

<p style="height:400px; background:#d9b3b3">
	본문 글1<br/>
	높이 400px<br/>
</p>

<a id="text2_ctrl" href="#; return false;" onclick="openBox('text2', 'text2_ctrl');">
	text2 열어보기
</a>
<div id="text2" style="display:none; border:solid;">
	<p style="background:#c3edaf; height:1000">
		text2 본문(1000 높이)
	</p>
	<a href="#;return false;" onclick="openBox('text2', 'text2_ctrl');">
		text2 그만 볼래요
	</a>
</div>

<p style="height:600px; background:#D9B3B3">
	본문 글2<br/>
	높이 600px<br/>
</p>
<p style="height:700px; background:#d9b3b3">
	본문 글3<br/>
	높이 700px<br/>
</p>

<a id="text3_ctrl" href="#; return false;" onClick="openBox('text3', 'text3_ctrl');">
	text3 열어보기
</a>
<div id="text3" style="display:none; border:solid">
	<p style="background:#c3edaf; height:1000px">
		text3 본문(1000높이)
	</p>
	<a href="#; return false;" onClick="openBox('text3', 'text3_ctrl');">
		text3 그만 볼래요
	</a>
</div>

</body>
</html>

       
  • 테스트
    각 펼침목록을 열고 닫았을 때의 상황을 연출해서 테스트 했어요. 특별히 가장 위쪽과 아래쪽의 펼침목록은 별로 상관이 없어요. 이유인즉, 펼침 목록이라는 것이 임의의 그룹(div, a, p, …)자체가 보여지거나 가려지는 형태인 지라 가장 위쪽의 목록을 펼치고 닫아도 스크롤은 항상 맨위에 가있고, 가장 아래쪽의 목록을 펼치고 닫아도 스크롤은 항상 맨밑에 가게 되기 때문에 별로 상관은 없어요.
       
    이 포스트에서 진행되고 있는 예시는 <a>링크를 이용해서 만든 클릭 이벤트라서 링크의 주소가 필요 합니다.
    <a> 링크로 클릭은 되지만 아무곳도 가지 않는 것이 <a href="#"> 이지만, 이렇게 되면 스크롤이 무조건 문서의 최상위로 이동하게 됩니다. 그 부분을 방지하고자 <a href="#; return false;">로 작성 했어요.

    두 번째 펼침 목록에 대해서만 보여 드릴게요.

        

    클릭을 하게 되면,
       


    펼침목록이 쫙 열리죠~ :)
    두 번째 펼침목록 뿐만 아니라 다른 곳의 펼침목록에도 모두 두었습니다만, 목록 내부에 '펼침목록 닫기' 버튼이 있어요~
       
    이 부분에 대해서도 바로 보이는 열기 버튼을 다시 눌러 닫을 때도 스크롤을 딱히 상관이 없어요. 펼쳐지는 목록이 가려져도 나의 시점은 항상 그 자리가 되니까요.

    이번엔 밑으로 내려와서 두 번째 펼침 목록을 닫아 봅시다.
       

    그럼 처음에 펼침목록을 열기 위한 버튼이 있는 곳에 딱 걸쳐서 스크롤이 이동 되요.
       
    펼침목록 테스트겸 추가 코드 열기