반응형 JavaScript/JQuery10 [DateTimePicker] 캘린더 형식 input DateTimePicker 기본 사용법jquery.datetimepicker.full.js는 input 요소를 캘린더 형식으로 변환하여 사용자가 날짜와 시간을 쉽게 선택할 수 있도록 한다.기본적으로는 datetimepicker() 메서드를 호출하면 된다.위와 같이 작성하면 기본 달력이 팝업 형태로 표시된다. 한국어(KR) 표출 설정한국어 표출을 위해서는 i18n 옵션을 사용한다.한국어 locale 설정을 추가한 뒤 lang: 'kr'를 지정한다.이렇게 하면 요일, 월, 버튼 등이 한국어로 표출된다. 연, 월, 일, 시간 등등 다양한 입력 형식을 다루는 예시가 아래 링크에 나와있으니 필요한 내용을 참고하면 좋을 듯 하다.https://xdsoft.net/jqplugins/.. 2025. 9. 26. [Slider] 이미지 슬라이더 구현 JQuery-ui를 활용하여 상단 첨부된 이미지와 같은 형태의 이미지 슬라이더를 구현해보았다.기능은 아래와 같다. - 버튼을 활용한 이미지 전환(이전, 다음, 재생, 일시정지)- 슬라이더 스크롤 및 클릭을 통한 이미지 전환- 키보드(좌, 우, 스페이스바) 이벤트를 통한 이미지 전환 코드가 복잡하지 않으므로 하단에 첨부된 codePen 소스를 통해 기능 테스트와 js, css, html별 코드 분석이 가능하다. See the Pen image-player(sample) by HamJeong (@HamJeong) on CodePen.">See the Pen image-player(sample) by HamJeong (@HamJeong) on CodePen. 실제 서버에서 이미지 파일을 불러.. 2025. 8. 19. [차트API] highcharts wind barb(바람 깃) 그리기 해당 포스팅에서는 상단 이미지 예시와 같이, 풍속 값을 기반으로 하여 바람 깃 자료를 svg형태로 그려내고 풍향 값을 참고하여 해당 svg를 회전시켜 wind barb를 highcharts 내 표출하는 방법에 대해 다루었다. 목차는 다음과 같이 하였다.1. wind barb 정의 1) 바람 깃 svg 처리 메서드 2) svg 적용 메서드 3) 로드 예시2. highchart 표출3. 구현 예시 1. wind barb 정의바람 깃 생성을 위해 연관 작업을 처리하는 메서드를 3개로 나누어 작업하였다. 아래 목록화 된 목차 제목이 각 메서드 대한 내용이며, 연계처리하여 load메서드 실행->바람 깃 생성->바람 깃 svg 생성 순으로 호출되도록 하였다. 즉, 차트 객체 정의 혹은 차트 생성 시, .. 2024. 11. 25. [zoomer.js] 이미지 확대 축소 라이브러리 활용 해당 게시글은 JQuery라이브러리인 zoomer.js를 활용하여 이미지 요소의 확대 축소 기능을 구현하는 내용에 대해 정리하였다. 목차는 아래와 같다.1. 정적소스 참조2. 구현3. 한계점 1. 정적소스 참조라이브러리 사용을 위해 필요한 정적소스를 참조해야한다(CDN 방식) 본인의 경우, 인터넷망이 연결된 환경이 아니기 때문에 직접 파일을 다운로드하여 세개의 필수 파일을 프로젝트 내 추가하여 참조하였다. 버전 관리로 인한 이슈 방지를 위해서는 가급적 아래 공식 링크를 참조하여 파일 다운로드 및 CDN 방식으로 필요 파일을 로드하는 것을 추천한다.https://www.jqueryscript.net/zoom/Smooth-Image-Enlargement-Plugin-Zoomer.html Smooth I.. 2024. 11. 21. [tooltip] JQuery-ui.js, 요소 tooltip 생성부터 커스텀까지 특정요소 mouseover 이벤트를 감지하여 tooltip을 표출하는 작업을 진행하기에 앞서, 'tooltip관련 라이브러리가 없을리가 없는데?'하는 내면의 질문에서 출발하였다. 역시 직접 생성해내는 것 보다, 만들어진 라이브러리를 활용하는게 가장 빠르고 편한 것 같다. 관련 라이브러리는 Bootstrab, JQuery-ui로 두 개의 검색 결과가 있었으나, 본인의 경우 JQuery-ui를 활용하여 tooltip을 생성하고, 그에 대한 내용을 포스팅할 예정이다. https://jqueryui.com/tooltip/ Tooltip | jQuery UI Tooltip Customizable, themeable tooltips, replacing native tooltips. Hover the links ab.. 2023. 12. 7. AJAX로 json데이터 넘겨받기 기상청에서 제공하는 날씨누리서비스를 참고하여, 사용자가 특정 해구를 선택한 후 "검색"버튼 클릭시 해역예보 하단에 작성된 테이블의 내용이 비동기적으로 수정될 수 있도록 하는 작업을 진행해보았다. 비동기 처리를 진행하며 발생한 이슈를 순서대로 정리해보았으며, 목차는 다음과 같이 하였다. 1. ajax로 json데이터 받기 2. ajax 한글 인코딩 이슈 해결 3. 최종 작성된 코드 1. ajax로 json데이터 받기 ajax는 학원에서 프로젝트를 진행하며 두어번 해 본 경험이 전부였지만, id중복 확인 기능과 좋아요버튼 기능을 구현하면서 학습한 내용이 있기에 적절히 응용한다면 수월히 진행될 것이라는 판단으로, 위의 검색기능을 비동기 로직이 실행될 수 있도록 작업하였다. 검색 이벤트마다 일일예보에 대한 내용.. 2022. 8. 4. 이전 1 2 다음 반응형
