라이브러리4

• 

  jqGrid 검색 결과가 없을 때 메시지 출력! jqGrid는 많은 데이터 테이블을 간편하게 관리하고 검색할 수 있는 강력한 그리드 라이브러리입니다. 하지만 사용자가 그리드를 사용할 때, 검색 결과가 없을 경우 이를 사용자에게 명확히 알려주는 기능을 추가하는 것이 UX 관점에서 매우 중요합니다. 이번 글에서는 jqGrid에서 검색 결과가 없을 때, "조회된 데이터가 없습니다."라는 메시지를 표시하는 방법에 대해 소개하겠습니다. 1. 준비우선, 기본적인 HTML 구조와 jqGrid 관련 파일을 로드하는 과정이 필요합니다. 여기서는 jquery, jqGrid, 그리고 jquery-ui 관련 CSS 파일들을 CDN을 통해 가져와 사용하겠습니다. 조회된 데이터가 없습니다.위 코드에서 중요한 부분은 #noRecords라는 태그입니다. 이 태그는 검색 결.. jQuery 2024. 9. 13.

• 

  c3 Chart 범례(legend) 클릭 시 순서가 변경된다? 웹 페이지에서 데이터 시각화에 많이 사용되는 C3.js는 사용하기 쉽고 다양한 기능을 제공하는 차트 라이브러리입니다. 그러나 범례(legend) 클릭 시 데이터 순서가 변경되는 문제가 발생할 수 있습니다. 1. 문제점?C3.js에서 차트를 생성하고, 범례를 클릭하면 데이터가 표시되거나 숨겨집니다. 하지만 기본 설정에서는 범례를 클릭할 때 데이터의 순서가 자동으로 변경되는 문제가 발생할 수 있습니다. 이는 사용자가 데이터의 순서에 의존하는 경우, 불편을 초래할 수 있습니다. 2. 해결 방법: data.order 옵션 사용C3.js는 data.order 옵션을 제공하여 데이터의 순서를 제어할 수 있습니다. 이 옵션을 적절하게 설정함으로써 범례 클릭 시 데이터 순서가 변경되지 않도록 고정할 수 있습니다.dat.. JavaScript 2024. 9. 11.

• 

  jQuery Zoomer를 이용하여 이미지를 확대 축소 해보자 이번에 필요했던 기능은 header와 bottom을 고정한 상태에서 이미지 영역만 확대를 시킬 수 있는 기능이 필요 했습니다. 은행이나 카드 상품 정보에서 약관을 PDF나 이미지 정보로 보여주는 기능을 볼 수 있는데, 이 기능이 필요해서 작성을 하게 되었습니다. HTML부터 CSS와 그리고 jQuery 플러그인인 Zoomer 플러그인을 사용해서 이미지를 확대하고 스크롤 할 수 있는 기능까지 추가로 알아봅시다.0. 준비하기 (CDN)jQuery 플러그인 Zoomer를 사용하기 위해서는 기본적으로 jQuery가 필요하고, zoomer.js가 필요합니다. 파일이 있으시면 추가하시면 되지만, 저는 CDN 기준으로 작성 하였습니다. zoomer.css 역시 추가 해주시면 됩니다. 해당 CSS는 확인해보니 라인 수.. jQuery 2024. 9. 6.

• 

  chart.js를 살짝 익혀봅시다 chart.js는 생각보다 어렵지 않습니다. 생각보다 단조롭고, 싱글 데이터값부터 멀티 데이터값까지 다양하게 넣을 수 있는 장점이 있습니다. 그동안 chart.js에 대해 많이 쫄아(?)있었지만, 생각보다 어렵지 않게 이용이 가능했습니다. 아직까지는 데이터를 불러와서 적용하는 부분보다는 random이나 고정값으로 밖에 테스트를 하지 못했습니다. 그래도 그려지는 부분, 원리를 아는 것이 가장 중요한 것이니까!! 1. chart.js 연결 CDN이나 파일로 연결을 하면 사용할 준비가 된 셈입니다. 저는 테스트를 목적으로 하는 부분이기에 CDN으로 연결을 하였으나, 실제로 chart.js를 서비스에 포함시킨다면 파일로 연결을 해야 이롭습니다. 2. 영역 만들기 영역을 잡지 않고 다이렉트로 mychart(def.. JavaScript 2021. 10. 28.