프로그래밍/jQuery & javaScript14 jqGrid 사용 예제 (v5.3.2, v4.4.3) jQuery Download : https://jquery.com/download/ jqGrid Download : http://www.trirand.com/blog/?page_id=6 jqGrid는 4.7.1 버전까지는 무료고 그 이상의 버전은 유료라고 한다. 이 예제에서는 5.3.2버전과 4.4.3 버전을 예제로 만들었다. 그냥 다운로드 하는것은 맨위에 최신버전으로 30일 평가판이라고 적혀있다. jQuery UI Download : https://jqueryui.com/download/ jqGrid의 디자인을 위한 파일. 직접 디자인할 것이 아니라면 다운받아주어야 한다. 아래의 이미지는 5.3.2버전의 UI 적용 전과 적용 후의 예제를 보여준 것이다. 사이트에 접속하여 최신 버전을 다운 테마를 선택해.. 2019. 7. 17. jQuery 이미지 클릭 시 크게 보기 이미지를 볼 수 있는 div를 생성해 클릭 시 display를 flex로 변경하여 전체 화면으로 이미지를 크게 볼 수 있다. 다시 클릭을 하게 되면 다시 이미지 div는 none이 된다. 이미지 크게보기 큰 이미지가 아니라 원본 이미지 크기로 보고 싶다면, 아래의 css를 지워주면 된다. 2019. 6. 26. jQuery 파일 업로드 미리보기(preview) 이 예제에서는 multiple 속성을 이용하였다. multiple 속성은 한번에 파일을 여러개 올릴 수 있도록 해주는 속성이다. multiple 속성은 크롬은 6.0 이상 IE는 10.0 이상부터 지원한다고 한다. 첨부파일 미리보기 첨부파일 input type은 file인 것을 찾아 change 옵션을 주었다. 첨부파일을 등록할 때마다 div#preview의 내용을 비워주고, 업로드 가능한 파일인지 체크 후 jQuery로 이미지 미리보기를 만들어 준다. 이미지 파일일 때는 이미지를 보여주고, 이미지 파일이 아닐 때는 파일 이미지를 보여주도록 만들었다. 2019. 6. 24. jQuery 동적태그 이벤트 태그에 이벤트를 걸기 위해서 아래와 같이 사용해 왔었는데 동적으로 생성된 태그에는 이벤트가 달리지 않았다.. $(".btn").click(function(e){ ... }); 페이지 로딩이 끝난 후 동적으로 생성된 태그에 이벤트를 걸기 위해서는 다음과 같이 사용해야 한다. $(document).on('click','.btn',function(){ ... }); on의 첫 번째 파라미터에는 click, blur 같은 원하는 이벤트를 적어주고, 두 번째 파라미터에는 태그, 세 번째 파라미터에는 동작할 함수를 입력해 주면 된다. 2019. 6. 21. 이전 1 2 3 4 다음
