jquery는 크로스브라우져 지원, 적은 비용의 learning-courve, 확장성, 다양한 플러그인 등 많은 장점으로 인하여 급속한 인기를 얻고 있다. 본인도 최근 프로젝트에서 적용해본 경험으로 매우 좋은 인상을 받아 살짝 열광하고 있다.
jquery 자체로도 많은 기능이 있지만 빈약한 html의 UI를 향상시키기 위한 UI 컴포넌트 만큼 자극적인 주제도 없을 것이다. 그러면 jquery의 ui를 사용하기위한 환경을 잡아보자.
1. jquery ui를 다운로드 받는다. ( http://jquery-ui.googlecode.com/files/jquery.ui-1.6rc2.zip )
2. 다운로드 받은 파일의 압축을 풀고 jquery core (jquery-1.2.6.js), jquery ui full (jquery.ui.all.packed.js) 을 웹페이지에 포함시키고 등록시킨다.
3. UI 를 표현하는 모듈이므로 화면 디자인을 고려해야 한다. jquery ui는 다양한 Theme를 제공하고 있는 데 이는 jquery ui themeroller에서 선택하고 다운로드 받는다.( http://ui.jquery.com/themeroller )
4. 다운로드 받은 Theme 파일을 웹어플리케이션에 포함시키고 웹페이지에 등록한다.
여기까지 jquery ui를 적용하기 위한 준비는 끝났다.
jquery 자체로도 많은 기능이 있지만 빈약한 html의 UI를 향상시키기 위한 UI 컴포넌트 만큼 자극적인 주제도 없을 것이다. 그러면 jquery의 ui를 사용하기위한 환경을 잡아보자.
1. jquery ui를 다운로드 받는다. ( http://jquery-ui.googlecode.com/files/jquery.ui-1.6rc2.zip )
2. 다운로드 받은 파일의 압축을 풀고 jquery core (jquery-1.2.6.js), jquery ui full (jquery.ui.all.packed.js) 을 웹페이지에 포함시키고 등록시킨다.
<script type="text/javascript" charset="UTF-8" language="javascript" src="./js/jquery-1.2.6.js"></script>
<script type="text/javascript" charset="UTF-8" language="javascript" src="./js/jquery.ui.all.packed.js"></script>
<script type="text/javascript" charset="UTF-8" language="javascript" src="./js/jquery.ui.all.packed.js"></script>
3. UI 를 표현하는 모듈이므로 화면 디자인을 고려해야 한다. jquery ui는 다양한 Theme를 제공하고 있는 데 이는 jquery ui themeroller에서 선택하고 다운로드 받는다.( http://ui.jquery.com/themeroller )
4. 다운로드 받은 Theme 파일을 웹어플리케이션에 포함시키고 웹페이지에 등록한다.
<link rel="stylesheet" href="./css/jquery-ui-themeroller.css" type="text/css" media="screen" />
여기까지 jquery ui를 적용하기 위한 준비는 끝났다.
댓글