반응형 JAVASCRIPT & JQUERY 반응형 61 [Jquery]체크박스 전체선택 및 전체해제 또는 특정선택 제어기능 안녕하세요. 오늘은 체크박스 관련된 제이쿼리를 소개하려합니다. 아래 사진과 같이 전체를 선택하면 전부 선택하는 기능은 화면상으로 복잡할 여지가 있습니다. 해서, 복수로 선택하되, 전체를 눌렀을 경우 모두 해제되고 ‘전체’만 선택될 수 있도록 하는 제이쿼리를 정리해보려 합니다. 번외로 특정선택을 할 수 있는 제어기능도 정리하려 합니다. Jsp 1 2 3 4 5 전체 테스트1 테스트2 테스트3 테스트4 cs 우선 jsp에서는 input type에 체크박스를 넣어 체크박스 형태를 만들어줍니다. 문을 통해서 특정 값일 경우 checked를 할 수 있도록 합니다. Onclick 함수 기능은 아래에서 별도로 소개하겠습니다. Jquery 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18.. 2020. 12. 22. [HTML&JQUERY] 이메일 형식 입력하는 방법 & 유효성 검사 (영상 有) 안녕하세요. HTML 과 JQUERY를 이용하여 이메일 형식만 입력할 수 있는 방법과 이에 대한 유효성 검사하는 방법에 대해 알아보겠습니다. 흔히들 많이 사용하는데 할때마다 잃어버려서 따로 정리해보았습니다. 오직 이메일 형식의 숫자 및 영문만 입력됩니다. 아래는 구현된 이메일형식의 영상이며, 이메일형식이 틀리게 입력할 경우 경고 메세지가 나오게 됩니다. HTML INPUT 두개를 만들어 아이디와 도메인이 입력될 수 있도록하고 select박스를 이용하여 도메인 선택란을 만들어줍니다. 그리고 onclick을 이용해서 선택한 도메인이 도메인 input에 입력될 수 있도록 함수를 만들어줍니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 이메일 * @ -선택- naver.com g.. 2020. 12. 1. [Jquery]특정값에 대한 SelectBox 선택불가 기능 구현 안녕하세요. 오늘은 특정 값이 0일경우 select박스를 선택할 수 없도록 해보려합니다. 우선 위의 기능을 구현하기 위해 제이쿼리에서 필요한 문법을 정리해보았습니다. disabled : input태그가 비활성화됩니다. .pop() : 지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나, 속성을 추가합니다.(javascript속성) .not() : 선택한 요소 중 특정 선택자를 제외한 요소를 선택합니다. =* : 속성 값에 문자열이 포함 되어 있는 경우를 찾습니다. 아래 그림을 보면 툭정값이 0이 일때 jquery에서 disabled를 사용하여 선택이 안되도록 만들었습니다. 테스트 1의 값 = 1 테스트 2의 값 = 1 테스트 3의 값 = 0 HTML 각각의 select박스에 id를 부여하고 값을 넣어.. 2020. 12. 1. [Jquery] a태그 텍스트값 가져오는 방법! 오늘은 a태그의 텍스트값을 제이쿼리로 값을 가져오는 방법을 이야기해보겠습니다. 목적은 html의 a태그에 위치한 텍스트값을 제이쿼리를 통해서 서버(컨트롤러)로 보내기 위함입니다. 이렇게 정리하면 쉬워보이는데…모르면 참 어려운 제이쿼리인 것 같습니다. 우선 form태그안에 변수 kind를 선언합니다. 1 cs 그리고 사용될 a태그에서 onclick으로 함수를 정의합니다. 이때 괄호에 this를 넣어 클릭된 값을 저장할 수 있도록합니다. 1 테스트입니다. cs 그리고 스크립트부분에서 onclick함수를 정의합니다. 이때 괄호에 this의 별칭(ths)를 넣어줍니다. 여기가 가장 중요한 부분입니다! hello 변수안에 this값의 텍스트를 넣어줍니다. $(ths).text(); 그리고 hidden으로 숨겨놓은.. 2020. 11. 24. [JSTL] fc:contains()사용방법! 안녕하세요. 오늘은 JSTL에서 제공하는 함수 태그에 대해 알아보려합니다. 흔히들 C태그를 많이 사용하지만 Fn, 즉 Function(함수) 태그도 상황에 따라 유용하게 사용될 수가 있습니다. fn태그는 해당 값에서 특정 문자열이 포함되어 있는지 확인하는 여부에서 사용됩니다. 저는 fn태그를 가지고 값에따라 진행상태의 값에 대한 버튼모양을 변경할 계획입니다. 아래 결과 사진입니다. 로직은 fn함수를 이용하여 값의 데이터가 완료라고 되어 있으면 1버튼, 값의 데이터가 완료가 아닌 값이면 2버튼으로 구분지으려 합니다. 소스코드입니다. 가장먼저 fn 함수가 사용될 수 있도록 가장 상단에 fn을 선언해줍니다. 그리고c태그를 사용하여 if문을 만든 다음 Fn:contains에 값 값의 데이터를 입력합니다. 그 다.. 2020. 11. 17. [JSP] SELECT문으로 년월일 만드는 방법!! (영상 有) 안녕하세요. JSP에서 SELECT문으로 년월일 만드는 방법에 대해 이야기하겠습니다. 간단한 코드인데도 익숙하지가 않아서 계속 까먹더라구요 ㅜㅜ 아래는 구현 영상입니다. 잘 나오는것을 보실 수 있습니다. 코드로 보시죠! 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 년 ${i} 월 0${i} ${i} 일 0${i} ${i} Colored by Color Scripter cs 요약하자면 두개의 OPTION VALUE을 만들어서 첫번재는 VALUE값 없이 ‘년’을 생성하고 두번재에서는 FOREACH을 만들어서 VAR의 값을 I로 하고 begin과 end값을 설정합니다. 그리고 두번째 .. 2020. 10. 20. HighCharts(하이차트)를 자바 프로젝트에 적용하는 방법! 안녕하세요. 오늘은 자바 프로젝트에 차트를 적용하는 방법에 대해 알아보겠습니다. 우선 제가 사용할 차트는 ‘하이차트(HighCharts)’라는 녀석입니다. HighCharts는 2009년에 순수 자바스크립트로 만들어진 라이브러리입니다. 자바에서 데이터베이스를 통해 자바스크립트로 처리하는 방법으로 진행하려합니다. (2021년 2월 추가 수정하였습니다.) 요약하자면 자바 코드 작성 (컨트롤러 – 서비스 – DAO) 데이터베이스 작성(XML) 자바 스크립트 적용 차트 자체가 난해할 수 있는 부분이지만 생각보다 어렵지 않고 간단히 만들어낼 수 있습니다. 완성 화면 입니다. X축은 이름 Y축은 값으로 이루어져 있습니다. 이젠 시작해보겠습니다. 우선 하이차트(HighCharts)홈페이지에 들어갑니다. 하이차트(Hi.. 2020. 10. 16. 게시판 버튼형 카테고리 구현 방법[AJAX] 게시판을 구현하다 보면 버튼형 카테고리를 사용할 일이 있을 경우가 있습니다. 미숙하지만 개발에 필요해서 기능 구현한 후 포스팅해봅니다. 필요하신 분들에게 도움이 되셨으면 좋겠습니다. [최종 구현 화면] [개발환경] Java 1.8 eGovFrame Mysql 5.6 톰캣 v8.5 JQUERY 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 //필수 script입니다. var path = "${pageContext.request.contextPath }"; var qustr = "${searchVO.qustr}"; $(function(){ $("input:button[name='but.. 2020. 10. 2. 게시판 제목 공개/비공개 기능 구현 방법 게시판 기능 중에 제목을 일반 사용자에게는 비공개로 하고, 글작성자와 관리자는 볼 수 있는 기능에 대해 정리해보려 합니다. 대략적 흐름은 등록 페이지에서 공개/비공개 컬럼에 Y 또는 N으로 값을 주고, 리스트에서 if문과 choose문으로 설정하는 형태입니다. 아래는 결과 화면입니다. Create.jsp 등록 페이지에서 공개/비공개 컬럼에 Y 또는 N으로 값을 줍니다. 1 2 3 4 공개 비공개 Colored by Color Scripter cs list.jsp if문과 choose문을 사용하여 공개/비공개 컬럼 값이 N일 경우 비밀글로 설정하고 본인 및 권한1인 관리자는 보이도록 하고 아니면 비밀글 설정합니다. 공개/비공개 컬럼 값이 N일 경우 단순 글의 제목을 보여줄 수 있도록 합니다. 1 2 3 4.. 2020. 10. 2. 이전 1 2 3 4 5 6 7 다음
