웹개발자의 기지개

ajax, jquery 로 이미지 업로드시키기 1  [기존강의 참고]https://wonpaper.tistory.com/72 사진등록 버튼을 눌러 간단히 ajax 형태로 이미지 업로드 처리를 해보자.관련 백엔드는 PHP 언어를 기본으로 해보았다. [실제 화면 페이지] 123456789101112131415161718192021222324252627282930313233343536373839script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> form name="fphoto" method="post" enctype="multipart/form-data">input type="text" id="file_route" onfocus="..

jQuery 함수중에 fadeIn 과 fadeOut 를 이용하면 일종의 애니메이션 화면처럼 서서히 나타나게 하거나, 서서히 사라지게 할 수 있다. 속성에 숫자를 바꾸면 그 효과 강도를 세밀하게 나타낼 수도 있다. 소스를 대략 정리해 보았다. 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 function displayChk(no) { document.getElementById("introd_project1_q" + no).style.display = "none"; //$('#introd_project1_a'+ no).show('slow'); $('#introd_project1_a'+ no).fadeIn(450); //documen..

위의 이미지 화면처럼 여러개의 checkbox 와 radio 박스가 혼재되어 있을경우에 jquery 로 아주 간단히 체크여부를 확인하도록 하는 소스를 정리해 보았다. 물론 javascript 형태로 for 문을 돌려서 하는 방법도 있지만, 본 소스처럼 jQuery 를 이용하면 아주 간단히 한줄로 처리할 수 있다. [ 기존 javascript 방법 참고 ] https://wonpaper.tistory.com/308 [javascript] checkbox 전체선택, 전체해제, 선택한 checkbox 내용확인하기 1 javascript 소스상으로 checkbox 의 전체선택, 전체해제 기능과 체크한 checkbox 만의 내용을 확인해보는 간단한 예제를 만들어 정리해 보았다. 실무상으로 자주 쓰이기 때문에 반드..

위의 캡처이미지처럼 도장이 아래 y축으로 100% 만큼 아래로 애니메이션이 되면서 도장이 찍히도록 코딩해보자. 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 .translate-y{animation: translatey 1s linear 1 ;} @keyframes translatey{ 0%{transform: translateY(0);} 100%{transform: translateY(100%);} } 스탬프찍기 function stampClick(){ $("#stampIcon").addClass('translate-y'); set..

보통의 백엔드 개발할때 파일 다운로드하면 파일을 다운로드받고 그냥 끝나버린다. 밋밋히다. ~~ 그래서, 위의 로딩중 이미지를 jquery 플러그인 소스를 찾아서 삽입해 보았다. 멋지다 ~~ 쿨~~~ https://gasparesganga.com/labs/jquery-loading-overlay/ jQuery LoadingOverlay - Gaspare Sganga Do you like this plugin? Great! Then why don't you try my other jQuery plugins ? --> Contents Quick Demo Try jQuery LoadingOverlay! Get it GitHub View project on GitHub or download the latest r..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 .box {margin:20px auto;} .content { width:800px; padding:10px; border:1px solid #ddd; } 글쓴이 : 강감찬 오늘은 조은날 고고싱동해물과 백두산이 마르고 닳도록 글쓴이 : 이순신 Colored by Color Scripter cs 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 $(document).ready(function(){ $('.box').each(function(){ /..

1 2 3 4 5 6 7 8 9 TOP $(function(){ $("#toTop").click(function(){ $("html, body").animate({scrollTop:0},300); }); }); Colored by Color Scripter cs 300 수치를 더 늘리면 더욱 천천히 이동한다.

부트스트랩의 모달창을 띄우고, 이러한 모달이 닫힐때 특정 이벤트를 돌리고 싶을때, hide.bs.modal - 이 이벤트는 hide 인스턴스 메서드가 호출 될 때 즉시 시작됩니다. hidden.bs.modal - 이 이벤트는 모달이 사용자로부터 숨겨지면 시작됩니다 (CSS 전환이 완료 될 때까지 대기합니다) 1 2 3 4 5 6 7 $(document).ready(function(){ $('#staticBackdrop').on('hidden.bs.modal', function () { ..... }); }); Colored by Color Scripter cs 참고 : stay-hungry.tistory.com/24