tab 구현(2)
-
[포트폴리오 페이지]_2단계 TAB구성_ feat(Spring)
목표] 기본적인 tab의 구성은 포스트 참조 https://yn971106.tistory.com/61 [TAB 구현 심화_3]_Spring에서 tab 구현해보기 (feat 메모리 저장) 목표] 위와 같이 동작하면서 닫고 새로 열기 전까지는 파일을 로드하거나 통신하지 않도록 하였습니다.] 코드 & 설명] 각각의 메뉴버튼에 리스너를 달아줍니다. openCheck 함수와 createTemplate 함수를 yn971106.tistory.com 위의 포스팅과 다른점은 1. _history 탭 객체 안에 id를 부여하여 id를 기준으로 activate 된 tab을 찾아 css 속성을 적용시킨 것 2. 클래스 (css) 를 동적으로 부여한 점 이 되겠습니다. 해당 코드만 보겠습니다. 1. 클릭시 적용되는 css 부분..
2022.03.02 -
[TAB 구현 심화_1]_Spring에서 tab 구현해보기 (feat json객체)
목표] 메뉴 1, 메뉴 2를 선택하면 바로 아래부분에 a태그와 button을 가진 template이 추가되며 글로벌 변수에 open인지 close인지 상태를 저장한다. 메뉴의 종류에 따라 contents부분이 해당 jsp파일의 내용으로 교체된다. 히스토리 로드를 클릭하면 (뒤로가기) 이전에 객체형태로 저장한 content를 보여준다. 자료구조는 stack을 사용하였고, 뒤로갈 페이지가 없을시 해당 alert를 호출한다. 코드분석] 1] 메뉴 1, 2클릭 구현 각각 onclick 함수로 오프너 함수와 checktab 함수에 각각 메뉴인자를 전달. 2] menuopener함수 JQuery의 load 함수를 이용해서 content가 있는 부분인 의 id인 menucontent 부분을 해당 requestMapp..
2022.02.06