jQuery.UI 사용

안녕하세요~ 오랜만에 컴퓨터 관련 포스팅을 하네요.
현재 시간은 미국시간 새벽 1시50분입니다.
오늘 워싱턴으로 벗꽃놀이 가는데....설레어서 일찍 잠에서 깨어 버렸네요 -_-;

각설하고...jQuery.UI에대해서 말해 봅시다~ㅎ

jQuery.UI란?

jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.

이라는 군요...(영어 울렁증이...T-T)
해석해 보면.....대화영 웹 사이트를 만들때 상호 작용 및 애니메이션, 고급효과와 위젯등을 쉽게 추가 할 수 있도록 제공하는 어쩌구 저쩌구....

즉, 웹사이트를 만들때 디자이너가 없어도 이쁘게 만들수 있고, 필요한 기능을 죽어라 만들지 않고 그냥 갖다 쓰기만 하면된다는 그러한 아주 좋은 기능입니다~하하 그리고, theme을 제공 하므로 사이트에 맞게 바꾸기도 슆습니다~오~~~어메이징~~~
전 가끔 혼자 프리렌서를 하는데, 이 jQuery.UI덕을 많이 봅니다~ㅎㅎ 디자이너 없이 개발을 하기 때문에...아무리 회사 intranet이라 하지만, 대충 태그로만 찍찍 하는것 보단, 이쁘게 엑션 들어가고, 색 들어가는게 보기 좋으니까요~~ㅎㅎ

자 서론은 여기까지~ 이제 본격적으로 jQuery,UI에 세계로 빠져 봅시다~(언제쩍 유행어니 -_-)
(헉!내방에 왕파리 들어왔다 -_-;)

※ 관련주소

1. jQuery
2. jQuery.UI
3. jQuery Demos & Documentation

위 주소로 가면 다운 로드 및 관련 정보를 볼 수 있습니다.
자~이제 jQueyr.UI로 가서 다운을 받아볼까~~
다운을 받을때, Download메뉴보단, Themes페이지로 이동을 한다. 그리고 Gallery로 이동을 합니다.

 
자 겔러리로 가보면 여러가지 Themes들이 보일 것이다. 그 중 자신의 사이트의 분위기와 맞는 themes를 구해서 다운 로드 받으면 끝~!

다운 로드를 받게되면 juery-ui-1.8.custom.zip란 파일이 생긴다. 이 파일을 앞축을 풀고, css는 css관련 폴더에, js는 js관련 폴더에 넣어 주시고~
앞축 파일 안에 index.html이 있는데, 이것은 쉽게 말해서..예제 코드라고 보면됩니다.

사용법은 너무 간단해서..뭐 쓰기가 너무 민망하네요.
예를 들면..tab을 만들고 싶다면,
일반적인 작성법..

-HTML Code
<div class='nav'>
      <ul>
           <li onclick='javascript:selMenu(1)'>tab menu1</li>
           <li onclick='javascript:selMenu(2)'>tab menu2</li>
           <li onclick='javascript:selMenu(3)'>tab menu3</li>
           <li onclick='javascript:selMenu(4)'>tab menu4</li>
</div>
<div id='tab1'>내용1</div>
<div id='tab2'>내용2</div>
<div id='tab3'>내용3</div>

-CSS Code
.nav ul
{
    display:inline
어쩌구 저쩌구~~~~
}

-Javascript Code
function selMenu(index){
     //1. 선택 해제 모듈
     //2. 선택 모듈
     //3. 이벤트 관련 모듈
}

이처럼 복잡하다 -_-(도데체 뭐가 복잡하다는거야 -_- 귀찮아서 저정도만 썻지...더 복잡해요 흑흑)

하지만, jquery.ui에서는..

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.custom.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript">
 $(function(){
  // Tabs
  $('#tabs').tabs();
 }
</script>
<div id="tabs">
 <ul>
  <li><a href="#tabs-1">First</a></li>
  <li><a href="#tabs-2">Second</a></li>
  <li><a href="#tabs-3">Third</a></li>
 </ul>
 <div id="tabs-1">first.</div>
 <div id="tabs-2">second.</div>
 <div id="tabs-3">third.</div>
</div>

요롷게만 써주면된다..즉 많은 css부분과, javascript부분이 사라졌다..
즉 사용이 편리하고, 간단하다..그리고 ui를 사용하면 가장 좋은 점이...theme을 통해서 홈페이지 분위기를 바꿔줄 수 있다..
ui코드를 이용해서 작성 할 경우, theme의 css만 바꿔주면 새단장끝~ㅋㅋㅋㅋ

우선 지금 잠이 너무 와서...대략적으로 이정도만..(뭘 쓴게 있다고-_-)


잠자기 위해서 후딱 결론을 내리자면...
디자이너 없이 혼자 개발하거나, 뭐 디자이너가 있어도, 위젯이나 기타 애니메이션 기능을 이용하고 싶을때, 일일이 만드는 것 보단, jquery.ui를 이용해서 개발 할 경우, 개발 시간도 세이브되고, 검증된 위젯을 가지고 만들기 때문에 테스트 시간을 줄일 수있다!!!
개발할 것도 많은데..이런걸로라도 시간을 세이브 하자구요~~

단, 단점이 있다면...좀 느리다 -_-; 그건 자신의 스킬에 맞게 알아서 하는 수 밖에....ㅎㅎ
느린 이유를 찾아보니, css로 그냥 a:hover하면 끝날일을..다 jquery를 써서 사용해서 느리더군요..ㅎㅎ
하지만 요즘 컴퓨터들이 워낙 좋다보니 저정도야....라고 하지만...성능이 중요한 사이트에선..그냥 아이디어만 베껴쓰는 수 밖에 없겠네요~ㅎㅎ

아 너무 졸려요 이제 잘래요 ㅎㅎㅎ
그냥 생각나는데로 정리도 안 하고 막 쓰다보니...오타도 많을 테고..이것저것 앞뒤도 안 맞을 텐데...
지금까지 읽어주시느라 수고하셨습니다~ㅋㅋ
오늘 여기는 주말이네요~!!
Have a wonderful weekend~~