Programing/jQuery40

• 

  jQuery class 확인 추가 제거 한번에 jQuery class 확인 추가 제거 한번에 class 확인 $('요소').hasClass('클래스명'); class 추가 $('요소').addClass('클래스명'); class 삭제 $('요소').removeClass('클래스명'); class 있으면 삭제 없으면 추가 $('요소').toggleClass('클래스명'); Programing/jQuery 2019. 8. 30.

• 

  jQuery drag and drop multi file upload aljjabaegi.fileUpload-1.0.1.js jQuery drag and drop multi file upload aljjabaegi.fileUpload.js aljjabaegi.fileUpload-1.0.0.js 는 아래의 Link를 참고하세요. Link : jQuery FormData ajax multi file upload drag and drop 비동기 파일 업로드 jQuery FormData ajax multi file upload drag and drop 비동기 파일 업로드 jQuery FormData ajax multi file upload drag and drop 비동기 파일 업로드 드래그 앤 드랍 파일 업로드가 가능한 비동기 파일 업로드 모달팝업입니다. 간단한 옵션 설정으로 서블릿으로 전달할 파일객체를 생성.. aljjabaegi... Programing/jQuery 2019. 8. 21.

• 

  jQuery FormData ajax multi file upload drag and drop 비동기 파일 업로드 jQuery FormData ajax multi file upload drag and drop 비동기 파일 업로드 드래그 앤 드랍 파일 업로드가 가능한 비동기 파일 업로드 모달팝업입니다. 간단한 옵션 설정으로 서블릿으로 전달할 파일객체를 생성 할 수 있습니다. 예시 코드를 보겠습니다. 옵션 설명 url 파일을 전송할 url 주소. type 파일업로드 타입구분 (default : multiple), single : 단일파일. title 업로드 파일 타이틀. uploadBtnId 모달팝업을 보이게할 업로드 버튼 ID. validation 유효성 검증. extension : 파일확장자제한, size : 사용안함. submit 기본적으로 모달팝업의 업로드 버튼을 클릭하면 url 주소로 전달되지만, 중간에 다른 .. Programing/jQuery 2019. 8. 20.

• 

  jquery offset(), position() 함수 알짜만 빼먹기 jquery offset(), position() 함수 알짜만 빼먹기 선택된 객체의 위치값(좌표) 를 얻을 때 사용하는 2개의 함수, offset()과 postion() 에 대해 알짜만 쏙쏙 뺴먹는 시간을 가져보겠습니다. 2개의 함수는 모두 좌표값을 리턴합니다. 하지만 offset은 절대좌표를, position은 상대좌표값을 리턴하죠. offset은 페이지 상단으로부터 선택된 요소가 보이는 현재 위치값을 설정, 리턴하고 position은 부모 객체로부터 떨어진 상대 좌표값을 리턴합니다. 해깔리는 부분이므로 아래서 자세히 설명하도록 하겠습니다. 그럼 우선 offset() 함수에 대해 알아보도록 하죠. [offset] offset은 선택된 요소의 절대좌표값을 설정하거나 절대좌표값을 리턴하는 함수입니다. 페이.. Programing/jQuery 2019. 6. 30.

• 

  동적 파일업로드를 위한 ajaxForm 정리 동적 파일업로드를 위한 ajaxForm 정리 이번 포스팅에서는 브라우져별 파일요소(File Element)에 대해 알아보고 이를 ajaxForm을 사용하여 어떻게 파일 객체가 전달되는지를 알아보도록 하겠습니다. 이전 ajaxForm을 이용한 동적파일 업로드에 대한 정리로 생각하시면 될 것 같습니다. Link : javascript spring 멀티파일선택 업로드 ajaxForm multipart/form-data MultipartHttpServletRequest Link : Java Spring File Upload MultipartHttpServletRequest 멀티파일 업로드 방법 Link : javascript 동적 멀티파일 업로드, 동적으로 선택된 파일 전달, ajaxForm 활용 fileLis.. Programing/jQuery 2019. 3. 27.

