반응형 Programing/jQuery40 jqGrid dataType json CRUD + filterToolbar + dateRangePicker 5부 기간 조회 dateRangePicker설정 추천 그리드 ▼ 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 dataType json CRUD + filterToolbar + dateRangePicker 5부 기간 조회 dateRangePicker설정 이번 포스팅에서는 jqGrid filterToolbar에 dateRangePicker를 적용하.. Programing/jQuery 2017. 11. 30. jqGrid dataType json CRUD + filterToolbar + dateRangePicker 4부 멀티 조건 조회 추천 그리드 ▼ 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 dataType json CRUD + filterToolbar + dateRangePicker 4부 멀티 조건 조회 이전에 3개의 포스팅에서 jqGrid의 조회, 페이징, 헤더 정렬에 대해 알아보았습니다. Link : jqGrid dat.. Programing/jQuery 2017. 11. 30. jqGrid dataType json CRUD + filterToolbar + dateRangePicker 3부 헤더 정렬 추천 그리드 ▼ 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 dataType json CRUD + filterToolbar + dateRangePicker 3부 헤더 정렬 Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 1부 .. Programing/jQuery 2017. 11. 30. jqGrid dataType json CRUD + filterToolbar + dateRangePicker 2부 페이징 설정 추천 그리드 ▼ 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 dataType json CRUD + filterToolbar + dateRangePicker 2부 페이징 설정 1부 에서는 데이터를 가져와 표출하는 부분까지 했었죠. 이번 2부에서는 페이징 설정을 하는 방법에 대해 알아보도록 하겠습니다.. Programing/jQuery 2017. 11. 30. jqGrid dataType json CRUD + filterToolbar + dateRangePicker 1부 데이터 조회 추천 그리드 ▼ 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 dataType json CRUD + filterToolbar + dateRangePicker 1부 데이터 조회 jqGrid에 filterToolbar와 dateRangePicker를 적용한 화면 입니다. [구현된 기능] ● 그리드 헤더.. Programing/jQuery 2017. 11. 29. json 파일 읽기 $.getJSON json 파일 읽기 $.getJSON jquery 에서 제공하는 getJSON을 활용합니다. json 파일의 형태가 맞지 않으면 파일을 읽어드릴 수 없으니 주의하세요! http://jsonlint.com 에서 json 형태가 올바른지 확인하실 수 있습니다. 파일경로 test.json 파일 [ { "name" : "이건", "tel" : "010-1234-5678", "homepage" : "http://aljjabaegi.tistory.com", "index" : "1" }, { "name" : "임신구", "tel" : "010-0000-1111", "homepage" : "http://aljjabaegi.tistory.com", "index" : "2" }, { "name" : "이승룡", "tel".. Programing/jQuery 2017. 10. 18. jquery jqgrid 의 모든 것, 사용법, jQuery 추천 그리드 추천 그리드 ▼ Link : https://aljjabaegi.tistory.com/593 [VanilaJS Free Grid library] Aljjabaegi Grid Grand Open [Free Grid library] Aljjabaegi Grid Grand Open 여러 무료 라이브러리를 사용해오다가 많은 요구사항에 맞추어 커스텀하기 어려워 직접 만든 그리드를 공개합니다. 페이징, 정렬, 단일조회, 복수조회, aljjabaegi.tistory.com jquery jqgrid 의 모든 것, 사용법, jQuery 추천 그리드 jqgrid는 개발하기 편하고 빠르며 다양한 옵션을 제공하여 선호하는 분들이 많죠. 이번 포스팅에서는 이에 대한 사용법을 알아보도록 하겠습니다. 1. 다운로드 Link : jq.. Programing/jQuery 2017. 9. 22. jQuery 자바스크립트 이미지 좌표구해 영역 설정하기 마우스 손가락 표시 jQuery 자바스크립트 이미지 좌표구해 영역 설정하기 마우스 손가락 표시 이미지의 특정영역을 클릭했을 때 이벤트를 발생하기 위해 사용한다. 우선 영역을 구하기 위해서는 해당 이미지 영역의 좌표를 필요로 한다. 이미지의 좌표를 구하는 방법은 아래와 같다. 이미지에 onClick 이벤트를 준다. - 이미지의 좌표를 구하는 함수 function getLoc(){ var x = event.offsetX; var y = event.offsetY; alert("현재좌표는 : "+x+" / "+y); } 이렇게 하면 이미지의 x, y 좌표 값을 구할 수 있다. 그렇다면 영역을 설정하는 방법을 알아보자. 이미지의 영역을 설정하기 위해서는 이미지 맵을 사용한다. 이미지 맵은 이미지에 복수의 영역을 설정할 때 사용한다... Programing/jQuery 2016. 9. 20. jquery 제이쿼리 모달 팝업 드래그 하기 드래그 옵션 jquery draggable() 화면 넘어가는 것 방지 jquery 제이쿼리 모달 팝업 드래그 하기 드래그 옵션 jquery draggable() 화면 넘어가는 것 방지 레이어 팝업에 대한 저옵와 구현방법은 아래의 Link 를 참조하세요. Link1 : jquery 제이쿼리 레이어 팝업 화면 중앙에 띄우는 방법 레이어 팝업의 드래그를 하기 위해선 jquery-ui.js 파일이 필요합니다. 구글링으로 찾아서 다운 받으셔도 되고 아래의 스크립트를 레이어 팝업의 드래그가 필요한 화면에 넣어주시면 됩니다. 이제 소스를 보겠습니다. 예를 들어 아래와 같은 레이어 팝업이 있다고 합시다. 처음에 레이어팝업은 위치가 고정입니다. 그래서 이 팝업을 드래그가 가능하게 하기 위해선 draggable() 함수를 사용합니다. $(function(){ $('#pop_stop_info.. Programing/jQuery 2016. 3. 15. jquery 제이쿼리 탑버튼 구현, 최상단으로 올라가기, 최상단 이동 jquery 제이쿼리 탑버튼 구현, 최상단으로 올라가기, 최상단 이동 흔히 볼수 있는 탑버튼(최상단으로 이동)을 구현하는 방법을 알아보자. jquery-1.11.2.min.js 을 인터넷에서 다운받아 프로젝트에 넣거나 을 추가한다. 그리고 클릭하면 최상단으로 올라갈 객체를 생성한다. [Top으로이동] right를 50%로 bottom을 15px로 바닥 중간데 값을 fioxed 했다. z-index는 객체를 최상위로 올리기 위해 사용. 이제 스크립트를 구현한다. 현재는 최상단일 경우 탑버튼을 숨겼지만 계속 보이고 싶으신 분은 아래 주석을 참고한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 $(function(){ $(".return-top").hide();.. Programing/jQuery 2016. 2. 24. bxslider 이미지 슬라드, 버튼 클릭해 이미지 슬라이드, 이미지 슬라이더, 이미지 넘어가기 bxslider 이미지 슬라드, 버튼 클릭해 이미지 슬라이드, 이미지 슬라이더, 이미지 넘어가기 버튼이나 택스트를 클릭하면 또는 자동으로 이미지를 넘겨야 할 때가 있다. 이럴 때 사용하는 것이 bxslider 다. js 플러그인 다운로드는 아래의 홈페이지를 참고한다. Link : bxslider.com 홈페이지 홈페이지에 들어가면 우측 상단에서 다운 받을 수 있다. 다운받아 압축을 푼 폴더에서 아래의 세개의 파일을 원하는 위치에 복사하고 사용하고자 하는 페이지에서 불러온다. 그리고 슬라이드할 이미지들을 의 태그에 넣는다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 첫번째 이미지 1첫번째 이미지 2첫번째 이미지에 대한 설명 Colored by Color.. Programing/jQuery 2016. 2. 24. jquery 모달 팝업 구현 불투명 배경, 팝업 화면 중앙에 띄우기, 스크롤 없애기 보이기 jquery 모달 팝업 구현 불투명 배경, 팝업 화면 중앙에 띄우기, 스크롤 없애기 보이기 화면 중앙에 레이어 팝업을 띄우는 방법은 아래 Link를 참고하고 모달 팝업과 같이 불투명 뒷 배경을 구현해 보자. Link : javascript 자바스크립트 레이어 팝업 화면 중앙에 띄우는 방법 우선 불투명 배경에 대한 스타일 설정을 한다. function bgLayerOpen() { if(!$('.bgLayer').length) { $('').appendTo($('body')); } var object = $(".bgLayer"); var w = $(document).width()+12; var h = $(document).height(); object.css({'width':w,'height':h}); ob.. Programing/jQuery 2016. 1. 20. jquery 제이쿼리 레이어 팝업 화면 중앙에 띄우는 방법 javascript 자바스크립트 레이어 팝업 화면 중앙에 띄우는 방법 일반적인 window.open 을 사용한 팝업이 아니라 레이어 팝업을 구현하려 한다. 여기에 모달 팝업창 같이 팝업창 이외의 기능은 사용할 수 없도록 기능을 추가 할 것이다. 우선 내에 원하는 곳에 팝업으로 쓸 를 추가합니다. (위치는 상관 없습니다. 보기 쉬운 곳에 넣으세요.) 우선 팝업에 사용될 디자인부터 추가 합니다. (여기서 z-index에 유의 합니다. 값이 클 수록 위로 올라옵니다.) 팝업레이어X 이름 홍길동 현재 레이어 팝업은 visibility 옵션이 hidden 이기 때문에 보이지 않습니다. 팝업을 보이게 할 함수를 정의합니다. 숨겨져 있으면 보이게 보여져 있으면 숨기게. function popupOpen(){ if(d.. Programing/jQuery 2016. 1. 20. $(function(){ }); 부분이 실행 안될 때 Uncaught ReferenceError: $ is not defined 해결방법 $(function(){ }); 부분이 실행 안될 때 Uncaught ReferenceError: $ is not defined 해결방법 초보적인 실수 이기는 하나 놓치기 쉰운 실수 이기도 한 Uncaught ReferenceError: $ is not defined 에러의 해결법에 대해 알아보자. 초반에 셋팅하고 실행했는데 $(function(){ }); 부분이 실행 안될 때가 있다. 페이지 로딩이 안되는 것도 아닌데... 이럴때 개발자모드(F12) 를 보면 Uncaught ReferenceError: $ is not defined 에러가 떠있다. 원인은 간단하다. 제이쿼리 js가 로딩이 안된것. 기본적인 셋팅이 되있다면 당연히 나지 않는 에러이지만 처음부터 하다보면 실수 할 수 있다. 제이쿼리 가 없.. Programing/jQuery 2015. 12. 8. 제이쿼리 jquery 선택된 요소의 텍스트 변경 span, p 등의 text 변경 html() method 제이쿼리 jquery 선택된 요소의 텍스트 변경 span, p 등의 text 변경 html() method 선택된 요소의 택스트를 변경하는데는 html()method가 사용된다. 텍스트 변경 뿐만 아니라 원하는 요소(체크박스, 라이오버튼 등)를 추가할 수도 있다. 자바스크립트의 innerHTML과 비슷한 역할을 한다고 보면 된다. - 사용방법 $("변경을 원하는 요소").html(변경될 값); 예) text change I want to change here 위의 예에서 text change 버튼을 클릭했을 때 id가 html_test인 span의 텍스트 값을 수정한다고 하자. "I want to change here" 텍스트를 "change"로 변경하는 방법은 아래와 같다. 버튼을 클릭하면 span의 .. Programing/jQuery 2015. 8. 7. 이전 1 2 3 다음 💲 추천 글 반응형