[자바스크립트] 탭 메뉴 만들기

이 글은 다음 블로그에 있던 포스팅을 재 정리 한겁니다. 그쪽이 워낙 개판으로 정리가 안되어 있어서요.

이번에는 간단하게 탭 메뉴를 만들어 보겠습니다. 실제로는 메뉴가 아니고 탭을 선택하면 공통영역에 콘텐츠를 바꾸는 아주 소스가 널려있는 그 기능. 실제로는 별게 아닙니다. 자 데모를 작동해 보시죠.

 

  

데모 보기(탭 메뉴를 클릭하시거나 마우스를 올리시면 작동합니다. 이미지는 깨질 수 있습니다.)

동적으로 사용할 수 있도록 구성해 보았으니 한번씩 써보시고 문제가 있거나 개선점이 있으면 피드백하셔도 됩니다.(사실 제이쿼리는 롤링이나 탭 기능을 합쳐 놓았습니다. 그게 훠얼씬 사용하기 쉽죠. ^^;; )

위 이미지와 같이 각 사이트명 또는 숫자에 마우스를 올리거나 클릭하면 하단의 영역이 바뀝니다. 따로 설명하지 않아도 다들 아실거라 믿어 의심치 않습니다.

함수명은 tabView 로 했고 호출방법과 인자 설명을 하겠습니다. 생성자 호출 시 바로 json 데이터를 꾸려 넣었습니다. 보기에는 좀 복잡해 보이겠지만 기존의 방법과 다른 부분은 크게 없으니 차근차근 보시면 되겠습니다.

new tabView(
	{
	menu:"tab", 
	menuTag:"LI", 
	callEvent:"click", 
	imageArea:"image_list", 
	imageTag:"DIV"
	}
);
new tabView(
	{
	menu:"tab2", 
	menuTag:"IMG", 
	callEvent:"mouseover", 
	imageArea:"image_list_2", 
	imageTag:"DIV"
	}
);

인자를 보시면

menu : 탭들을 둘러싸고 있는 영역의 ID
menuTag : 탭을 구성하는 태그명
callEvent : 탭 구동방식 - click, mouseover 두 가지 방식만 지원
imageArea : 콘텐츠를 둘러싸고 있는 영역의 ID
imageTag : 이미지를 둘러싸고 있는 태그명

그 외의 소스는 첨부파일로 대체하겠습니다. 이미지 경로는 환경에 맞게 수정하여 사용하시면 됩니다. 그럼 즐프하세요..

tab_menu (1).html

2012.07.23 업데이트 : jeongah 님의 피드백으로 알려진 버그내용 수정. 콘텐츠가 이미지가 아닌 html 일 경우 발생하는 버그에 대한 수정 파일입니다. 위 파일은 수정되었습니다.

2012.07.23 수정내용

• 1. viewContent 함수 수정 ( html 코딩이 들어갈 경우 이 함수를 다시 적용해야 함 )
• 2. 반드시 내용이 들어가는 곳에 "content_frame" 클래스를 추가해야 함. ( 첨부파일에 주석으로 처리해 놓았음 )