기타 TanPanel 질문드립니다.
페이지 정보
작성자 nxdev1 작성일 2024-03-04 11:12 조회 92회 댓글 1건본문
관련링크
TanPanel 사용 시 선택된 인덱스가 변경 될 때 이전 인덱스 값을 저장하려고 하는데요.
selectedIndexChanged
이벤트 발생 시 이전 인덱스 값을 알 수 있는 방법이 있을까요?
TanPanel 사용 시 선택된 인덱스가 변경 될 때 이전 인덱스 값을 저장하려고 하는데요.
selectedIndexChanged
이벤트 발생 시 이전 인덱스 값을 알 수 있는 방법이 있을까요?
안녕하세요 메시어스입니다.
확인해본 결과, TabPanel의 'selectedIndexChanged' 이벤트에서 이전에 선택한 탭 인덱스를 직접적으로 가져올 수 없습니다. 다만 탭 패널의 hostElement에서 'click' 및 'keydown' 이벤트를 처리하고, 'selectedIndexChanged' 이벤트에서 해당 정보를 인덱스에 대한 참조를 표시할 수 있습니다.
자세한 코드는 아래 샘플에서 확인할 수 있습니다. 샘플에서는 탭 패널 클릭 시, 인덱스에 대한 정보를 콘솔 창에 표시하고 있습니다.
다른 궁금한 점이 생기면 문의주시기 바랍니다.
감사합니다.
메시어스 드림
등록된 댓글이 없습니다.
뒤로가기를 눌렀을 때 이전 페이지로 이동되는 게 아닌 이전 탭으로 이동되게 구현을 하려고 하는데요. 해당 방식으로 했을 때 제대로 기록이 안되는 것 같아서 혹시 다른 방법이 있을까요?
아래와 같이 시도를 했습니다.
tab.hostElement.addEventListener('click', (e) => {
lastTabIndex = tab.selectedIndex;
});
tab.hostElement.addEventListener('keydown', (e) => {
lastTabIndex = tab.selectedIndex;
});
tab.selectedIndexChanged.addHandler(function (s, e) {
if (s.selectedIndex < 0) return;
idx = lastTabIndex;
window.history.pushState(null, null, window.location.href);
window.onpopstate = () => {
tab.selectedIndex = idx;
}
안녕하세요 메시어스입니다.
문의하신 내용을 확인해본 결과, 기존 코드의 경우, selectedIndexChanged 이벤트 이후에 이전 탭 인덱스 변수의 값이 현재 탭 인덱스 값으로 변동됩니다.
이를 막기 위해 별도 변수를 두어 이전 탭 인덱스와 현재 텝 인덱스 값이 동일하지 않도록 설정하시기 바랍니다. 더불어 브라우저의 뒤로가기 버튼을 클릭 시, 탭패널이 refresh되어 기존 인덱스가 재선택되는 현상이 발생하여 이전 탭 인덱스와 현재 탭 인덱스가 동일하게 처리됩니다.
이를 방지하기 위해 selectedIndexChanged 이벤트 내에서 조건문을 두어 값이 동일하지 않게 설정하시기 바랍니다.
아래 간단한 코드를 참고하여 주시기 바랍니다.
// select the first tab theTabPanel.selectedIndex = 0, lastTabIndex = 0,temptabIndex = 0; theTabPanel.selectedIndexChanged.addHandler((s,e) => { // 동일한 인덱스 값으로 설정되지 않을 때만 변경 처리 if(s.selectedIndex !==lastTabIndex ){ lastTabIndex = temptabIndex } console.log('현재 탭 인덱스: ', s.selectedIndex); console.log('이전 탭 인덱스: ', lastTabIndex); }) // 별도 변수에 값 저장 theTabPanel.hostElement.addEventListener('click', (e) => { temptabIndex = theTabPanel.selectedIndex; }) window.history.pushState(null, null, window.location.href); window.onpopstate = () => { history.go(1) theTabPanel.selectedIndex = lastTabIndex; }
다른 궁금한 점이 생기면 문의주시기 바랍니다.
감사합니다.
메시어스 드림
등록된 댓글이 없습니다.