Lecture 77 - jQuery(4) jQueryUI 설치법 및 기초 사용법

베니지오 IT 월드

갬성개발러 Bennyziio 2019. 7. 15. 13:33

//20180904 frontend engine(gui) - javascript -jQuery - jQueryUI - Bootstrap -> 발전 *ECMAScript 6 / 7 -> mvc - angular => pc / mobile -> jquery Mobile -> react -> vue * 데이터 시각화 D3 d3js.org backend engine - spring, MyBatis - 지속적으로 발전중 www.jqueryui.com pc - jquery ui mobile - jquery mobile (*) - egovframe getbootstrap.com 반응성웹(pc, mobile 동시 사용 가능) - startup에서 많이 사용(사이트에 사람이 많이 안몰리는 곳)

http://jqueryui.com/

http://getbootstrap.com/

https://d3js.org/

데이터 시각화에 대해서 공부해 보자 - jQuery가 선행학습이 되어 있어야 한다.

Source Code(GitHub)

여기서 GitHub이란 협업을 위한 사이트로 공유에 중점을 둔다.

jQuery Eclipse 실행

위 복사한 내용을 WebContent안에 붙여넣기

jQueryUIEx01

accordion 클릭 후 출력상태

jQueryUIEx02

Stable 다운

Custom Download로 가서 thema 다운

다운 받은 jquery-ui-1.12.1에서 아래 파일만 복사해서 이클립스내 js 폴더에 붙여넣는다

다운 받은 jquery-ui-theme-1.12.1에서 thems 폴더안에 있는 모든 파일을 복사해서 이클립스내 css 폴더에 붙여넣는다

다 하면 위와 같은 tree가 구성될 것이다.

index.jsp 파일을 만들어 주자

jQueryUIEx02.WebContent.index

alert 구문 지우고 이걸 앞으로 탬플릿으로 사용할 것이다

Button을 만들어 보자

jQueryUIEx02.WebContent.ex01

F12 DOM 탐색기로 보면 내가 주지도 않은 CSS가 추가되어 있다. class는 여기서 자동 설정해주고 있다.

테마를 바꾸면 디자인이 전부 다 바뀐다

에서 base를 바꿔주면 된다

사이즈가 좀 커서 줄여보자 - body { font-size: 70%; }

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here /* 커스텀 css */ body { font-size: 70%; } // 커스텀 javascript $(document).ready(function() { $('#btn2').button(); $('input[type="button"]').button(); $('a').button(); $('#btn3').button(); }); 난 버튼 난 버튼 버튼 나도 버튼

jQueryUIEx02.ex02

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here /* 커스텀 css */ body { font-size: 70%; } // 커스텀 javascript $(document).ready(function() { $('#btn2').button().on('click', function() { alert('click'); }); $('a').button().on('click', function() { alert('click'); }); }); 난 버튼 난 버튼 버튼 나도 버튼

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here /* 커스텀 css */ body { font-size: 70%; } // 커스텀 javascript $(document).ready(function() { $('#btn2').button().on('click', function() { alert('click'); }); // submit $('a').button().on('click', function(e) { alert('click'); e.preventDefault(); }); }); 난 버튼 난 버튼 버튼 나도 버튼

preventDefault()를 주게 되면 자동으로 페이지가 네이버로 전환되는것을 막아준다.

jQeuryUIEx02.ex03

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here /* 커스텀 css */ body { font-size: 70%; } // 커스텀 javascript $(document).ready(function() { $('#btn1').button({ icon: 'ui-icon-gear', iconPosition: 'end' }); $('#btn2').button({ icon: 'ui-icon-flag', showLabel: false }); }); 난 버튼 난 버튼

아이콘값을 불러와서 버튼에 추가해줄 수 있다.

jQueryUIEx04.ex04

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here /* 커스텀 css */ // 커스텀 javascript $(document).ready(function() { //$('input[type="checkbox"]').checkboxradio(); $('input[type="checkbox"]').checkboxradio({ icon: false }); }); 호텔 등급 : 2 star 3 star 4 star 5 star

토글 기능 없음

라디오는 원칙이 단일 선택이 원칙이므로 name을 r1으로 통일해줘야 한다.

