jQuery 썸네일형 리스트형 [javascript] 이미지 동적 로딩 Javascript을 이용한 간단한 이미지 동적 로딩을 다룬다. 동적로딩이라는 부분이 애매할 수 있는데, 이미지가 매우크거나 속도나 느린 네트워크에서는 이미지가 바로 보이지 않는다. 일부만 천천히 로딩되거나 중간에 로딩이 실패하면서 이미지가 제대로 보이지 않는다. 이럴 경우 이미지가 제대로 로딩이 완료되면 표시되면 화면에 표시되고 그렇지 않으면 표시되지 않게 할 수 있다. 이를 응용하면 이미지 로딩 중을 기본으로 화면에 표시하고 로딩되면 표시하도록 만들수 있다. 그럼 간단하게 만들 수 있는 방법을 알아보자. 작성자: http://ospace.tistory.com/ (ospace114@empal.com) 단순 이미지 로딩 가장 일반적인 이미지를 로딩하는 예제이다. 이미지 태그를 사용한 간단한 예제이다. 위.. 더보기 [jquery] 단순 DOM 데이터 바인딩 들어가기 HTML에서 화면에서 데이터를 추출하고 처리하는 부분이 귀찮은 일이다. 대부분 화면 컨트롤에서 데이터를 가져오고, 가져온 데이터를 화면에 적용하는 일이 매우 많다. 이를 개선해서 출력과 입력을 처리하는 바인딩하는 작업을 만들어보았다. 즉, 데이터 객체와 DOM 객체 간에 양방향 바인딩 처리하는 작업이다. 데이터에 값을 저장하면 자동으로 화면에 적용되고, 컨트롤에 값을 입력하면 자동으로 화면에 출력된다. 어떻게 하는지 살펴보자. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 기존 처리 방식 Ajax을 많이 활용하면 화면에 동적으로 처리해야하는 작업이 많다. 예를 들어 아래 처럼 입력 텍스트와 입력된 텍스트를 아래에 텍스트로 출력하는 예를 보자. 텍스.. 더보기 [jquery] multiselect 플러그인 제작하기 들어가기 jQuery로 플러기인을 만들었던 그 경험을 공유하려고 글을 작성하였다. 만들려는 UI 컴포넌트는 multiselect로 select 컨트롤에 체크박스를 추가하여 여러 값을 선택할 수 있는 select이다. 물론 기능적으로는 문제는 없지만 플러그인을 작성하기 위해 매우 간단하게 작성하였으므로 실제로 사용하다보면 수정이 많이 필요하다. 그렇기에 실제 multiselect은 다른 플러그인을 사용하고 여기 multiselect은 간단한 플러그인 제작을 위해서만 참고하기 바란다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ Multiselect 요구사항 Multiselect은 여러 체크박스로 동시에 여러 항목을 선택하는 컨트롤이다. 여기서는 이런 체크 .. 더보기 [jquery] multiselect 플러그인 소개 들어가기 jQuery 기반의 multiselect 컨트롤러 컴포넌트이다. jQuery 플러그인 형태로 구현되었다. 최대한 기존 select의 기능과 인터페이스를 그대로 지원했고, 좀더 확장된 기능을 추가했다. select을 단순하게 사용했다면 별다른 변경없이 그대로 적용할 수 있다. 작업한 플러그인은 jQuery 플러인 제작을 위한 연습용으로 만들어서 기능적으로 부족한 부분이 많다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ Multiselect 플러그인 소개 기존에 select 태그를 사용한 폼 컴포넌트는 많이 사용되는 기능 중에 하나이다. 그러나 기능이 너무 단순하고 여러 요소를 선택하거나 값을 선택하는 명령이나 선택된 값을 추출하는 처리가 쉽지 않.. 더보기 [jquery] jQuery 플러그인 제작을 위한 기초 들어가기 jQuery는 한때 정말 많이 사용했던 라이브러리이다. reack나 vue.js가 나오면서 사용이 뜸해지기는 했지만, 아직도 사용되는 툴이다. jQuery는 플러그인 확장 기능을 제공하고 있다. 이를 이용한 여러 추가 기능이나 컨포넌트 제작에 많이 사용되었다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 기존에 사용하는 방식 jQuery를 사용해서 DOM 객체을 찾고 스타일 변경할 경우 아래처럼 많이 사용한다. $('a').css('color', 'red');모든 링크 태그에 대해서 color라는 스타일에 red 값을 할당한다. 이전에는 모든 링크 테그를 찾고 루프를 통해 하나씩 스타일을 적용해야했지만,.. 더보기 [jquery] datatables에서 ajax활용한 검색 및 페이징 들어가기 jQuery를 사용할 때에 데이터를 테이블 형태로 표시할 때 많이 쓰는 테이블 컨트롤이다. 기능도 다양하고 커스터마이징도 가능하며 라이센스도 MIT라서 걱정없이 사용할 수 있다. 흔히 datatables를 데이터를 가져와서 사용하는 방식으로 많은 데이터를 표현하기 힘들다. datatables에서 내부적으로 ajax를 활용해 페이징 처리할 수 있는 기능이 있다. 한번 알아보자. 작성자: ospace114@empal.com, http://ospace.tistory.com/ HTML 구성 datatables을 사용했던 분이라면 이미 알고 있겠지만 jquery을 로딩해야 한다. option: serverSide 자동으로 테이블에서 필요한 조건 데이터를 생성해서 요청하는 기능이다. datatables의 .. 더보기 이전 1 다음
