작성일 2024-03-04 11:12 조회 67회
댓글 1건
TanPanel 사용 시 선택된 인덱스가 변경 될 때 이전 인덱스 값을 저장하려고 하는데요.
selectedIndexChanged이벤트 발생 시 이전 인덱스 값을 알 수 있는 방법이 있을까요?
작성일
3 답변
작성일 2024-03-06 11:19 댓글 0건
안녕하세요 메시어스입니다.
확인해본 결과, TabPanel의 'selectedIndexChanged' 이벤트에서 이전에 선택한 탭 인덱스를 직접적으로 가져올 수 없습니다. 다만 탭 패널의 hostElement에서 'click' 및 'keydown' 이벤트를 처리하고, 'selectedIndexChanged' 이벤트에서 해당 정보를 인덱스에 대한 참조를 표시할 수 있습니다.
자세한 코드는 아래 샘플에서 확인할 수 있습니다. 샘플에서는 탭 패널 클릭 시, 인덱스에 대한 정보를 콘솔 창에 표시하고 있습니다.
다른 궁금한 점이 생기면 문의주시기 바랍니다.
감사합니다.
메시어스 드림
등록된 댓글이 없습니다.
작성일 2024-03-14 14:19 댓글 1건
뒤로가기를 눌렀을 때 이전 페이지로 이동되는 게 아닌 이전 탭으로 이동되게 구현을 하려고 하는데요. 해당 방식으로 했을 때 제대로 기록이 안되는 것 같아서 혹시 다른 방법이 있을까요?
아래와 같이 시도를 했습니다.
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;
}
작성일
작성일 2024-03-18 09:55 댓글 0건
안녕하세요 메시어스입니다.
문의하신 내용을 확인해본 결과, 기존 코드의 경우, 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;
}다른 궁금한 점이 생기면 문의주시기 바랍니다.
감사합니다.
메시어스 드림
등록된 댓글이 없습니다.
