반응형 jQuery 반응형 18 [JQuery] AJAX테이블 생성 후 팝업창 데이터 전달&인쇄 방법!! (영상 有) 안녕하세요. 정보 조회기능을 AJAX로 불러들여 팝업창으로 인쇄하는 기능을 정리해보았습니다. 저는 사용자페이지에서 이수증을 출력하기 위해서 아래와 같이 구현과정을 진행하였습니다. 정보를 입력하여 조회하고, 조회한 정보를 AJAX로 테이블 형태로 불러온 다음, 팝업창으로 정보를 띄어 인쇄 많이 사용하는 기능이니 만큼 많은 분들에게 도움이 되었으면 좋겠습니다. 아래는 구현한 영상입니다. 아래는 팝업창값을 부모창에 전달하는 방법을 정리한 글입니다. https://chobopark.tistory.com/5 [Spring]팝업 리스트 값을 부모창에 전달하는 방법 (영상 有) [2021년 09월 30일에 수정하였습니다] 많이들 사용하는 팝업에서 리스트 체크값을 부모창에 전달하는 방법에 대해 이야기해보겠습니다. 전에.. 2022. 1. 28. [jQuery] onkeyup을 통한 실시간 Replace방법! (숫자만/특정문자만/영상有) 안녕하세요. 오늘은 onkeyup을 통해 숫자만 또는 특정 문자만 입력하여 실시간으로 유효성 검사할 수 있는, Replace방법에 대해 알아보겠습니다. 영상을 준비했으니 영상을 보시죠~~~ 참고로 onkeyup은 사용자가 키보드의 키를 눌렀다가 땠을때 발생하는 이벤트입니다! 단위수는 오로지 숫자만 감지할 수 있도록 설정하였으며, 성취도는 A,B,C만 입력될 수 있도록 설정하였습니다. 숫자 replace 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 function checkNum(objEv){ var numPattern = /([^0-9])/; var v = objEv.value; numPattern = v.match(numPattern).. 2021. 12. 8. [jQuery] Data타입을 날짜형태(yyyy-mm-dd)로 포맷 변경하는 방법!! 서버에서 데이터를 스크립트로 가져와서 사용하려하는데 cret_date 이놈이 데이터타입니다... 콘솔을 찍어보니 어김없는 date형태.. 그래서 화면에서 오브젝트로 표출이 되므로 이놈을 내가 원하는 날짜형태(yyyy-mm-dd)로 변경시키려합니다. 간단한 함수를 사용해서 가능하지만 잊어버릴까봐 포스팅하려고 합니다! 1 2 3 4 5 6 7 8 9 10 11 12 13 14 function formatDate(date) { var d = new Date(date), month = '' + (d.getMonth() + 1) , day = '' + d.getDate(), year = d.getFullYear(); if (month.length 2021. 11. 29. [Jquery] 셀렉트 option AJAX로 가져오는 방법!! (영상 有) 안녕하세요. 오늘은 셀렉트 옵션값을 제이쿼리와 AJAX 비동기 통신을 이용하여 가져오는 방법을 정리해보겠습니다. 아래는 구현 화면입니다. AJAX를 통해 간단히 만들 수 있지만 제이쿼리 문법을 조금은 알아야합니다. HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 *관람 선택 --선택-- 전시관 프로그램 *프로그램 선택 Colored by Color Scripter cs 여기서는 보통의 select태그의 형태입니다. 특이점은 이름값 resv_program_type인 select태그 (전시관/프로그램 선택 태그) 에 onchange 함수를 넣어서 클릭할때마다 함수가 작동할 수 있도록 합니다. 그리고 프로그램 선택 태그 tr에 display none처리하여 .. 2021. 11. 6. [HTML&JQUERY&Java] 태그 추가 삭제 및 다중insert 기능!! (영상 有) 안녕하세요. 오늘은 태그를 추가하고 삭제하는 방법과 추가한 태그 값을 insert하는 방법을 정리해보았습니다. 구현 화면입니다. 여기서 중요한 것은 태그를 추가하거나 삭제할 때, 순번이 알맞게 유지되어야 한다는 점과, 태그 수가 어떻게 됬건 그 값을 서버에서 처리할 수 있도록 다중 처리하는 방법이 중요하겠네요! create.jsp (Html) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 프로젝트명 STEP 1. Data import DATA import.. 2021. 10. 20. [JQuery] 쿠키로 아이디 저장하는 방법!! 쿠키로 아이디를 저장하고 아이디를 지우는 방법에 대해 포스팅해보겠습니다. 흔히 말하는 로그인할때 아이디저장 기능입니다. 보통 아래 화면처럼 되어있죠~ 아이디 저장하는 방법에는 여러가지가 있습니다. 서버에서 저장하는 방법도 있지만... 오늘 정리할 스크립트에서 쿠키를 설정하고 지우는 방법도 정리해보겠습니다. 요즘 가장 인기가 있는 JQUERY 를 이용해보았습니다 ㅎㅎ HTML 우선 HTML 소스입니다. 머 흔히 사용하는 로그인 폼이죠 여기서 중요한 것은 form 태그에 onsubmit을 통해서 action되기 전에 스크립트를 거치도록 해야합니다. 즉, 로그인 버튼을 누르면 onsubmit을 통해서 frm_check 함수를 거치고 서버로 이동하게 됩니다. 1 2 3 4 5 6 7 8 9 10 11 12 13.. 2021. 8. 7. [JQuery] 로딩창 설정 방법 (+LoadingOverlay사용법)(영상 有) 안녕하세요. 오늘은 프로젝트에서 로딩시에 화면을 나타내는 로딩 페이지를 이야기해보겠습니다. 스크립트 함수나 AJAX 사용 시, 로딩시간이 있는 경우, 사용자 입장에서 화면이 움직이지 않을 경우 문제가 있다고 생각할 수도 있기 때문에 코드가 도는동안 화면에 로딩이라는 표시를 해줘야합니다. 제가 만든 프로젝트를 예를 들어보겠습니다. (2021년 8월 25일 하단에 LoadingOverlay plugin 사용방법을 추가하였습니다.) 박스안에 정보를 클릭을하면 함수가 돌아가는데 정보량이 많다보니 시간이 좀 걸립니다.. 그래서 아래와 같은 로딩창이 필요한 이유입니다. 크게 로딩실행함수와 종료함수 두가지로 나뉩니다. 로딩실행함수 해석하자면 문서의 높이와 바디부분의 넓이를 변수에 담습니다. 그리고 mask에 로딩창의.. 2021. 6. 2. [Jquery] 마우스 hover 시, 확대 기능 방법!! 안녕하세요. 오늘은 이미지에 마우스 hover시, 이미지가 줌(확대)가 되는 기능에 대해 알아보겠습니다. 간단한 방법인데 구글링에서 구체적인 방법이 나오지 않는 것 같아 정리해서 올려봅니다. 제가 구현한 화면입니다. 이미지에 마우스를 올리면 자동으로 줌이 되면서 움직이며 내용을 확인할 수 있습니다. 우선 제이쿼리 사이트에가서 줌 기능에 대한 파일을 받아야합니다. 제이쿼리 사이트 : jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animati.. 2021. 4. 26. [Jquery&Javascript] 페이지 URL 복사 방법!! 안녕하세요 오늘은 스프링에서 제위쿼리를 이용한 URL주소 복사 (클립보드) 사용 방법에 대해 알아보겠습니다. HTML에서 버튼 생성과 스크립트에서 코드 몇줄이면 간단히 만들 수 있습니다. HTML a태그를 통해 onclick으로 함수를 호출합니다. 저는 URL주소복사란 이름의 버튼을 A태그를 통해 만들 예정입니다. URL주소복사 JAVASCRIPT a태그에서 호출한 함수인 clip을 작성해줍니다. url을 변수로 만들고 textarea라는 변수에 textarea의 요소를 생성해줍니다. 이 것을 body의 가장 아래, 즉 바로 위에 textarea를 추가해줍니다. (임시 공간이기 때문에 위치는 상관이 없습니다.) url에는 현재 주소값을 넣어줍니다. textarea 값에 url를 넣어주고, textarea.. 2021. 4. 8. 이전 1 2 다음
