최근의 작업 중에 대용량 파일을 업로드할 필요성이 있어 관련 플러그인을 서치 후 사용하게 된 jQuery File Upload 이다. 큰 파일의 경우 여러 개의 파일로 쪼개서 업로드 하기 때문에 서버 용량이 허용하는 한 파일을 업로드할 수 있다. 중간에 오류가 나지 않는다는 전제하에서 말이다. 그리고 파일 업로드가 ajax 로 처리 되기 때문에 시각적으로도 좋은 점이 있다. 파일 …
영카트5의 분류 순서를 조금 더 쉽게 조절해 보고자 jquery sortable 플러그인을 적용했다. 다만 이렇게 할 경우 등록된 분류 개수가 많을 경우 조절이 생각만큼 쉽지 않을 수도 있다. 분류를 한 페이지에 모두 표시하고 순서를 조절하기 때문이다. 대략적인 형태는 위 이미지와 같이 표시가 되며 1차 분류는 1차 분류끼리 순서를 변경할 수 있으며 1차 분류의 2차 분류끼리 또 …
웹 프로그램에서 가장 많이 사용하는 스크립트가 form에서 필수 입력 부분을 체크하는 스크립트일 것이다. 아래 코드는 input 등에 지정된 required 속성을 이용해서 필수 입력을 체크하는 것이다. jQuery(function() { jQuery(document).on(“click”, “form.ajax button:submit, form.ajax input:submit, form.ajax input:image”, function(e) { e.preventDefault(); e.stopPropagation(); var f = this.form; var $f = jQuery(f); var $b = jQuery(this); var $t, t; var result …
사용자가 팝업창을 닫으려고 할 때 위 이미지와 같은 경고 알림창을 표시하는 방법이다. IE에서만 위와 같은 창이 표시되고 크롬 등에서는 아래와 같은 창이 표시된다. 팝업창을 닫으시겠습니까? 라는 메세지는 표시되지 않는다. 데모 : http://demo.codepub.net/unload.html 팝업창을 닫기 전에 알림창을 표시하기 위해 beforeunload 이벤트를 사용한다. 다음은 팝업창의 소스코드이다.
ajax 요청 처리를 순차적으로 처리할 필요성이 있어 jQuery ajaxQueue 플러그인을 사용했다. 데모 : http://demo.codepub.net/ajaxqueue.html <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>ajaxQueue Demo</title> <link rel=”stylesheet” href=”./css/common.css”> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script> <script src=”./js/jquery.ajaxQueue.min.js”></script> </head> <body> <div class=”ajaxQueue”> <ul id=”ajaxQueue-items”> <li>Item 0</li> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <ul id=”ajaxQueue-output”> </ul> <div><button type=”button” id=”run”>Run</button></div> </div> <script> $(function() { $(“#run”).on(“click”, function(e) …