jQueryUIEx02.progressbar

회색(base)가 싫어서 다른색(cupertino)을 적용해보았다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here /* 커스텀 css */ body { font-size: 70%; } // 커스텀 javascript $(document).ready(function() { $('#progressbar').progressbar({ value: 50 }); $('#btn1').button().on('click', function() { var value = $('#progressbar').progressbar('value'); $('#progressbar').progressbar('value', value - 5); }); $('#btn2').button().click(function() { }); }); 감소 증가

감소를 해봤으니 증가도 추가해 보자

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here /* 커스텀 css */ body { font-size: 70%; } // 커스텀 javascript $(document).ready(function() { $('#progressbar').progressbar({ value: 50 }); $('#btn1').button().on('click', function() { var value = $('#progressbar').progressbar('value'); $('#progressbar').progressbar('value', value - 5); }); $('#btn2').button().click(function() { $('#progressbar').progressbar( 'value', $('#progressbar').progressbar('value') + 5); }); }); 감소 증가

progressbar를 시작하면 5씩 증가하고 가득 차면 전송 완료 창이 뜨게 해보자

jQueryUIEx02.progressbar2

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here /* 커스텀 css */ body { font-size: 70%; } // 커스텀 javascript $(document).ready(function() { $('#progressbar').progressbar({ value: 0 }); $('#btn1').button().on('click', function() { increase = setInterval(function() { var value = $('#progressbar').progressbar('value'); $('#progressbar').progressbar('value', value + 5); if(value==100) { alert('전송 완료'); clearInterval(increase); } }, 500); }); $('#btn2').button().on('click', function() { clearInterval(increase); }) }); 시작 일시정지

