반응형 JAVASCRIPT & JQUERY 반응형 61 게시판 페이지 개수별 검색(selectbox 검색) 페이지에 10개/20개/30개씩 보이도록 설정하는 기능을 간단히 이야기해보겠습니다. 전체 소스를 올리면 너무 양이 많아져서 페이징 기능이 완료되었다는 가정하에 작성하였습니다. 페이징을 완료하였다면 개수별 검색 기능은 jsp에서만 간단히 작성하면 구현할 수 있습니다! 아래는 구현 화면입니다. JSP Onchange 함수를 통해서 자바스크립트로 보냅니다. option값은 c:if문을 사용하여 각각의 값일 경우 선택값이 변하지 않도록 sleected값을 설정합니다. 1 2 3 4 5 6 7 10개씩 보기 20개씩 보기 30개씩 보기 Colored by Color Scripter cs Script Idx 값과 select id에 선언한 값을 각각 변수에 담습니다. 그리고 조건으로 만약에 특정 페이지 값을 선택할.. 2020. 10. 2. 라디오 버튼에 따라 입력칸 보이기/숨기기 특정 라디오 버튼을 눌렀을 때, div값이 보이고 숨겨지는 것을 알아보겠습니다. 우선 저는 div값이 숨겨져 있다가, ‘기타’라는 라디오버튼을 누르면 div값이 나타나는 기능으로 하도록 하겠습니다. 결과화면입니다. 적용 전 적용 후 JSP 특정 버튼인 기타 부분의 ID를 다른 라디오 버튼 ID와 다르게 설정합니다. 그리고 DIV ID 값을 지정해줍니다. 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 신청 경로 온라인 최초 신청 방문 사후 관리 유관기관 추천 지인소개 기타 Colored by Color Scripter cs JQUERY 라디오에서 ID값이 기타부분인 것을 클릭할 경우 체크값이 있으면 Di.. 2020. 10. 2. 체크박스(checkbox) 클릭 시, 활성화/비활성화 방법 (2021년 4월 11일에 내용을 수정하였습니다.) 등록페이지에서 유형에 따라 입력 가능/불가능 항목들이 존재합니다. 특정 체크박스 값에 따라 비활성화되고 다시 활성화되는 소스 코드를 정리해보겠습니다. 우선 결과 화면입니다. 다른곳을 클릭할 시의 활성화 특정 체크박스를 클릭시 비활성화 JSP 일반 체크박스 값들을 여러 개 설정해주었는데 여기서 특정 체크박스만 반응하도록 설정하기 위해서 예비창업자란 항목의 id값을 다른 값들과 달리 주었습니다. 그리고 해당되는 부분들에 대해 클래스에 applicable이란 놈을 넣어줍니다. 그래서 이녀석들을 일괄적으로 적용시키는거죠. 아이디값은 문서상 한개만 사용되는 규칙이 있기때문에 중복해서 만들어 주기가 곤란합니다. 그래서 중복 가능한 클래스를 여러개 만드는거죠! 1 .. 2020. 10. 2. [JSP] 다음 우편번호 서비스 적용 방법 안녕하세요. 오늘은 JSP에서 다음 우편번호 서비스를 적용시키는 방법에 대해 이야기해보겠습니다. 홈페이지 개발을 하다 보면 회원가입 및 정보 등록 화면에서 우편번호, 즉 주소를 넣는 공간은 항상 있기 마련입니다. 구글에서 ‘다음 우편번호’ 라고 치면 방법이 나오지만 설명을 읽으면서 찾기 귀찮으신 분들을 위해… 간단히 소스만 공유하고자 합니다. 우선 구현 화면입니다. JSP 1 2 3 4 5 6 7 8 9 10 주소 우편번호찾기 Colored by Color Scripter cs Javascript 자바 스크립트는 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 3.. 2020. 10. 2. [Jquery] 라디오 버튼 동의/미동의 기능 구현 (영상 有) 사이트를 만들다 보면 동의서에 대한 동의/미동의 기능을 구현할 경우가 종종있습니다. 제이쿼리를 통해 제가 알고 있는 두가지 방법을 공유해드리니 도움되셨으면 좋겠습니다. 첫번째는 한개 항목의 라디오 버튼 / 두번째는 다중 항목의 라디오 버튼의 정리 내용 입니다. 전체동의버튼 기능도 추가하였습니다. 첫번째! 한개의 항목에 대한 라디오버튼 처리입니다. 아래 화면과 같이 하나의 라디오 버튼을 가지고 동의/미동의 기능 구현 입니다. 요약하자면 함수를 부르는 onclick 값에 obj값을 넣어서 obj값이 Y 또는 N 일때 if문을 통해 값을 구하는 것입니다. Y일 경우 check가 되어 있다면 form문의 action 주소로 넘어갑니다. 최종 완료 화면입니다. JSP 1 2 3 4 5 6 7 8 9 10 내용내용.. 2020. 10. 2. Select문으로 일정한 시간 설정 방법 Select문으로 일정한 시간 설정 방법 홈페이지 제작 시, 시간을 일정 간격으로 설정해야하는 일이 아래와 같이 있을 수 있습니다. select 문으로 시간을 설정해야하는데 이 경우는 좀 난해하더라구요.. 초보자에게 있어서는 쉬우면서도 조금 어려울 수 있는 부분을 정리해보았습니다. 요약하자면 Select 문에 디비 컬럼을 넣어주고, 중복 forEach문으로 i와 j의 변수 값을 넣어 돌려줍니다. J 값을 ${j*30}으로 설정해주면 일단은 원하는대로 30분 간격으로 나옵니다. 하지만 제가 원하는건 14:00 ~ 17:00시 까지인데 여기까지만하면 14:00 ~ 17:30분까지 나타나게 됩니다. 여기서 가장 중요한 포인트는 breakpoint부분입니다. breakpoint라는 변수를 선언하여 breakpo.. 2020. 10. 2. 여러 개의 Select 값을 하나의 컬럼으로 합치는 방법 여러 개의 Select 값을 하나의 컬럼으로 합치는 일이 간혹 생깁니다. 예를 들어 날짜가 있겠네요. 년월일시분초 이 각각의 값들을 하나의 컬럼으로 합치는 방법을 정리해보겠습니다. 요약하자면 select부분에서 id값으로 제이쿼리에서 읽을 수 있도록 설정합니다. submit으로 제이쿼리로 넘겨주면 var을 통해 만든 변수에 id값을 넣어주고, 값을 넣을 컬럼(prom_rec_sdate)에 select id 항목들을 집어 넣습니다. 그리고 가장 중요한 부분은 값이 적용될 수 있도록 form태그 안에 hidden 값으로 값을 넣을 컬럼(prom_rec_sdate)을 넣어주면 끝입니다! 글은 아무리 잘 써도 모르는 부분에 있어서는 이해가 잘 안되는거같아요 ㅎㅎ 코드를 통해 확인해 보겠습니다. JSP selec.. 2020. 9. 29. [JSTL] 연락처 나누는 방법 [JSTL] 연락처 나누는 방법 안녕하세요 ? 게시판을 만들면서 게시판 정보 중 하나인 연락처 컬럼에 연락처가 이렇게 들어가 있을 겁니다 (ex : 010-3213-2132) 수정화면에서는 input 칸이 세개일 경우 나눠야하는데 이것을 간단히 JSTL로 나눌 수 있는데요. JSP에서만 간단하게 작업을 하면 구현할 수 있습니다. CONTROLLER 컨트롤러에서는 VO의 정보를 IDX를 통하여 searchVO라는 이름으로 JSP로 빼줍니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 @@RequestMapping(value = "update.do") public String update( @ModelAttribute("searchVO") tbl_VO searchVO, @RequestParam(".. 2020. 9. 19. [HTML&JQUERY] 연락처 숫자만 입력하는 방법 & 유효성 검사 (2021년 3월 24일 문구를 추가하였습니다.) 안녕하세요 ? HTML 과 JQUERY를 이용하여 연락처에 숫자만 입력할 수 있는 방법과 이에 대한 유효성 검사하는 방법에 대해 알아보겠습니다. 흔히들 많이 사용하는데 할때마다 잃어버려서 따로 정리해보았습니다. 한글이나 영문등은 사용하면 자동으로 지워지고 오직 숫자만 입력됩니다. HTML 우선 HTML입니다. 여기서는 INPUT을 3개로 만들어주고 NAME과 ID값을 3개로 만들어줍니다. 여기서 포인트는 maxlength를 이용하여 숫자 제한을하며 여기서 가장 중요한!! Onkeyup을 통해서 제이쿼리를 사용할 수 있도록 합니다. onkeyup="inputOnlyNumberFormat(this);" inputOnlyNumberFormat를 선언해야 반영이.. 2020. 9. 17. 이전 1 ··· 3 4 5 6 7 다음
