개발이야기/jQuery58

• 

  [jQuery] 이미지 자동으로 움직이기, 이미지 반복해서 움직이기 (animate) animate 메서드를 활용해서 이미지를 반복적으로 움직이게 했습니다. 스타일 범위에서 움직이게 하였고, 행위가 끝나고 콜백 함수를 통해서 반복적으로 실행하였습니다. 사용법 $(선택자).animate({스타일 : 값}, 속도 ,콜백 함수); 사용 예제 개발이야기/jQuery 2022. 10. 14.

• [jQuery] bootstrap(부트스트랩) 레이어 팝업/모달창(modal) 띄우기 흔히 레이어 팝업/모달 창은 기존의 페이지 위에 레이어를 새로 올리는 것을 말합니다. 기존의 팝업은 새로운 윈도 창이 열리는 것에 반하여 레이어(모달)는 사용자에게 보여주고 싶은 메시지나 다음 진행사항으로 넘어가기 위해 필요한 사항을 노출할 수 있습니다. 아래 예제는 bootstrap(부트스트랩)으로 간단히 모달 창을 구현해 봤습니다. 페이지에 진입 하자마자 모달 창이 뜨는 소스입니다. 아래를 응용하셔서 버튼을 클릭해서 모달을 띄우고 싶다면 이벤트 후 modal('show')를 통해 호출 하실 수 있습니다. 모달 띄우기 modal('show') 모달 숨기기 modal('hide') × 타이틀 내용 입력 닫기 저장 개발이야기/jQuery 2022. 10. 11.

• [jQuery] 자식 요소 찾기, children() 사용법 / 테이블 행 정보 가져오기 테이블의 행(tr)을 클릭해서 행의 값(td)을 가져오는 소스 코드입니다. tr의 class에 'row_a' 값을 넣고 클릭시 this는 사용자가 클릭한 객체를 가지게 됩니다. tr을 기준으로 자식 요소를 찾을 수 있습니다. td.eq로 선택한 행에 대해서 데이터를 가져올 수 있습니다. [td.eq(1) = email] 간단한 소스 이므로 다른 요소를 찾는 함수랑 응용해서 같이 사용하시면 됩니다! ↓↓↓↓↓ script ↓↓↓↓↓ html 번호 ID 담당자명 연락처 1 abc@gmail.com 홍길동 010-1234-1234 2 def@gmail.com 심봉사 010-5678-5678 HTML 삽입 미리보기할 수 없는 소스 개발이야기/jQuery 2022. 10. 6.

• [jQuery] 휴대폰 번호, 전화번호 자동으로 하이픈 넣기 (keyup) 회원가입 폼을 만드실 때 휴대폰 번호와 전화번호의 입력을 받을 때가 있습니다. 이때 사용자의 입력값에 자동으로 하이픈(-)을 넣어주는 소스 코드입니다. 입력값의 길이를 체크해서 하이픈(-)을 넣어주고 있습니다. html id 부분만 수정하시면 바로 사용 가능하십니다! HTML 삽입 미리보기할 수 없는 소스 개발이야기/jQuery 2022. 10. 5.

• [jQuery] mouseover, mousemove, mouseout 마우스 이벤트 이벤트를 발생시킬 태그(gallery)에 마우스 커서를 오버하면 이미지가 자세히 나타나고, 해당영역에서 마우스를 이동하면 오버한 이미지의 위치가 변경된다. 마지막으로 마우스 아웃시 해당 이미지는 사라진다. 간단한 소스 이므로 예제를 보시면 쉽게 이해 되실거라 믿습니다. mouseover() - 이벤트 태그의 영역에 들어왔을때 발생 mousemove() - 이벤트 태그에서 이동시 발생 mouseout() - 이벤트 태그의 영역 아웃시 발생 개발이야기/jQuery 2022. 9. 27.

• [jQuery] html 화면 PDF 다운로드 html 영역을 PDF 다운로드 할수 있는 소스 입니다. 최상단에는 jspdf.js 와 html2canvas.min.js 를 cdn을 이용해 로드해 줍니다. div id="report" 부분을 전체영역으로 설정했으며, 그 안에 영역도 세분화 하였습니다. (a,b,c,d) 스크립트 all_area_array 전체 영역을 잡았으며, pdf 다운영역은 b영역을 제외한 a,c,d 부분만 다운로드 처리 하였습니다. 간단한 소스 이므로 직접 해보시면 될것 같습니다. A 영역 입니다. B 영역 입니다. C 영역 입니다. D 영역 입니다. pdf 다운 개발이야기/jQuery 2022. 9. 26.

• [jQuery] 테이블(table)행 추가/삭제 jquery 동적 테이블 행 추가/삭제 소스 입니다. 테이블을 미리 생성하고, 추가 버튼을 통해서 입력폼을 생성 합니다. 입력폼 오른쪽에 삭제 버튼을 두어 원하시는 입력폼은 삭제 하실수 있습니다. 입력폼의 마지막 번호를 가져와 +1씩 증가하는 NO를 확인 하실 수 있습니다. 추가로 생성되는 입력폼은 숫자만 입력되도록 제한을 걸어 봤습니다. (onkeyup) 아래 예제를 통해 소스를 같이 보시면 이해하기 쉽습니다. No 제목 내용 추가내용 추가 ↓↓↓↓↓ 아래 예제를 통해서 추가/삭제를 해보세요! HTML 삽입 미리보기할 수 없는 소스 개발이야기/jQuery 2022. 9. 23.

• 

  [jQuery] 상하롤링, 위아래 롤링 공지사항을 노출하기 위해 자주 사용하는 상하롤링, 위아래 롤링의 간단한 사용법 입니다. 소스 내용에 설명있으니 참조해서 사용하시면 됩니다. NOTICE [공지] 공지1 알려드립니다. [공지] 공지2 알려드립니다. 개발이야기/jQuery 2022. 9. 21.

• 

  [jQuery] Fullcalendar 달력, 데이터 연동 (ajax) Fullcalendar 라이브러리로 달력을 구현하고, ajax 통신을 통해서 달력에 데이터를 표시 해보겠습니다. fullcalendar 라이브러리를 선언해주시고, 달력의 영역을 지정 해 줍니다. (id = "calendar") 달력의 초기설정값을 세팅해주시고, 저는 데이터를 보여드리기 위해 css를 약간 수정하였습니다. 달력의 데이터는 event 함수를 호출하시는 부분을 참고하시면 됩니다. ajax 통신을 통해서 데이터를 달력에 표시할 수 있습니다. 임시로 test.php 페이지에는 데이터를 넣어놨습니다. ajax 를 통해서 아래의 데이터를 가져오게 됩니다. eventRender 함수를 통해서 데이터에 표시되는 달력을 가공할수도 있습니다. 아래는 test.php 소스 입니다. (입맛에 맞게 가공하시면 됩.. 개발이야기/jQuery 2022. 9. 7.

• 

  [jQuery] datetimepicker 사용방법 (날짜/시간선택) datepicker은 날짜 지정만 가능하다. 시간까지 지정하고 싶을때는 datetimepicker 으로 사용하면 편리하다. datetimepicker 시작일시 : , 종료일시 : 개발이야기/jQuery 2022. 9. 6.