Custom Label을 이용하여 아래와 같이 구현해보자

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here /* 커스텀 css */ body { font-size: 70%; } .ui-progressbar { position: relative; } .progress-label { position: absolute; left: 50%; top: 4px; font-weight: bold; text-shadow: 1px 1px 0 #fff; } // 커스텀 javascript $(document).ready(function() { $('#progressbar').progressbar({ value: 0 }); $('#btn1').button().on('click', function() { increase = setInterval(function() { var value = $('#progressbar').progressbar('value'); $('#progressbar').progressbar('value', value + 5); $('.progress-label').text(value + '%'); if(value==100) { alert('전송 완료'); clearInterval(increase); } }, 500); }); $('#btn2').button().on('click', function() { clearInterval(increase); }) }); Loading ... 시작 일시정지

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here /* 커스텀 css */ body { font-size: 70%; } .ui-progressbar { position: relative; } .progress-label { position: absolute; left: 50%; top: 4px; font-weight: bold; text-shadow: 1px 1px 0 #fff; } // 커스텀 javascript $(document).ready(function() { $('#progressbar').progressbar({ value: 0, change: function() { console.log('change 호출'); }, complete: function() { console.log('change 호출'); } }); $('#btn1').button().on('click', function() { increase = setInterval(function() { var value = $('#progressbar').progressbar('value'); $('#progressbar').progressbar('value', value + 5); $('.progress-label').text(value + '%'); if(value==100) { alert('전송 완료'); clearInterval(increase); } }, 500); }); $('#btn2').button().on('click', function() { clearInterval(increase); }) }); Loading ... 시작 일시정지

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here /* 커스텀 css */ body { font-size: 70%; } .ui-progressbar { position: relative; } .progress-label { position: absolute; left: 50%; top: 4px; font-weight: bold; text-shadow: 1px 1px 0 #fff; } // 커스텀 javascript $(document).ready(function() { $('#progressbar').progressbar({ value: 0, change: function(event, ui) { console.log('change 호출 ' + $(this).progressbar('value')); }, complete: function() { console.log('complete 호출'); } }); $('#btn1').button().on('click', function() { var increase = setInterval(function() { var value = $('#progressbar').progressbar('value'); $('#progressbar').progressbar('value', value + 5); //$('.progress-label').text(value + '%'); if(value==100) { alert('전송 완료'); clearInterval(increase); } }, 500); }); $('#btn2').button().on('click', function() { clearInterval(increase); }) }); Loading ... 시작 일시정지

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here /* 커스텀 css */ body { font-size: 70%; } .ui-progressbar { position: relative; } .progress-label { position: absolute; left: 50%; top: 4px; font-weight: bold; text-shadow: 1px 1px 0 #fff; } // 커스텀 javascript $(document).ready(function() { $('#progressbar').progressbar({ value: 0, change: function(event, ui) { //console.log('change 호출 ' + $(this).progressbar('value')); $('.progress-label').text($(this).progressbar('value') + '%'); }, complete: function() { //console.log('complete 호출'); $('.progress-label').text('전송 완료'); } }); $('#btn1').button().on('click', function() { var increase = setInterval(function() { var value = $('#progressbar').progressbar('value'); $('#progressbar').progressbar('value', value + 5); //$('.progress-label').text(value + '%'); if(value==100) { alert('전송 완료'); clearInterval(increase); } }, 500); }); $('#btn2').button().on('click', function() { clearInterval(increase); }) }); Loading ... 시작 일시정지

jQueryUIEx02.slider01

수평

수직

기본값 : 50

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here /* 커스텀 css */ body { font-size: 70%; } // 커스텀 javascript $(document).ready(function() { $('#slider').slider({ orientation: 'horizontal', // orientation: 'vertical' // tick value: 50, min: 0, max: 200 }); });

최소 0, 최대 200

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here /* 커스텀 css */ body { font-size: 70%; } // 커스텀 javascript $(document).ready(function() { $('#slider').slider({ orientation: 'horizontal', // orientation: 'vertical' // tick value: 50, min: 0, max: 200, slide: function() { console.log($(this).slider('value')); } }); });

동작중 모든 값 출력

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here /* 커스텀 css */ body { font-size: 70%; } // 커스텀 javascript $(document).ready(function() { $('#slider').slider({ orientation: 'horizontal', // orientation: 'vertical' // tick value: 50, min: 0, max: 200, change: function() { console.log($(this).slider('value')); } /* slide: function() { console.log($(this).slider('value')); } */ }); });

이동 된 위치 값 출력

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here /* 커스텀 css */ body { font-size: 70%; } // 커스텀 javascript $(document).ready(function() { $('#slider').slider({ orientation: 'horizontal', // orientation: 'vertical' // tick value: 50, min: 0, max: 200, step: 20, change: function() { console.log($(this).slider('value')); } /* slide: function() { console.log($(this).slider('value')); } */ }); });

값 20의 간격으로 이동되고 출력

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here /* 커스텀 css */ body { font-size: 70%; } // 커스텀 javascript $(document).ready(function() { $('#slider').slider({ orientation: 'horizontal', // orientation: 'vertical' // tick range: true, value: [10, 100], min: 0, max: 200, //step: 20, /* change: function() { console.log($(this).slider('value')); } */ slide: function() { console.log($(this).slider('value')); } }); });

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here /* 커스텀 css */ body { font-size: 70%; } // 커스텀 javascript $(document).ready(function() { $('#slider').slider({ orientation: 'horizontal', // orientation: 'vertical' // tick range: true, values: [10, 100], min: 0, max: 200, //step: 20, /* change: function() { console.log($(this).slider('value')); } */ slide: function() { console.log($(this).slider('values', 0)); console.log($(this).slider('values', 1)); } }); });

두 틱의 값을 받아올 수 있다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here /* 커스텀 css */ body { font-size: 70%; } // 커스텀 javascript $(document).ready(function() { $('#slider').slider({ orientation: 'horizontal', // orientation: 'vertical' // tick range: true, values: [10, 100], min: 0, max: 200, //step: 20, /* change: function() { console.log($(this).slider('value')); } */ slide: function(event, ui) { //console.log($(this).slider('values', 0)); //console.log($(this).slider('values', 1)); // ui - dom 내용 console.log(ui.values[0]); console.log(ui.values[1]); } }); });

jQueryUIEx02.spinner

jQueryUIEx02.selectmenu01

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here /* 커스텀 css */ body { font-size: 70%; } // 커스텀 javascript $(document).ready(function() { $('#files').selectmenu(); }); 다음을 선택 jQuery.js ui.jQuery.js mobile.jQuery.js jQuery.js ui.jQuery.js mobile.jQuery.js

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here /* 커스텀 css */ body { font-size: 70%; } // 커스텀 javascript $(document).ready(function() { $('#files').selectmenu({ change: function(event, ui) { console.log(ui.item.value); } }); }); 다음을 선택 jQuery.js ui.jQuery.js mobile.jQuery.js jQuery.js ui.jQuery.js mobile.jQuery.js

jQueryUIEx02.autocomplete

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here /* 커스텀 css */ body { font-size: 70%; } // 커스텀 javascript $(document).ready(function() { var availableTags = [ 'ActionScript', 'AppleScript', 'Asp', 'BASIC', 'C', 'C++', 'Clojure', 'COBOL', 'ColdFusion', 'Erlang', 'Fortran', 'Groovy', 'Haskell', 'Java', 'JavaScript', 'Lisp', 'Perl', 'PHP', 'Python', 'Ruby', 'Scala', 'Scheme' ]; $('#tags').autocomplete({ source: availableTags }); }); 언어 선택 :

jQueryUIEx02.WebContent.data.data_json - ajax로 데이터를 받아오자

<%@ page language="java" contentType="text/plain; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>

contentType과 trimDirectiveWhitespaces를 수정한다.

<%@ page language="java" contentType="text/plain; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%> { "data" : [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ] }

jQueryUIEx02.autocomplete02를 만들어서 availableTags 배열 데이터를 ajax로 대체하자.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here /* 커스텀 css */ body { font-size: 70%; } // 커스텀 javascript $(document).ready(function() { //var availableTags; $.ajax({ url: './data/data_json.jsp', type: 'get', dataType: 'json', success: function(json) { var availableTags = json.data; $('#tags').autocomplete({ source: availableTags }); }, error: function() { alert('서버 에러'); } }); }); 언어 선택 :

jQueryUIEx02.accordion01

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here /* 커스텀 css */ body { font-size: 70%; } // 커스텀 javascript $(document).ready(function() { $('#accordion').accordion(); }); Section 1 Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. Section 2 Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. Section 3 Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. List item one List item two List item three Section 4 Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here /* 커스텀 css */ body { font-size: 70%; } // 커스텀 javascript $(document).ready(function() { $('#accordion').accordion(); }); 내용 추가 Section 1 Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. Section 2 Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. Section 3 Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. List item one List item two List item three Section 4 Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

내용 추가하기

Section 5

'; data += '

'; data += ' 추가된 데이터'; data += '

'; data += '

'; $('#accordion').append(data); }); }); 내용 추가 Section 1 Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. Section 2 Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. Section 3 Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. List item one List item two List item three Section 4 Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

추가된 데이터는 accordion화 되지 않는다. 왜냐하면 css가 안먹힌다. 만들어진 순서가 다르므로

그래서 아래와 같이 refresh를 추가해줘야 한다.

Section 5

'; data += '

'; data += ' 추가된 데이터'; data += '

'; data += '

'; $('#accordion').append(data); $('#accordion').accordion('refresh'); }); }); 내용 추가 Section 1 Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. Section 2 Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. Section 3 Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. List item one List item two List item three Section 4 Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

jQueryUIEx02.accordion02 - 아이콘을 넣어보자

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here /* 커스텀 css */ body { font-size: 70%; } // 커스텀 javascript $(document).ready(function() { var icons = { header:"ui-icon-circle-arrow-e", activeHeader: "ui-icon-circle-arrow-s" }; $('#accordion').accordion({ icons: icons }); $('#toggle').button().on('click', function() { if($('#accordion').accordion('option', 'icons')) { $('#accordion').accordion('option', 'icons', null); } else { $('#accordion').accordion('option', 'icons', icons); } }); $('#btn1').button().on('click', function() { var data = ''; data += '

Section 5

'; data += '

'; data += ' 추가된 데이터'; data += '

'; data += '

어코디온을 활용하여 구구단 시작단, 끝단을 입력하여 단수별로 출력되게 해보자

jQueryUIEx02.gugudan01

angular

이 블로그 검색