프로그래밍/jQuery 제이쿼리
-
ajax - 간단하게 파일 업로드 with 제이쿼리프로그래밍/jQuery 제이쿼리 2022. 6. 23.
jsp or html 소스 name 태그는 테이블과의 컬럼명이 일치할 것. js 소스 function uploadFile() { $.ajax({ url: "/upload", type: "POST", data: new FormData($("#uploadForm")[0]), enctype: 'multipart/form-data', processData: false, contentType: false, cache: false, success: function () { // 성공할시 메세지 }, error: function () { // 실패할시 메세지 } }); } 스크립트 단에서 함수 호출로 실행 or 버튼에 스크립트 기능 넣어주기로 실행
-
제이쿼리 - 모달 다이아로그 및 여러 알림창들프로그래밍/jQuery 제이쿼리 2021. 11. 4.
accordion 예제 자바란 ? 자바는 ... CSS 란 ? CSS 는 ... HTML 이란 ? HTML은 ... javascript 란 ? javascript는 ... datepicker 예제 데이트피커의 경우 옵션을 주지 않으면 미국식으로 나오기 때문에 따로 옵션을 줘야한다. 대화상자 예제 간단한 대화상자 모딜리스 대화상자 우편번호-모달 대화상자 모달 대화상자-AJAX 모달 대화상자-CLOSE 모달 대화상자-CSS 변경 간단한 대화상자 대화상자 입니다. 검색 우편번호 동이름 : 대화상자 확인 취소 대화상자 대화상자 입니다. 대화상자 예제 대화상자 대화상자 간단한 대화상자 입니다. 모달 다이어로그에 색상 부여 및 타이틀바 제거 첫번째 두번째 세번째 테스트 1 테스트 2 테스트 3
-
제이쿼리 - 여러 애니메이션 효과들프로그래밍/jQuery 제이쿼리 2021. 11. 1.
-- 페이드(fade) 효과 .fadeIn() : 선택한 요소의 CSS opacity 속성값을 높여가며 요소를 나타지게 함. .fadeOut() : 선택한 요소의 CSS opacity 속성값을 높여가며 요소를 사라지게 함. .fadeToggle() : 선택한 요소에 fadeIn() 메소드와 fadeOut() 메소드를 번갈아가며 적용함. .fadeTo() : 페이드 효과에서 사용하는 opacity 속성값을 직접 설정함. -- 효과 속도 설정 인수로 밀리초(ms)로 설정하거나 "slow", "fast"와 같은 예약어를 전달하여, 이펙트 효과의 속도를 설정할 수도 있다. $(function() { $(".faq-body h3.question").click(function() { var $answer = $(t..
-
제이쿼리 - 토글 toggle프로그래밍/jQuery 제이쿼리 2021. 11. 1.
토글은 요소가 보이면 보이지 않게 안보이면 보이게 만드는 메소드 이다. 같은 기능을 show() 와 hide()를 이용해서 만들 수 있는데 토글을 사용하면 코드가 더 간결해지면서 같은 효과를 낼 수 있다. (다만 show() hide()는 속도를 조절 할 수 있어서 좋음) $(function() { $(".faq-body h3.question").click(function() { $(this).next(".faq-body div.answer").toggle(); }); }); faq-body 클래스를 받고있는 태그 안에 h3 태그인데 question 클래스를 받고 있는 h3을 클릭하면 다음 태그를 토글 하겠다 (숨겨져 있으면 보이게하고 보여지고 있으면 숨기겠다.)
-
제이쿼리 - 스크롤 바 다루기프로그래밍/jQuery 제이쿼리 2021. 11. 1.
$(function() { $(".btn1").on("click",function(){ $(".box").scrollLeft(70); $(".box").scrollTop(20); var left = $(".box").scrollLeft(); var top = $(".box").scrollTop(); $("#boxResult").html("Left:"+left+",top:"+top+""); }); $(".box").on("scroll",function(){ var left = $(".box").scrollLeft(); var top = $(".box").scrollTop(); $("#boxResult").html("Left:"+left+",top:"+top+""); }); }); /* -- 요소의 스크롤 ..
-
제이쿼리 - 응용(댓글, 답글, 리스트 옮기기)프로그래밍/jQuery 제이쿼리 2021. 11. 1.
댓글쓰기 - 타인을 비방하거나 개인정보를 유출하는 글의 게시를 삼가 주세요. 댓글 등록 댓글 50개 [댓글 목록, 1/10 페이지] 홍길동 2017-11-10 | 삭제 댓글 내용 입니다. 답글 0 좋아요 5 싫어요 2 └ 답글 등록 가가가 2017-10-10 | 삭제 안녕 하세요. 답글 1 좋아요 7 싫어요 1 └ 후후후 2017-11-22 | 삭제 답글 입니다. └ 답글 등록 나나나 2017-10-08 | 삭제 자바를 공부하자. 답글 0 좋아요 3 싫어요 0 └ 답글 등록 1 2 3 - 답글 버튼을 숨기거나 보이게 하는 기능 - 답글 등록 기능 - 댓글 등록 기능 답글 버튼 - 바디 영역에서 클래스 btnReplyAnswerLayout가 클릭 되면 함수가 실행 된다. - 실행되는 함수는 클릭된 놈의 가..
-
제이쿼리 - 기초(4)프로그래밍/jQuery 제이쿼리 2021. 10. 30.
$("form input[name=agree]").click(function(){ if($(this).is(":checked")) { $(".btnSend").prop("disabled", false); } else { $(".btnSend").prop("disabled", true); } }); name이 agree인 input박스는 type이 checkbox 이다. (약관 동의 용으로 쓸 거임) 즉 이 체크 박스를 눌렀을때의 이벤트를 설정 하는건데 if로 체크박스가 체크 되었을때와 체크 되지 않았을때의 상황을 준비 할 것이다. 체크박스가 체크 되어 있다면 => .btnSend(보내기 버튼)의 속성을 보이게 바꾼다. (prop는 속성을 변경하게 해줌) 체크박스가 체크 되어 있지 않다면 => .btnSe..