728x90 반응형 jQuery4 무한 스크롤 이해하기 우리에겐 html 컨테이너가 있다.이 컨테이너에 수직 스크롤(overflow-y) 을 구현하고 싶고 스크롤을 끝까지 내렸을 때더 많은 데이터를 불러온다든지 어떤 임의의 함수를 트리거 하고 싶다고 가정해보자.......... 커스텀 css나 사용하는 프론트 라이브러리의 내장 클래스로 해당 div에 overflow를 줬다면이제 끝까지 내렸을 때 동작하게끔 구현해야 한다. 동작이기 때문에 기본적으로 JS 단에서 해야하고native 대신 jQuery를 통해 간결하게 구현한 방법은 다음과 같다.$('#div의 id명').on('scroll', function () { const scrollTop = $(this).scrollTop(); const clientHeight = $(this).height().. 2024. 8. 22. ajax 로딩 시 로딩 중 표시하는 방법 (jQuery Loading Spinner) 아래 코드는 로딩중을 나타내기 위한 html 코드이다. 아래는 jQuery ajaxSetup을 통해 loading spinner 언제 보여주고 숨기는지 세팅해놓은 js 코드이다. jQuery.ajaxSetup({ beforeSend: function () { $('#loading_spinner').show(); }, complete: function () { $('#loading_spinner').hide(); } }); 아래는 css 코드로 기본적으로 loading spinner를 숨겨놓고 위치를 조정해주며 spinner가 뱅글뱅글 돌도록 만들어주는 코드이다. #loading_spinner{ display: none; position: absolute; left: 50%; top: 50%; z-inde.. 2023. 12. 20. 자바스크립트를 HTML과 분리했는데 작동하지 않는 경우 보통 HTML과 자바스크립트를 따로 분리하는 게 보기 편하고 보기 편하기 때문에 유지보수가 더 용이한데 그 분리작업이 쉬울 것 같은데? 생각보다는 쉽지 않다. 오늘은 외부로 분리한 나의 자바스크립트 파일이 왜 작동하지 않는지 그 원인을 알아보고 해결책에 대해 소개해보려고 한다. 원인 & 해결책 1. VIEW 단에서 경로를 제대로 설정하지 않아서 컴파일러가 찾지 못하는 경우 ->본인이 사용하는 템플릿 엔진에 맞게 외부 자바스크립트 파일을 놓아야 하고 그 경로를 본인이 사용하는 템플릿 엔진에 맞게 설정해주어야 합니다. EX: 타임리프라는 템플릿 엔진을 사용중이라면 다음과 같은 폴더에 저장하면 됩니다. resources->static->js->html이름->js이름 호출할 때는 2. jQuery 를 사용중이라.. 2022. 10. 14. [jQuery] Datatable 로 쉽게 데이터 조회하는 테이블 만들기 1. CDN을 통해 외부 라이브러리를 쉽게 import 하기 2. 테이블을 만들면 된다 Email Name 3. 이제 늘 하던대로 VO나 Entity 하나 두고 html단에서 ajax 통신으로 컨트롤러->서비스->리포지토리로 가서 데이터를 긁어오면 된다. 아래는 샘플 서버사이드 스크립트 테이블 끗 2022. 9. 15. 이전 1 다음 728x90 반응형
