본문 바로가기

datatables create example/sample Datatables Create Example datatables 라이브러리를 사용해서 테이블을 생성하는 예시입니다. 라이브러리 추가, trunc 함수 추가 등이 필요하지만 대충 코드 보시면 아실 것 같아서 자세한 내용은 추가하지 않았습니다. var table = $('#targetTable').DataTable({ data: source_data, dom: 'Bfrtip', buttons: [{ extend: 'excelHtml5', text: 'Excel Download', className: 'btn btn-black export-button' } ], columns: [{ title: "description" }, { title: "status" } ], "columnDefs": [{ "width.. 더보기
Autocomplete Library 추천 1. 깃허브에서 Autocomplete를 검색해보면 아래와 같습니다. 자바스크립트만 1834개가 검색되요. ㅠㅠㅠㅠㅠ물론 중복도 있겠지만 그래도 넘 많아요. 2. 추천은 !! Autocomplete 라이브러리가 너무 많아서 어떤 걸 사용해야 할지 모르겠다면 !! 저는 awesomplete를 추천해드리고 싶어요.homepage : https://leaverou.github.io/awesomplete/이유는 가볍고, 핵심적인 기능만 담고 있고, 디펜던시도 없기 때문입니다. 3. 물론 제가 모든 Autocomplete 라이브러리를 사용해본건 아니라서 이게 짱이에요는 아닙니다만.사용해보니깐 만족해요 !! 4. 팁 홈페이지에 잘 나와 있어서 그것만 잘 보면 됩니다만!! + input 박스를 클릭했을 때 dropd.. 더보기
dragula example 카테고리가 정확하게 맞진 않지만 아무튼 오랜만에 포스팅을 하나 해보려고 합니다. dragula는 오픈소스로 이름에서 유추할 수 있듯이 드래그 기능을 제공해줍니다. 그것도 아주 편하게 말이죠. dragula github webpage : https://github.com/bevacqua/dragula license : MIT 위 웹 페이지에 들어가보면 demo 페이지를 통해 사용해보실 수 있습니다. 사용해보시면 어디에 적용할지 감을 잡을 수 있어요. 저는 bootstrap의 dropdown에 dragula를 적용해보는 것이 목표였습니다. 먼저 작동되는 예시입니다. 왼쪽이 초기화면이구요. 오른쪽이 마우스 드래그 & 드롭으로 순서를 변경하는 화면입니다. dragula 예제는 다음 소스를 참고했습니다. Refe.. 더보기
jQuery 기반 심플하면서 예쁜 Library 추천 이전에 몇 개 작성했던 포스팅을 이어서!! 1. noUiSlider (http://refreshless.com/nouislider/) - 심플하면서 예쁘게 생긴 Slider를 제공합니다. 여러 옵션을 줘서 꽤 원하는데로 쉽게 변경이 가능합니다~ - 이벤트 핸들러도 꽤나 자세히 설명되어 있고, 사용하기 편합니다아! 추천! - 정리했던 포스팅 : http://ngee.tistory.com/598 (http://refreshless.com/nouislider/) 2. iCheck (http://fronteed.com/iCheck/) - 아니 일케 이쁜 Check box, Radio Button이라니!! 너무 좋습니다. - 다양한 색상의 CSS가 미리 준비되어 있어서 간단하게 적용 가능합니다!! 작은 커스터마이.. 더보기
jQuery Selectric - 간단 소개, JavaScript, jQuery, Select 요즘 자바스크립트 기반의 라이브러리를 검색 및 활용해야 하는 일이 많네요. jQuery Selectric은 간단하고 편리한 Select를 제공하는 라이브러리입니다. 기본정보는 다음과 같습니다. 홈페이지 주소 : http://lcdsantos.github.io/jQuery-Selectric/index.html 깃허브 주소 : https://github.com/lcdsantos/jQuery-Selectric 데모 : http://lcdsantos.github.io/jQuery-Selectric/demo.html 라이선스 : MIT 일단 라이선스는 MIT 이니깐요. 상용버전에서 사용하셔도 되고, 관련해서 소스코드 공개할 의무는 없습니다. 다만 MIT 라이선스여도, 사용했다면 웹 페이지 어딘가에 해당 라이브러리.. 더보기