콤보박스를 만들 때 흔히 사용하는 select 태그와 관련해 유용한 플러그인을 하나 소개해드릴까 합니다. select 태그에는 일반적으로 option 값에 대한 검색이 불가능합니다. 하지만 select2 플러그인을 추가하면 option 값을 검색할 수 있습니다. 클라이언트의 요청으로 어떻게 구현하면 좋을지 구글링하던 중 발견한 플러그인으로 사용법이 간단하여 편하고 유용하게 잘 사용했던 기억이 납니다. 1) 사용을 위해 아래 링크를 프로젝트에 Import 하는 방법이 있고, 파일을 내려받아 Import 하는 방법이 있다. 아래 사이트에서 자세한 설명 확인이 가능하다. Installation | Select2 - The jQuery replacement for select boxes Installation ..

Bootstrap을 이용해 Modal창으로 기능을 구현하던 중 발견한 버그(?)를 해결하는 법을 포스팅으로 남깁니다. Modal 창 안에 있는 modal-body(클래스)에 특정 페이지를 load 시킨 다음, 해당 페이지에서 입력창에 포커스를 주고자 했다. load가 되고 Modal 창이 열리면 위와 같이 창이 뜨면서 포커스가 되야 된다. 그런데 되지 않았다. 정확하게는 첫 오픈시에는 포커싱이 되는데 두번째 오픈부터 되지 않았다... 프로세스는 아래와 같다. Modal open ☞ A페이지 load ☞ Modal show ☞ A페이지에 $(document).ready(function() { $("#id").focus(); }); 작성 이해가 가지 않아서 다양하게 시도를 해보고 구글링을 했다. 다행히도 나..

스크립트 함수를 실행하는 방법은 다양하다. 버튼을 클릭한다거나, 페이지가 로드되는 경우 등, 우리는 이벤트가 발생한 이후이거나 또는 이전인 경우. 원하는 경우에 함수를 실행시킬 수 있다. - 버튼을 클릭했을 때 함수 실행 TEST함수실행 - html 페이지가 화면에 뿌려진 이후 함수 실행 TEST함수실행 이처럼 스크립트에서 함수는 함수의 이름을 호출함으로써 실행이 가능하다. 그런데 최근에 새롭게 알게된 내용이 있다. 문자열로 된 함수명을 인자값으로 받아 함수를 실행할 수 있었다. fnct1이라는 함수가 있다고 했을 때, fnct1라는 문자열을 인자값으로 받아 함수를 호출하는 것이다. 아래 코드를 보면 두 개의 버튼에서 클릭시 각 인자값을 태워 callFunction 함수를 호출하고 있c다. TEST함수실..

input 필드 초기화를 위해 $("#id").val() 또는 $("#id").empty() 등 상황에 따라 방법이 다양하지만 간단한 방법을 한가지 소개해보려고 합니다. reset() 메소드 form의 아이디가 frmW인 경우 아래와 같이 한다면, $("#frmW")[0].reset(); frmW의 안에 있는 input(+file 타입), select, check, , textarea 까지 모든 내용이 초기화가 된다. 메일작성 보내기 임시저장 초기화 제목 받는사람 참조(CC) 첨부 No 파일명 크기(Bytes) 수정 (파일 리스트가 보여지는 건.. 파일 선택시 선택된 파일의 리스트를 그려주는 기능을 넣었는데 아마 이 부분은 table을 그려주기 때문에 reset() 함수 이외에 추가로 지워주는 기능을 넣..

화면 개발을 주로 jQuery를 이용해서 했었는데 얼마 전 jQuery UI란 것을 알게 되었습니다. jQuery UI는 드래그, 드롭, 리사이즈 등 다양한 기능뿐 아니라 CSS를 이용하여 UI를 손쉽게 구현할 수 있도록 제공해주는 라이브러리로 소개하고 있습니다. 유용하게 잘 사용할 수 있을 것 같아요 :) 아래 예제는 IE 11, Chrome, Microsoft Edge에서 테스트해봤고 정상적으로 작동했습니다. Draggable 이 기능은 레이어 팝업을 드래그해야 하는 경우 가장 유용하지 않을까 싶다. 설정은 간단하다. jQuery 라이브러리를 먼저 임포트해주고(다운로드하여 불러와도 무관하다) 함수를 이용하면 끝이다. Featured Special title treatment With supportin..

자바스크립트를 사용해 두 날짜의 차이를 비교하기아래 예제는 문자열로 된 값을 날짜 타입으로 변경해서 두 값을 비교하는 방법이다.문자열을 날짜 타입으로 변경하는 이유는 각각의 월마다 말일이 다르기 때문이다."2018.02.25 ~ 2018.03.05"를 비교할 때, 2월은 28일까지밖에 없으니 날짜로 비교하는 것이 정확하다. 12345678910111213141516171819202122232425262728293031323334353637 function calculus(){ var sta_ymd = document.getElementById("STA_YMD").value; var sta_ymd_arr = sta_ymd.split("."); var end_ymd = document.getElementBy..

자바스크립트를 사용하여 문자열로 된 값을 날짜 타입으로 변환하기 4 ~ 6 라인과 같이 문자열을 잘라서 new Date()로 생성해준다. 8 라인의 mm-1을 해준 이유는 자바스크립트의 Date 함수에서 월(月)에 해당하는 날짜는 0부터 시작을 하기 때문이다. 따라서 문자열 3은 날짜 타입의 2로 변환이 되어야 한다. 날짜 타입의 생성자를 만들고 나면 해당 생성자로 날짜 메소드 사용이 가능하다. ☞ 참고 getMonth() 메소드를 사용할 때는 +1을 해주는 것을 잊지 말자. +피드백은 언제나 환영입니다 :)

자바스크립트에서는 현재 날짜를 구하는 함수를 제공한다. new Date() Date 객체는 생성자로 호출해 사용해야 한다. 생성자를 만든 후 찍어보면 아래와 같이 나온다. 12var dt = new Date();alert(dt);cs 이 생성자 함수를 이용해 현재 날짜를 얻을 수 있다. 123456789101112131415161718192021222324252627현재?? : Colored by Color Scriptercs var Month = "" + (dt.getMonth()+1); var Day = "" + dt.getDate(); if(Month.length