그리드 사이즈를 브라우저 화면을 늘리고 줄임에 따라 유동적으로 변경하는 예제이다. 최초 크기다 다른 창을 띄우는 것도 포함한다. 설명은 주석으로 대체한다. $(document).ready(function() { // 그리드 셋팅(설정)이 끝나고 아래 함수 호출 (lodeComplete 이 아님) // 그리드 리사이즈 gridResize("jqGrid"); // window resize에 등록 setGridResize("jqGrid"); // 최초 그리드 사이즈 조정 }); /* * 그리드 리사이즈 셋팅 - GridParam 중 width 관련한 값 (autowidth, width) 는 주석처리 * 주의사항 - gridResize 함수 중 $("#cont").width() 부분은 그리드가 그려질 div 너..

jqgrid 컬럼을 show hide (보여주거나 숨기는)기능을 구현한 예제입니다. jqgrid 사용 필수입니다. 우측 상단의 checked box로 컬럼들의 show hide를 결정한다. 모든 컬럼을 대상으로 할수도 있고 직접 입력한 컬럼을 대상으로 할 수 있다. 실행 방법 및 설명은 소스와 주석을 참고하면 쉽게 따라할 수 있을거라 생각한다. jsp 파일 jqgrid loadComplete 함수 loadComplete : function(data){ // 컬럼 속성 // var colModel = $("#jqGrid").jqGrid("getGridParam", "colModel"); // 컬럼명 // var colNames = $("#jqGrid").jqGrid("getGridParam", "colNa..

조사 내용 파일 다운로드 : 셀렉트박스 플러그(selectBox Plugin)인 모음이다. 사업 특성에 맞는 플러그인을 조사하게 되었다. 셀렉트 박스의 선택 기능 이외에 다중 선택기능, 이미지나 다른 정보들을 보여주는 기능 등의 많은 기능을 셀렉트박스에 담아야할 경우가 생겼기 때문이다. 첨부파일 내부의 각 폴더의 압축파일은 2015.04.09 일 기준으로 다운받은 샘플이니 참고하길 바란다. 각 샘플은 실행이 안 될 수 있다. (인터넷 환경, jquery 셋팅, 버전 등.....) 첨부파일 내부의 정리.xlsx 을 참고하기 바란다. jquery selectBox plugin 이름 Bootstrap Multiselect URI http://www.jqueryrain.com/?FusAX1FA GIT https..

무료 버튼 겸용 아이콘 사이트를 추천해요 ㅎㅎ 무료(상용 가능)이고 (하단의 라이센스 정보를 포함하고 있으니 참고 바람) 아이콘 종류가 많고 사용이 간편하다. 버튼으로도 사용이 가능하고 때로는 이미지 아이콘처럼 사용도 가능하다 이미지를 폰트로 만든다고 하는데 개념이고 뭐고 잘 모르겠고 이미지보다 낫다고들 한다. 일단 편하고 종류가 많고 이미지작업을 안해도된다. http://fortawesome.github.io/Font-Awesome/ 여기에 방문해서 화면의 다운로드를 눌러 다운 받으면 된다. font-awesome-x.x.x 폴더 내부에 있는 파일들(css를 비롯한 각종 폴더들)을 진행중인 프로젝트에 위치시킨다. 아이콘 확인 방법은 화면의 빨간 박스로 표시된 메뉴를 누른다. 그럼 아래와 같은 사용이 가..

jqGrid 그리드 페이징 바 커스터마이징(분리) 하는 예제이다. 기본적으로 jqGrid 를 사용할 수 있는 환경이 되어있다는 가정하에 작성한다 위 이미지는 기존 페이징과 새로만든 페이징을 모두 보여주는 그림이다. 둘중에 하나만 사용 가능하다. jqGrid 4.6.0 에서 진행했다. jsp에서 js , css 파일을 include해서 사용한다. 버전이나 기존 환경에 따라서 적용이 안될수 있으니 참고한다. 아이콘은 Font Awesome Icons (무료) 사용했다. http://cofs.tistory.com/32 여기를 참조하면 페이징 버튼 이미지가 에러없이 나올 수 있다. jsp $(document).ready(function(){ $(document).ready(function () { var row..

다이어그램, 차트, 관계 플러그인을 조사하고 정리한 내용이다. 1. 관계형 다이어그램 http://www.headjump.de/article/arrows-and-boxes - 특이사항 1. 단순한 계층 구조를 표현할 수 있음 (움직임 X) 2. 아주 가벼운 플러그인 3. 예제 및 API 제공 4. 적용사례 레퍼런스가 거의 없음 2. 각종 다이어그램 http://jointjs.com/demos/umlsc - 특이사항 1. 라이센스 : MLP / GNU General Public License (GPLv2) (출처 : 한국저작권위원회) 2. 예제 및 API 제공 3. 적용사례 레퍼런스가 거의 없음 - 종류 : - Finite State Machines - Organizational Charts - ER Di..

키 입력을 감지해서 허용되지 않은 입력값을 바로바로 잡아주는 예제이다. 예를 들면 전화번호를 입력 받는 곳에 꼭 문자를 집어넣는 애들이 있다. 강제로 jquery 를 이용해서 함수를 바인드해놓고 포커스와 포커스 아웃을 이용해서 자동으로 문자 하나 하나 입력이 들어왔을 때 체킹하고 잘못된 입력은 삭제하는 방법이다. 1. 사용방법은 단순히 체크하고 싶은 클레스만 지정해주면 된다. 2. js 파일을 만들어서 import한다. /* * * jquery class선택자를 이용하여 자동 formatter구현 */ // 0) common function addComma(str) { if (str == null) { return ""; } str = removeComma(str); x = str.split(".");/..

강제로 클릭한 효과를 주는 예제이다. 때때로 강제로 클릭한 효과가 필요한 경우가 있다. 또는 가끔 클릭하지 않아도 클릭이 되어야 하는 경우가 있다. jquery 의 trigger을 사용하면 된다. $("#button_id").trigger("click");

이메일 @ 이후 주소값을 셋팅하는 예제이다. jquery 사용한다. 지금도 이런 방법을 사용 할 지는 모르겠는데 고전적인 방법이긴하나 심플하다. @ 직접입력

jquery를 이용한 ajax 통신 예제입니다. 먼저 ajax가 무엇인지 궁금하신 분은 구글링하세요. 쉽게 설명하면 비동기 방식의 통신입니다. 산에서 사람이 "야호1" 이라고 소리를 보낼 때 반대편에서 "야호1" 이라고 메아리가 돌아올 때 까지 기다렸다가 "야호2"를 보내는 것이 동기 방식이고, 비동기 방식은 반대편에서 "야호1" 이이라고 메아리가 돌아오는것을 기다리지 않고 "야호2" "야호3"을 계속 보낼 수 있는게 비동기 방식입니다. 비동기 방식의 돌아오는 순서는 당연히 보낸 순서("야호1" "야호2" "야호3")가 아닙니다. 아래는 Jquery로 ajax를 구현한 소스입니다. $ .ajax({ type : "POST" //"POST", "GET" , async : true //true(비동기화), ..