jQuery7

• 

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

• 

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

• 

  jQuery Migrate 플러그인 jQuery는 1.9 버전 이전에 작성된 코드와 작성된 코드 간의 호환성에 이슈가 있습니다. 이러한 호환성 문제를 해결하기 위해서 사용하는 플러그인이 바로 jQuery Migrate입니다. 최신 버전의 jQuery를 필요로 하는 플러그인, 스크립트 등을 삽입할 때 발생하는 문제를 해결하기 위해서 jQuery Migrate 플러그인을 사용합니다. Download jQuery | jQuery link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file s.. jQuery 2021. 11. 14.

• 

  [jQuery] 이벤트 중복 오류 해결 (이벤트가 두번 실행됩니다!) jQuery를 이용해서 좌측의 메뉴를 클릭할 때마다 SlideToggle 메서드를 이용해서 구현하려고 하였으나, 뭔지 모르게 갑자기 두번씩 SlideToggle이 발생되는 것을 보았습니다. $('셀렉터').on('click', function(){ 이벤트 내용 }); 하지만 여러가지 방법을 찾다가 해결책을 찾게 되었고, 위 현상이 일어나는 것은 바로 이벤트가 중복으로 걸리는 경우라고 확인 되었습니다. 조금 코드가 길어지기는 하지만, off 메서드를 혼합하여 사용함으로써 해당 이벤트 중복 오류를 막을 수 있었습니다. $('셀렉터').off('click').on('click', function(){ 이벤트 내용 }); 위의 코드 내용으로 작성하면 이벤트 중복을 막을 수가 있습니다. 하지만, 해당 셀렉터에게만.. jQuery 2021. 1. 27.

• 

  아이디, 비밀번호 입력란에 로그인 버튼 색 변경하기 jQuery를 이용하여 아이디, 비밀번호란에 데이터를 입력 시에 로그인 버튼 배경 색상을 변경하는 방법입니다. - ID, 비밀번호 입력란에 text가 모두 입력이 되면, addClass('on')을 통해서 배경색이 pink로 변경 - ID, 비밀번호 입력란이 하나라도 비어있다면, removeClass('on')으로 기존 배경색으로 됨 - ID, 비밀번호 입력란 모두 작성했다가, 다시 삭제하면 기존 배경색으로 되는 부분 function checkInput() { var idCheck = $('.id_input').val(); // idCheck 변수 var passwordCheck = $('.password_input').val(); // idCheck 변수 var btnLogin = $('.btn_sub.. jQuery 2020. 12. 11.

• 

  [jQuery] 아...이런 siblings;; 제이쿼리로 현재 모바일 홈페이지를 과제로 하고 있습니다. 기존에는 데스크탑으로 탭메뉴를 구성하는 형태였고, ul 구조에 li가 4개로 하나씩 누를 때 마다 쉽게 변경되는 구조였습니다. 위의 코드는 누구나 구현이 가능한 쉬운 누구나 기초를 배우셨다면 구사가 가능한 정도입니다. 하지만, siblings() 이녀석이 저를 괴롭힐 거라고는 조금도 생각하지 못했습니다... 이번에는 select 태그의 value 값으로 리스트를 호출하는 방식으로 셀렉트 메뉴를 구성했습니다. 일단, 하나의 ul의 여러개의 list 구조로 이루어져있고, 각 주제마다 class를 부여한 상태입니다. 맨 위의 예제처럼 쉽게 풀릴 것 같았지만, 같은 클래스를 사용하는 list 구조에서 siblings를 부여하니까 show는 커녕 리스트 전.. jQuery 2020. 11. 7.

• 

  [jQuery] attr()로 태그 속성 다룰 수 있습니다. jQuery를 공부하면서 메서드를 다시 하나씩 공부하기로 시작했습니다. codeit을 큰맘먹고 결제하면서 귀로 따고, 눈으로 보고, 예제 다시 만들고, 다시 처음으로 돌아가면서 하나씩 열심히 하기로 했습니다. 이번에 공부한 내용은 attr() 메서드입니다. .attr() : html 태그 속성(attribute)을 다루게 됩니다 attr은 기존 걸려있던 값을 다루면서 변경할 때 사용하는 메서드입니다. 현재 태그에서는 #boom이라는 임의의 ID를 작성하였는데, img 태그에 1번이미지 주소를 넣었습니다. #boom img영역을 태그하면 attr()를 클릭하면 src 값이 2번이미지 주소로 변하게 됩니다. 지금 위의 값으로는 1회성으로 1번이미지 ▶ 2번이미지 변경하게 됩니다. attr()를 이용하여 오마.. jQuery 2020. 11. 4.