JQuery UI

2. 기능

jQuery UI는 웹 페이지의 사용자 인터페이스를 향상시키기 위한 다양한 기능을 제공하며, 크게 상호작용, 위젯, 효과, 유틸리티 네 가지 범주로 나눌 수 있다.^[22]

1.11.4 릴리스 기준으로, 마우스를 이용한 드래그 앤 드롭이나 요소 정렬과 같은 상호작용 기능이 지원된다.^[6] 또한, 자동 완성, 날짜 선택기, 진행률 표시줄, 슬라이더 등 다양한 위젯을 제공하며, 이 위젯들은 테마 기능을 통해 디자인을 자유롭게 변경할 수 있다.^[7] 색상 애니메이션, 클래스 전환 효과 등 시각적인 효과 기능도 포함하고 있다.

jQuery UI의 기능들은 필요에 따라 개별적으로 선택하여 다운로드할 수 있어 파일 크기를 줄이는 데 유리하다. 이러한 모듈식 구성은 서드 파티 개발자가 직접 테마를 만들어 제공하는 것을 가능하게 한다. 예를 들어, jQUIT Builder에서는 윈도우 8 스타일의 UI를 모방한 테마를 제공하기도 한다.^[13]

2. 1. 상호작용

• '''드래그''' (Draggable): 각 요소에 대한 드래그 기능을 구현한다.
• '''드롭''' (Droppable): 드래그와 함께 사용되어 요소의 드롭을 가능하게 한다.
• '''크기 조절''' (Resizable): 요소의 크기 조절을 구현한다.
• '''선택 가능''' (Selectable): 여러 요소를 선택할 수 있게 한다.
• '''정렬 가능''' (Sortable): 요소의 정렬을 할 수 있게 한다.

2. 2. 위젯

또한, jQuery UI 1.11.4 릴리스부터는 드래그 가능(Draggable), 드롭 가능(Droppable), 정렬 가능(Sortable)과 같은 상호 작용 기능도 위젯과 유사하게 지원된다.^[6][7]

2. 3. 효과

• '''색상 애니메이션''' (Color Animation): 한 색상에서 다른 색상으로 부드럽게 전환하는 애니메이션 효과를 제공한다.
• '''클래스 전환''' (Toggle Class, Add Class, Remove Class, Switch Class): CSS 클래스를 추가, 제거, 전환하면서 스타일 변경에 애니메이션 효과를 적용한다.
• '''효과''' (Effect): 나타나기(Fade-in), 미끄러지기(Slide-down), 폭발하기(Explode) 등 미리 정의된 다양한 시각 효과를 제공한다.
• '''토글''' (Toggle): 지정된 효과를 사용하여 요소를 나타내거나 숨기는 동작을 전환한다.
• '''숨기기/보이기''' (Hide, Show): 위에서 언급된 효과들을 사용하여 요소를 숨기거나 표시한다.

2. 4. 유틸리티

• '''Position''' – 다른 요소의 위치에 상대적으로 요소의 위치를 설정한다(정렬).
• '''Widget Factory''' – 모든 JQuery UI 위젯과 동일한 추상화를 사용하여, 상태를 저장하는(stateful) jQuery 플러그인을 생성한다.