본문 바로가기

jquery UI6

jQuery UI Accordian을 사용한 메뉴 만들기 jQuery UI 의 Accordian 기능을 이용해서 메뉴를 만들어 봅니다. jQuery UI는 http://jqueryui.com/ 에서 다운로드 받을 수 있습니다. 1. 필요한 자바스크립트와 스타일 시트를 포함합니다. 2. 메뉴가 될 HTML 입니다. Menu 1 Sub menu 1-1 Sub menu 1-2 Menu 2 Sub menu 2-1 Sub menu 2-2 Menu 3 Sub menu 3-1 Sub menu 3-2 3. 메뉴를 생성합니다. - header: 기본값을 태그 입니다. 그 외의 태그를 사용하려면 header 옵션을 지정합니다. jQuery의 셀렉터 구문을 사용할 수 있습니다. - collapsible: true를 설정하면 모든 메뉴를 다 닫을 수 있습니다. false로 지정하면.. 2018. 10. 31.
드래그해서 순서를 바꿀 수 있는 리스트 만들기(jQuery UI - Sortable) 순서가 있는 리스트에서 드래그 앤 드랍을 이용해서 아이템의 순서를 바꿀 수 있는 UI(사용자 인터페이스)가 jQuery UI에서 지원이 됩니다. Sortable 기능을 사용하면 원하는 기능을 구현할 수 있습니다. jQuery UI 사이트의 예제에는 기존에 존재하는 리스트 항목을 드래그 앤 드랍으로 순서를 바꿀 수 있는 예제만 나옵니다. 이 글에서는 순서를 바꾸는것 외에 아이템을 추가하고, 삭제하는 기능까지 구현해 보겠습니다. 첫 번째 예제는 Sortable의 기본 기능을 확인해보고, 두 번째 예제에서는 추가, 삭제 기능도 포함된 예제를 보도록 하겠습니다. 1. 필요한 js 라이브러리들 불러오기 jQuery 라이브러리, jQuery UI 라이브러리와 스타일 시트가 필요합니다. 예제에서는 외부 라이브러리를 .. 2018. 8. 31.
jQuery UI autocomplete(입력필드 자동완성) 사용하기 입력 필드에 타이핑을 하면 관련 정보를 보여주고 선택할 수 있는 기능이 많이 사용됩니다. jQuery UI에서 제공되는 autocomplete 기능을 사용해서 이 기능을 구현해 봅니다. 1. 필요한 파일 인클루드하기 jQuery UI 스타일 시트 파일과 jQuery 파일, jQuery UI 파일이 필요합니다. 각각은 다운로드 받아서 사용해도 되고 CDN 을 이용해서 사용해도 됩니다. 이 예제에서는 CDN을 사용했습니다. 2. 기본 기능 사용하기 도시: id가 city 인 입력 필드에 자동완성기능을 만듭니다. - $("#city").autocomplete() : 자동완성기능을 만듭니다.- source: avalibleCity : 타이핑시 보여질 내용 입니다.- select: function(event, u.. 2018. 4. 20.
jQuery UI datepicker - 자바스크립트 달력 사용하기 jQuery UI 의 datepicker 위젯은 웹 프로그램에서 날짜를 선택할 수 있는 자바스크립트 달력 입니다. 간단한 사용방법을 알아보겠습니다. jQuery UI 는 jQuery 플러그인으로 만들어 졌으므로 jQuery가 있어야 합니다. 예제에서는 jQuery는 다운로드 받아서 쓰지 않고 CDN 을 사용해서 테스트 했습니다. jQuery UI 는 http://jqueryui.com/download/ 에서 다운로드 받을 수 있습니다. 필요한 위젯만 선택하여 다운로드 받는것이 가능합니다. 모든 위젯이 포함되어 있는 배포판은 http://jqueryui.com/download/all/ 에서 다운 받을 수 있습니다. 달력의 한글화를 위한 파일은 https://github.com/jquery/jquery-ui.. 2018. 4. 20.
스프링프레임웍에서 POI를 사용한 대용량 엑셀 다운로드 업무중에 데이터를 엑셀파일로 내려 받아야 할 경우가 많이 있습니다. 이럴때 데이터량이 적을 경우는 문제가 되지 않지만, 다운 받아야 할 데이터가 수만건에서 수십만건 이상 된다면 여러가지 문제가 발생합니다. 첫 번째로 엑셀 자체의 한계가 있습니다. xls 형식의 엑셀 파일은 한 시트에 최대 65,535행의 데이터를 가질 수 있습니다. xlsx 형태의 엑셀 파일은 한 시트에 최대 1,048,576행의 데이터를 가질 수 있습니다. 현업에서 쓰고 있는 엑셀 버전과 다운로드 되는 최대 데이터량에 따라 어떤 방식을 사용할지 결정하게 해야 하겠습니다. 두 번째로 엑셀 라이브러리를 사용해서 엑셀 파일을 생성할 때 메모리 상에서 작업을 하게 되면 대용량 다운로드 중에 메모리 부족상황에 빠지거나 시스템이 현저히 느려지는 .. 2018. 4. 4.
jquery ui를 사용한 tooltip 텍스트 꾸미기 태그의 title 속성으로 툴팁을 만들 수 있습니다. 하지만 일반 텍스트 밖에 사용할 수 가 없습니다. 툴팁 내용에 html 태그를 사용하면 그대로 보여져 버립니다. jquery UI 의 tooltip 위젯을 사용하면 툴팁의 모양을 예쁘게 꾸밀 수 있습니다. 사용하는 방법을 알아 봅시다. 1. 가장 기본적인 사용법입니다. jquery-ui 를 사용하기 위해서는 jquery 가 필요 합니다. 아래 샘플 코드 에서는 jquery-ui 1.12.1 버전을 jquery 1.12.4 버전을 사용하고 있습니다. 또한 jquery-ui의 기본적인 모양을 지정하는 jquery-ui.css 파일도 사용합니다. $(function() { $(document).tooltip(); }); 위 코드는 문서내의 모든 title .. 2018. 4. 1.