반응형 JAVASCRIPT & JQUERY 반응형 60 Kendo UI Grid 사용방법 (영상) 안녕하세요. 오늘은 Kendo UI에서 grid 부분을 사용하는 방법에 대해 이야기해보겠습니다. grid는 자료의 필터링, 글웁화, 정렬 등의 기능을 적용할 수 있는 라이브러리입니다. 많은 자료들이 없는듯하여 간단히 포스팅하니 참고만 해주시면 될 것 같습니다. 제가 구현한 영상입니다. 자바에서 JSON 데이터를 내려서 스크립트로 Grid를 적용한 작업을 진행하였습니다. 엑셀 다운로드나 필터링 등의 기능들이 있는데 사이트에 가보면 더 많은 기능들이 있으니 필요한 부분이 있으면 가이드를 확인하시면 됩니다. https://www.telerik.com/kendo-ui JavaScript UI Components - Build Better Apps Faster - Progress Kendo UI Quickly b.. 2022. 6. 2. [Jquery&JAVA] 엑셀 데이터를 태그값에 삽입 방법 (영상 有) 안녕하세요. 오늘은 첨부파일에서 엑셀데이터를 input이나 select 태그의 값에 넣는 방법을 정리해보겠습니다. 구현방식은, 엑셀데이터를 AJAX를 통해 서버에서 읽은 다음 리스트 형태로 보내서 제이쿼리에서 값을 넣어주는 방식으로 구현해보았습니다. 아래는 구현 영상입니다. 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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83.. 2022. 4. 25. 다중 스마트에디터 폼 구현 방법 (영상 有) 안녕하세요. 오늘은 게시판 글을 쓸때, 각각 다른 폼의 스마트에디터를 사용하는 방법에 대해 알아보겠습니다. 구현 영상을 보시면 상태값을 바꿀대마다 각각의 폼이 변경하는걸 알 수 있습니다. 우선 스마트에디터의 자바스크립트 파일을 선언할 경로에 넣어줍니다. (제이쿼리는 기본적으로 있어야 작동합니다.) 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 구인/구직 구인 구직 본문 본문 Colored by Color Scripter cs HTML에서는 폼만 들어주고 대부분의 기능은 스크립트에서 진행하기때문에 별다른 건 없습니다. 특이사항은 구인/구직 폼을 변경할때 on.. 2022. 4. 20. AJAX 페이징 구현 방법!! (영상 有) 안녕하세요. 오늘은 AJAX로 페이징 처리하는 방법에 대해 이야기해보겠습니다. 저는 자바를 기반으로한 AJAX 페이징 처리 방법을 정리하였습니다. 우선 AJAX 에 대해 이야기해보겠습니다. Ajax란 Asynchronous JavaScript and XML의 약자이며, 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법 중 하나입니다. Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다. 즉, Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있습니다. 여기서 일부분만 표시할 수 있다는 것이 포인트입니다. AJAX 적용 전과 후를 나눠봤습니다. AJAX 적용 전 페이지 버튼을 누를때마다 계속해서 페이지 .. 2022. 2. 16. [JQuery] AJAX테이블 생성 후 팝업창 데이터 전달&인쇄 방법!! (영상 有) 안녕하세요. 정보 조회기능을 AJAX로 불러들여 팝업창으로 인쇄하는 기능을 정리해보았습니다. 저는 사용자페이지에서 이수증을 출력하기 위해서 아래와 같이 구현과정을 진행하였습니다. 정보를 입력하여 조회하고, 조회한 정보를 AJAX로 테이블 형태로 불러온 다음, 팝업창으로 정보를 띄어 인쇄 많이 사용하는 기능이니 만큼 많은 분들에게 도움이 되었으면 좋겠습니다. 아래는 구현한 영상입니다. 아래는 팝업창값을 부모창에 전달하는 방법을 정리한 글입니다. https://chobopark.tistory.com/5 [Spring]팝업 리스트 값을 부모창에 전달하는 방법 (영상 有) [2021년 09월 30일에 수정하였습니다] 많이들 사용하는 팝업에서 리스트 체크값을 부모창에 전달하는 방법에 대해 이야기해보겠습니다. 전에.. 2022. 1. 28. [JQuery] Fullcalendar 달력 구현 & 데이터 연동 (영상 有) 안녕하세요 오늘은 Fullcalendar란 라이브러리로 달력을 만들어보고 데이터도 연동해보겠습니다. 기능은 등록/수정/삭제/일정목록/다중 기간/기간 이동/ 등을 구현하였습니다. 아래는 영상입니다. 디자인은 어느정도 다듬어야겠지만 사용하는데는 문제없어 보이네요! https://chobopark.tistory.com/329 [Java&JSP] 달력 만드는 방법 웹 사이트의 달력 만드는 방법은 여러가지가 있습니다. 지난 포스팅에서는 자바스크립트를 이용한 달력 (FullCalendar) 을 생성해보았으며 이번에는 Java와 JSP 만으로 달력을 만드는 방법에 대해 알 chobopark.tistory.com 우선 라이브러리기 때문에 JS파일을 받아 폴더에 저장해주세요~ Controller 1 2 3 4 5 6 7.. 2022. 1. 19. [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] input/div/모든태그 focus 사용방법!! (영상 有) 오늘은 제이쿼리에서 사용하는 focus 기능에 대해 살펴보겠습니다. 흔히 페이지 유효성 검사를 진행할때 필수 기능은 아니지만 많이 사용되는 기능입니다. 흔히 input태그에 많이 사용되지만 다른 태그에도 적용할 수 있는 방법도 정리해보겠습니다. input 태그에 focus 1 2 3 4 5 6 7 8 9 10 11 if($("#resv_name").val() == ""){ alert("성명을 입력해주세요."); $("#resv_name").focus(); return false; } Colored by Color Scripter cs 보통 자바스크립트 또는 제이쿼리에서 focus 기능을 사용할 때는 input type="texdt"에 아이디 값을 주어 사용합니다. 하지만 input text가 아닌 div.. 2021. 11. 18. 이전 1 2 3 4 5 ··· 7 다음
