본문 바로가기

jQuery13

jQuery UI Button 사용법 jQuery UI의 버튼 기능을 사용해 봅니다. 1. 필요한 라이브러리를 추가합니다. 2. 기본적인 사용법버튼1버튼2 $(document).ready(function() { $("#btn1").button(); $("#btn2").button();}); 2. 버튼 클릭 이벤트 처리$(document).ready(function() { // 버튼을 생성함과 동시에 이벤트 핸들러를 추가합니다. $("#btn1").button().on("click", function(event) { alert("버튼1이 눌러졌습니다."); }); // 버튼 생성과 이벤트 핸들러 추가를 분리합니다. $("#btn2").button(); $("#btn2").click(function(event) { alert("버튼2가 눌러졌습.. 2018. 12. 13.
jQuery resize()를 사용하여 컨텐츠 영역 height를 100%로 유지하기 jQuery의 resize() 함수를 사용하여 헤더, 메뉴, 컨텐츠 영역으로 구성되는 화면에서 컨텐츠 영역의 높이는 브라우저의 크기를 조절 하더라도 항상 100% 가 유지 되고, 컨텐츠 영역 내부의 실제 컨텐츠의 높이가 컨텐츠 영역의 높이보다 크다면 스크롤이 생기도록 만들어 봅니다. 먼저 html 부분 입니다. head와 main이 상하로 나뉘고, main 내부에는 menu와 contents 가 좌,우로 나뉘어져 있습니다. HEADER MENU CONTENTS Lorem ipsum ... 스타일 시트 부분 입니다. html, body, div 부분은 엘리먼트들의 크기를 초기화 하는 부분 입니다. #main 은 flexbox 레이아웃을 사용해서 구성 했습니다. #contents 가 컨텐츠 영역으로 over.. 2018. 11. 16.
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 .load() 메소드 - 페이지 내용 동적 교체 웹 페이지의 내용을 동적으로 교체하기 위해서 Ajax로 서버에서 데이터 json 형식으로 받아 HTML 요소를 생성하여 페이지내의 원하는 위치의 내용을 바꾸는 작업을 많이 합니다. jQuery의 .load() 메소드는 주어진 URL로부터 HTML 데이트를 받에서 jQuery 셀렉터로 선택된 위치에 넣어 줌으로써 동적으로 페이지의 내용을 교체하는 작업을 간단하게 처리할 수 있도록 해줍니다. 아래 코드는 간단한 사용법을 보여주고 있습니다. 페이지내에서 아이디(id)가 "result" 인 요소를 선택하고 그 요소의 내용을 "load/test.php" 페이지가 반환하는 내용으로 채웁니다. jQuery .load() 메소드 사용법은 다음과 같습니다. 세 가지 인자를 가질 수 있습니다. .load( url [, d.. 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.
jQuery 플러그인 4 - 년도 select 박스 만들기 웹페이지에서 간단한 년도 선택상자(select 박스, 콤보 박스, 드롭다운 리스트)를 jQuery 플러그인으로 만들어 보겠습니다. 달력까지 제공되는 자바스크립트로된 UI 들이 많이 있지만, jQuery 플러그인 연습도 해볼겸 간단하게 사용할 수 있는 년도 선택상자를 만들어 봅니다. 보통 자바스크립트로 UI 를 만들때 요소를 사용해서 만들어질 곳을 표시하고, 스크립트에서 동적으로 태그를 교체하여 생성을 합니다. 이번 예제에서는 간단히 하기 위해서 요소를 직접 사용하여 내용을 동적으로 채울 수 있도록 합니다. 즉, 모양을 바뀌지 않는다는 것입니다. 요소의 옵션을 년도로 간편하게 채울 수 있는 초 간단 플러그인이 되겠습니다. * 기본적인 기능은 2010년을 시작 년도로하고, 마지막 년도는 현재년도 + 1 년까.. 2018. 4. 12.
jQuery 플러그인 1 - 기본적인 플러그인 만들기 jQuery 플러그인은 jQuery의 프로토타입 객체를 확장하는 새로운 메소드를 추가하는 것입니다. 우리가 새로 추가한 기능은 jQuery의 모든 기능을 상속 받아 바로 사용할 수 있습니다. jQuery에 기능을 추가한다는 개념이지만, 우리가 사용할 때는 jQuery의 기능을 모두 사용할 수 있는 우리의 기능을 만든다고 생각하면 되겠습니다. 물론 jQuery 플러그인으로 기능을 만들지 않고 직접 기능을 수행하는 클래스를 만들고, 필요한 곳에 jQuery를 사용하도록 하는 방법도 있습니다. 어떤 방법으로 만들지는 자신의 선택이겠습니다. 자신이 편리한 방법으로 만들면 될 것 같습니다. 필요에 의해 jQuery플러그인을 만들어야 겠다고 생각을 했다면, 먼저 미리 만들어져 있는 것들중에 같은 기능을 하는 프로그.. 2018. 4. 9.
스프링프레임웍에서 POI를 사용한 대용량 엑셀 다운로드 업무중에 데이터를 엑셀파일로 내려 받아야 할 경우가 많이 있습니다. 이럴때 데이터량이 적을 경우는 문제가 되지 않지만, 다운 받아야 할 데이터가 수만건에서 수십만건 이상 된다면 여러가지 문제가 발생합니다. 첫 번째로 엑셀 자체의 한계가 있습니다. xls 형식의 엑셀 파일은 한 시트에 최대 65,535행의 데이터를 가질 수 있습니다. xlsx 형태의 엑셀 파일은 한 시트에 최대 1,048,576행의 데이터를 가질 수 있습니다. 현업에서 쓰고 있는 엑셀 버전과 다운로드 되는 최대 데이터량에 따라 어떤 방식을 사용할지 결정하게 해야 하겠습니다. 두 번째로 엑셀 라이브러리를 사용해서 엑셀 파일을 생성할 때 메모리 상에서 작업을 하게 되면 대용량 다운로드 중에 메모리 부족상황에 빠지거나 시스템이 현저히 느려지는 .. 2018. 4. 4.
스프링프레임웍 ajax 파일업로드 - jQuery, FormData, jQuery Form Plugin 사용 이 글에서는 스프링 프레임웍 환경에서 ajax를 통한 파일 업로드 방법을 알아 보겠습니다. 서버와의 ajax 통신에는 jQuery를 사용하고 업로드를 위해서 FormData 객체를 사용하는 방법과 jQuery Form Plugin 을 사용하는 방법을 알아 보겠습니다. 전체소스는 하단에 첨부 되어 있습니다. jQuery Form Plugin 은 https://github.com/jquery-form/form 에서 다운로드 받을 수 있습니다. 두 가지 방법의 차이점은 다음과 같습니다. - FormData를 사용하는 경우 : Internet Explorer 10이상 부터 사용할 수 있습니다. - jQuery Form Plugin을 사용하는 경우는 IE10 이하에서도 사용할 수 있지만 문제를 일으키는 경우도 있.. 2018. 4. 4.
jQuery로 요소의 값처리 및 상태변경 앞의 글 "jQuery 선택자 사용하기" 에서 작업을 위한 요소를 선택하는 방법에 대해 알아 봤습니다. 필요한 요소가 선택이 되었다면 그 요소의 값을 얻거나, 변경하고, 상태를 변경 하는 작업을 어떻게 하는지 알아보겠습니다. 들어가기에 앞서 선택된 요소 집합을 다루는데 대한 공통된 사항을 알아 봅시다. 선택된 요소 집합이라고 말하는 이유는 선택자에 의해 선택된 요소가 없을수도 있고, 하나이상일 수도 있기 때문입니다. 그래서 선택된 요소가 있는지 확인하고 위해서는 .length 를 사용해서 선택된 요소의 갯수를 확인해야 합니다. 1. 선택된 요소의 값을 얻고, 변경하기 .html() - 일치하는 요소 집합에서 첫 번째 요소의 HTML 컨텐츠를 가져 오거나, 일치하는 모든 요소의 HTML컨텐츠를 설정합니다... 2018. 4. 3.
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.