• 

  jquery image combobox 이미지 콤보박스 image select box jquery image combobox 이미지 콤보박스 image select box 위와 같이 이미지가 포함된 콤보박스를 구현해 보도록 하겠습니다. 사용하는 라이브러리는 ms-Dropdown 입니다. 아래 Link에서 다운받으실 수 있습니다. Link : https://github.com/marghoobsuleman/ms-Dropdown 구현 방법은 간단합니다. 사용할 페이지에 다운받은 파일 중 jquery.dd.min.js 파일과 css파일을 추가합니다. 1 2 cs 필수! 해당 라이브러리는 jQuery가 필요합니다. 일반 셀렉트 박스와 비슷하지만, data-image 경로에 있는 이미지가 셀렉트 박스 내에 표출됩니다. 1 2 3 4 5 Programing/jQuery 2018. 10. 2.

• jQuery 동적 객체의 이벤트 중복 문제 jQuery 동적 객체의 이벤트 중복 문제 타 업체가 개발한 사이트의 유지보수 요청을 받아 소스를 보았는데, html과 script를 완전히 분리하여 개발 했더군요. 그래서 모든 jquery event는 js 내에서 구현했는데, 문제는 동적 객체의 이벤트 등록 시 클릭 이벤트가 정상 동작 하지 않는다는 것이였습니다. 코드를 보면 1 2 3 $(document).on('mouseenter click', '#popClose', function(e){ //팝업 닫는 소스 }); Colored by Color Scripter cs 이런 식으로 모든 동적 객체에 대한 이벤트를 등록해 놓았습니다. 다른 객체도 마찮가지로 mouseenter 이벤트는 정상동작하지만 click 이벤트가 동작하지 않더군요. 문제가 무엇일.. Programing/jQuery 2018. 5. 21.

• 

  jquery 업로드할 이미지 미리보기 image preview URL.createObjectURL jquery 업로드할 이미지 미리보기 image preview URL.createObjectURL 이번 포스팅에서는 업로드할 이미지를 미리보기 하는 방법에 대해서 알아보도록 하겠습니다. 위와같이 멀티로 파일을 선택하면 선택된 파일의 미리보기 이미지와 파일명 등이 보여지는 구조 입니다. 멀티로 파일을 선택하는 방법은 아래의 Link를 클릭하세요! Link1 : javascript spring 멀티파일선택 업로드 ajaxForm multipart/form-data MultipartHttpServletRequest Link2 : Java Spring File Upload MultipartHttpServletRequest 멀티파일 업로드 방법 자세한 설명은 위의 Link를 참고하시고, 멀티로 파일을 선택하기 위.. Programing/jQuery 2018. 3. 20.

• 

  jqGrid navGird edit add del 시 데이터 컨트롤 방법 jqGrid navGird edit add del 시 데이터 컨트롤 방법 jqGrid의 navGrid를 사용해 CRUD를 할때 라이브러리를 적용한 inputbox 값이 서블릿단으로 매개변수가 전달이 안되는 경우가 있습니다. 예를 들어 dateRangePicker 나 timepicki 를 적용해 입력받을 때 해당 값이 undefined로 전달이 됩니다. colModel에 아래의 Link 처럼 설정을 하면, 추가, 수정 클릭 시 해당 라이브러리가 적용되는데, 값은 전달이 되지 않죠. Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 5부 기간 조회 dateRangePicker설정 이 데이터를 바인딩 하기 위해서는 editData 옵션을 사.. Programing/jQuery 2018. 3. 8.

• 

  jqGrid 조회 버튼 클릭 시 조회 방법, 페이지 최초 로딩시 조회 안되게 하는 방법 jqGrid 조회 버튼 클릭 시 조회 방법, 페이지 최초 로딩시 조회 안되게 하는 방법 jqGrid의 세팅을 옵션에 dataType을 'json' 으로 할 경우 페이지 로딩 시에 자동으로 조회가 되게 됩니다. 그리고 filterToolbar 를 사용할 경우 filter의 값이 바뀌면 자동으로 조회가 되게 되죠. 이런 것을 filterToolbar에서 값을 바꾸면 조회가 되지 않고, 조회 버튼을 눌렀을 때만 조회가 되도록 바꿔보겠습니다. 우선 filterToolbar 에 두개의 옵션을 추가 합니다. 1 2 3 4 const filterOption = { autosearch : false, searchOnEnter : false, } cs autosearch 옵션은 filterToolbar의 값이 바뀌어도 .. Programing/jQuery 2018. 3. 7.

• 

  jquery plugin download jquery 플러그인 검색 다운 사이트 jquery plugin download jquery 플러그인 검색 다운 사이트 추천 이번 포스팅에서는 수많은 jquery 플러그인들을 검색할 수 있는 사이트를 추천해 드리려합니다. jqueryscript.net 이 사이트의 장점은 물론 수많은 플러그인이 존재한다는 것도 있지만, 해당 플러그인의 데모페이지를 제공하므로서 실제로 다운을 받아 적용하지 않아도 플러그인의 기능을 확인해 볼 수 있다는 것입니다. 그럼 사이트로 이동해 보도록 하죠. 심플하죠. 메인에는 최근 업데이트 된 플러그인 들이 표출됩니다. 예를 들어 날짜의 범위를 설정할 수 있는 켈린더를 찾는다고 해보죠. 페이지 상단 input text 에 date range 를 입력한 후 Search 버튼을 클릭합니다. 여러 플러그인들이 검색 결과가 나오.. Programing/jQuery 2018. 2. 8.

• 

  jquery ajax loading bar, ajax 로딩바 나타내기 blockUI 적용방법 jquery ajax loading bar, ajax 로딩바 나타내기 blockUI 적용방법 ajax 통신 시 시간이 로딩바를 표출하는 방법을 알아보겠습니다. ajax 로딩바를 구현하기 위해선 blockUI 라는 플러그인이 필요합니다. 아래의 Link에서 다운로드 하세요. LInk : http://malsup.com/jquery/block/ 다운받은 파일을 압축을 풀어줍니다. jquery.blockUI.js 파일을 프로젝트 내 폴더로 옮겨주시고 사용할 페이지에서 아래와 같이 import 해줍니다. 1 cs 그리고 원하는 로딩바의 이미지를 구글링을 통해 다운로드 한 후 프로젝트 내에 옮겨주세요. 이제 다운받은 gif 파일을 표출되게끔 해주어야 하는데요, 1 2 3 $.blockUI.defaults = { .. Programing/jQuery 2018. 1. 25.

• 

  jqGrid checkbox Multiselect 그리드 멀티선택 체크박스 추가방법 jqGrid checkbox Multiselect 그리드 멀티선택 체크박스 추가방법 위의 이미지와 같이 그리드 제일 앞 열에 체크박스를 추가하는 방법에 대해 포스팅 하겠습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function makeTable(id, array, title){ $("#"+id).jqGrid({ datatype: "local", height: 200, width : 300, colNames:['장비ID','장비명'], colModel:[ {name:'equipId', align:'center',sortable:false, width:'50px'}, {name:'equipNm', align:'left',sortable:false}, ], mul.. Programing/jQuery 2018. 1. 17.

• 

  jqGrid dropdown (select, combobox) in filterToolbar 콤보박스 추가방법 jqGrid dropdown (select, combobox) in filterToolbar 콤보박스 추가방법 jqGrid 에 filter toolbar 에 아래와 같이 콤보박스를 추가하는 방법을 알아보도록 하겠습니다. 우선 저는 DB에서 가져온 데이터를 jqGrid에서 읽을 수 있는 형태로 만들어 주었습니다. (key : value, key : value 의 형태) 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 const comboData = { rightCombo : {}, positionCombo : {}, departmentCombo : {} } $(function){ getOprCo.. Programing/jQuery 2018. 1. 10.

• 

  jqGrid dataType json CRUD + filterToolbar + dateRangePicker 6부 CUD 기능 구현 jqGrid dataType json CRUD + filterToolbar + dateRangePicker 6부 CUD 기능 구현 추천 그리드 ▼ Link : https://aljjabaegi.tistory.com/593 [VanilaJS Free Grid library] Aljjabaegi Grid Grand Open [Free Grid library] Aljjabaegi Grid Grand Open 여러 무료 라이브러리를 사용해오다가 많은 요구사항에 맞추어 커스텀하기 어려워 직접 만든 그리드를 공개합니다. 페이징, 정렬, 단일조회, 복수조회, aljjabaegi.tistory.com 어느덧 jqGrid 6번째 포스팅 입니다. Link : jqGrid dataType json CRUD + filterT.. Programing/jQuery 2017. 11. 30.