[train simple, Adobe 공인 트레이닝 센터] [발췌 출처: trainsimple.com - Dreamweaver CC New Features] jQuery UI 프레임워크는 다양한 위젯을 제공하는데요.
예를 들어 웹 개발 환경에서 폭넓게 사용되는 아코디언이나 탭 등이 있습니다.
Dreamweaver에서 jQuery 위젯을 지원하기 위한 일환으로 Spry 위젯이 이러한 새로워진 jQuery 위젯으로 교체되고 있습니다.
이제 jQuery 위젯을 사용하여 이 양식의 사용자 경험을 간소화해보겠습니다.
시작하기 전에 widgets.html로 이동해보죠.
빈 HTML 문서인데요.
삽입 패널로 이동하여 이 메뉴에서 jQuery UI를 선택하면 모든 jQuery UI 위젯이 표시됩니다.
예를 들어 Accordion을 선택하면 이 위젯이 문서에 배치됩니다.
위젯의 콘텐츠를 수정하려면 위젯 주위에 있는 파란색 테두리를 선택합니다.
그러면 속성 관리자에 해당하는 모든 옵션이 표시됩니다.
패널 수와 애니메이션 방식을 지정할 수 있고 아코디언에 표시할 아이콘과 같은 다양한 옵션이 있습니다.
이러한 위젯을 직접 사용해 보면 얼마나 간편한지 알게 될 것입니다.
다시 이전 양식으로 돌아가 웹 브라우저에서 이 페이지를 보면 표준 양식인데요.
CSS 스타일로 서식이 적용되어 있습니다.
이제 최종 사용자가 날짜를 직접 입력하는 것이 아니라 날짜 선택이 가능한 캘린더를 제공하기 위해 jQuery 위젯을 사용하겠습니다.
물론 HTML5에는 Datepicker가 있지만 jQuery는 다양한 브라우저와 디바이스에서 구현된다는 이점을 제공합니다.
그럼 jQuery 위젯을 사용해보겠습니다.
브라우저를 닫고 이 양식에서 이 텍스트 필드를 선택해보죠.
이 텍스트 필드가 선택된 상태에서 삭제한 다음 삽입 패널로 이동하여 Datepicker를 찾습니다.
이 옵션을 선택하면 Datepicker가 양식에 배치되고 속성 패널에 여러 기본 옵션이 제공됩니다.
콘텐츠가 미국을 기반으로 제공될 예정이므로 로케일을 English로 지정하겠습니다.
또한 다양한 옵션이 있는데 월이나 연도를 변경하거나 인라인을 표시할 수도 있습니다.
최소 날짜를 설정할 수도 있는데 이 경우 1로 설정하고 최대 날짜는 최종 사용자가 선택할 수 있도록 100으로 설정하겠습니다.
그런 다음 표시할 월 수를 지정해볼 텐데요.
하나만 표시되도록 기본값으로 그대로 두겠습니다.
이러한 설정을 완료하면 문서를 저장하고 웹 브라우저에서 확인합니다.
이 텍스트 필드를 클릭하면 Datepicker가 표시되고 날짜를 선택하면 해당 텍스트 필드가 채워집니다.
이제 최종 사용자가 이 양식에 날짜를 간편하게 입력할 수 있게 되었습니다.
지금까지 Dreamweaver CC의 새로운 기능인 jQuery UI 위젯을 살펴봤습니다. [train simple, 경제적이고 유용한 기술 트레이닝] [Adobe 공인 트레이닝 센터 - www.trainsimple.com]
