[Javascript] 탭 모두 닫기 기능 구현

프로젝트 진행 중에 이사님이 만드신 탭 UI가 있다.

그 탭 마다 닫기(X) 버튼이 존재하고, 누르면 탭이 닫히고 컨텐츠가 사라지는 형식이다.

보자마자 딱 떠오른게 "모두 닫기", "현재 탭 제외하고 닫기" 가 떠올랐는데 모두 닫기부터 구현해봤다.

 

모두 닫기 화면을 보여주는 형식

2가지 정도 생각해볼 수 있었는데.. 하나는 탭에서 오른쪽 클릭을 눌렀을 때, 다른 하나는 버튼 형식으로 화면에 보여주는 형태다.

개인적으로 나는 오른쪽 클릭을 많이 쓰기 때문에 오른쪽 클릭을 눌렀을 때로 구현했다. ( 다른 사람들의 의견은 후자의 방법을 선택 ) 나만 편하면 되는 것이 아닌 UI를 이용하는 사람들의 의견이 더 중요하기에 고려할 필요가 있다.

 

간단한 탭 예제를 만들어 기록용으로 남겨놔야지..

 

 

 

See the Pen tab close by BBongSu (@BBongSu-the-animator) on CodePen.