[Jquery] Jquery - UI

개발 노트/JQuery  2015.01.25 01:11


안녕하세요 명월입니다.
이번 포스팅에서는 Jquery에서 지원하는 UI에 대해서 알아보겠습니다.
요즘 프로젝트는 거의 웹 디자이너가 있어서 개발자가 디자인에 대해 크게 신경을 쓰지 않습니다.. (특히 한국 프로젝트의 경우는 거의 있는 것 같더군요) 그러나 저 같은 경우는 일본에서 개발을 하고 있는데 웹 디자이너를 끼고 개발해 본 적이 없을 정도로 웹 디자이너가 귀하네요. 그래서 개발자가 디자인을 하는 경우가 많은데요..제가 할 수 있는 디자인은 Css를 이용해서 최대한 깔끔(?)하게 만드는 것 입니다..
그러다 보니 프로그램은 잘 나올지는 몰라도 디자인이 썩 마음에 안 드는 경우가 많이 있습니다.
그럴때 Jquery UI를 이용하면 그나마 깔끔하고 프로그램다운 디자인이 나옴니다.

사이트에 접속해서 알아보도록 하겠습니다.

http://jqueryui.com/



다운로드 탭으로 이동하고 바로 하단으로 이동하면 테마를 고를 수 있네요..


하단을 확인 해 보면 Theme를 선택할 수 있습니다. 저의 경우는 Eggplant를 선택해서 확인 해 보겠습니다.

다운로드를 하고 압출을 풀면 아래와 같은 구조로 나올 것 입니다.


Index.html을 열어보겠습니다.


저는 위의 같은 테마로 예제들이 나오네요..(각 테마 별로 나오는 화면이 다릅니다.)
다른 소스에 적용을 시킬 때는 jquery-ui.css 만 적용시키면 됩니다


그 외의 탭이든 Dialog를 사용할 때는 해당 소스를 참고해서 사용하면 되겠습니다.

오늘은 여기까지 입니다. 질문이 있으면 댓글이나 메일을 남겨주세요.



댓글 0개가 달렸습니다.
댓글쓰기