6. Jquery-UI 사용법

<jquery-ui는 5가지 기능 제공>
 
1. bootstrap과 같은 ui 제공
 
2. class 관련 함수를 animate처럼 사용 가능케
jquery : addClass(클래스명);
jquery UI : addClass(클래스명, 1000, easing, complete);
jquery : animate(properties, 1000, easing, complete);
style이 적용된 class를 animate의 properties처럼 사용할 수 있게 해줌.
 
3. linear swing 외 다양한 easing 제공
효과 함수 + class 관련 함수에 easing 추가하여 사용 가능
별도의 effect() 함수를 제공하기도
ex) animate({option},duration,easing)
toggleClass(클래스명,duration,easing)
hide(duration,easing)
 
4. 새로운 effect 추가(effect() 함수도 추가)
효과 함수 중 hide,show,toggle에 shake,blind,bound,clip,drop과 같은 효과 추가
hide(effect,effectOption,duration,callback)
**이 때 easing을 같이 사용하고 싶으면 json 타입으로 넘겨야
**effect는 결국 style 옵션을 추가하는 것
**때문에 style 옵션들로 효과 주는 animate와 addClass는 effect 사용 불가
    addClass(".active",1000)
    
5. 추가 선택자 $(선택자:data('color'))를 제공
    <div data-background-color="red">
    jquery : $("div").attr("data-background-color") or $("div").data("background-color");
    jquery UI : $("div:data('backgroundColor')")

<jquery-ui 사용법>

1) 홈페이지에서 라이브러리 다운로드

링크: http://jqueryui.com

오른쪽 하단의 Stable을 누르면 표준 라이브러리 다운로드

Custom Download를 누르면 필요한 ui만 선택 가능

맨 하단의 Theme > design a custom theme을 누르면

ui 디자인을 자기 입맛대로 바꿀 수가 있다.

2) 파일을 SPRING에 넣기

Download를 눌러 라이브러리를 다운 받은 후 압축을 푼다.

그 다음엔 폴더 째로 Project > WebContent > resources 중 적절한 위치에 넣어주면 된다.

3) jquery-ui를 사용하려는 페이지에서 import

<footer.html>

<script src="resources/public/script/jquery/jquery-3.1.1.js"></script>
<script src="resources/public/script/jquery-ui/jquery-ui.js"></script>

<TIP>

**jquery-ui 디자인을 보려면 jquery-ui > index.html에서 확인이 가능하다.

4) 실제 사용하기(Widget)

ㄱ. 사용할 위젯 고르기

ㄴ. 소스 창 보기

ㄷ. 필요한 소스를 복사&붙여넣기

**옵션도 잘 정리돼 있으므로

참고해서 복붙하면 된다.

5) 아이콘의 경우

https://api.jqueryui.com/theming/icons/

위 페이지를 통해 <span> 태그를 필요한 부분에 복붙