jQueryUI는 jQuery를 기본으로 하면서 뷰를 표현하는 다양한 컴포넌트, 위젯을 모아놓은 User Interface를 모아 놓은 것이다. 어떻게 시작할 수 있는지 알아보자
1. 사전 지식
- 먼저 데모페이지에서 어떤 종류의 컴포넌트가 있는지 보자
- 여러 종류의 컴포넌트중 사용하길 원하는 부분만 Download Builder 를 통하여 다운로드한다
2. 파일 다운로드하기
- Download Builder에서 필요한 컴포넌트 -Core, Interactions, Widgets, Effects - 를 선택한다.
- 사용할 테마(Theme)를 선택한다. ThemeRoller 에서 사용자 정의도 가능하고 이미 만들어진 것을 선택할 수 있다
- jQuery UI 버전 - 1.10.3/1.9.2 - 을 선택한다. jQuery 버전은 1.6 이상을 요구한다
- 마지막으로 download 버튼을 클릭한다. 다운로드 파일 예) jquery-ui-1.10.3.custom.zip
// 압추을 풀면 폴더와 파일 존재한다. index.html 를 브라우져에서 확인해 볼 수 있다
/css
/development-bundle
/ js
index.html
- index.html 의 내용
// css를 추가
<link rel="stylesheet" href="css/themename/jquery-ui.custom.css" />
// jquery를 먼저 위치시킴
<script src="js/jquery.min.js"></script>
// jquery-ui를 위치시킴
<script src="js/jquery-ui.custom.min.js"></script>
- smoothness theme을 선택했을 경우
3. 사용자 정의하기
- JSON 형태로 옵션 객체를 전달한다. API를 확인하고 설정한다
$( "#mySliderDiv" ).slider({
orientation: "vertical",
min: 0,
max: 150,
value: 50
});
- jQuery UI 개발에 참여하고 싶다면 Development Center로...
4. 동작방식 이해하기
- jQuery UI widgets은 공통 API를 제공하는 Widget Factory 기반으로 생성된다
- Widget Life Cycle
+ Initialization : 플로그인을 펑션을 호출한다. 옵션이 없으면 default 옵션이 적용된다
$( "#elem" ).progressbar();
또는
$( "#elem" ).progressbar({ value: 20 });
+ Methods : 최기화 된 후 상태를 조회하거나 액션을 수행할 수 있다. 메소드 이름 "value" 호출하여 40을 설정. 체이닝 호출 가능함.
$( "#elem" )
.progressbar( "value", 90 )
.addClass( "almost-done" );
+ Command Methods : option, disable, enable, destroy, widget
$( "#elem" ).progressbar( "disable" );
$( "#elem" ).progressbar( "enable" );
$( "#elem" ).progressbar( "distroy" );
+ Events : 모든 동작에 대한 위젯별 이벤트 콜백 펑션을 설정한다. 공통 이벤트는 위젯 생성후 호출되는 create 이 존재함
// bind 호출 후 위젯명+이벤트명 연결하여 호출
$( "#elem" ).bind( "progressbarchange", function() {
alert( "The value has changed!" );
});
// 위젯 호출 후 change에 콜백 펑션 정의
$( "#elem" ).progressbar({
change: function() {
alert( "The value has changed!" );
}
});
5. 테마 설정하기
- 기본적으로 jQuery UI CSS Framework - ui.theme.css - 와 plugin 별 CSS가 조합되어 만들어진다
+ ui.theme.css는 ThemeRoller 를 통하여 변경하는 경우
+ ui.theme.css 또는 widget plugin css를 직접 CSS를 변경하는 경우
+ 완전히 새로운 CSS를 만드는 경우 예) Twitter Bootstrap CSS를 jQuery UI에 적용
6. CSS Framework API 이해
- ui.core.css 와 ui.theme.css 두개로 분리된다
- Layout Helpers : .ui-helper-*
- Widget Containers : .ui-widget-*
- Interaction States/Cues : .ui-state-*
- Icon : .ui-icon 형식) .ui-icon-{icon type}-{icon sub description}-{direction}
- Corner Radius : .ui-corner-*
* jQuery UI Theme Base 깃헙 소스
7. 직접 Theme 만들기
- 디렉토리 구조 만들기
// 1. themename 폴더 만들기
/themename
// 2. 기본 css 파일 만들기
/themename/themename.css
// 3. 플러그인 css 파일 만들기
/themename/themename.pluginname.css
// 4. 이미지 포함하기
/themename/img.png
- 스타일링 : .ui-themename 으로 한다면 하기와 같이 사용한다
<html>
<head>
<title>My Site</title>
<link rel="stylesheet" href="themename/themename.css" />
<link rel="stylesheet" href="othertheme/othertheme.css" />
<link rel="stylesheet" href="othertheme/othertheme.dialog.css" />
</head>
<body class="ui-themename">
<div class="ui-othertheme">
<div class="ui-dialog">This is a modal dialog.</div>
</div>
</body>
</html>
8. Widget Factory 사용하기
- 위젯 만드는 일관성을 보장하기 위함
- jQuery.widget 또는 $.widget 호출을 통하여 만든다
+ Context Object 이다. DOM은 아니다
+ Single Object로 생성된다
// 1) namespace 는 한개의 depth만 허용하여 만들 수 있다. 여기서는 custom 이 namespace 이다
$.widget( "custom.progressbar", {
// 2) instance의 option내역 및 default 값 정의
options: {
value: 0
},
// 3) 위젯 생성
_create: function() {
var progress = this.options.value + "%";
// jQuery Object
this.element
.addClass( "progressbar" )
.text( progress );
},
// 4) 사용할 메소드 생성
// Create a public method.
value: function( value ) {
// No value passed, act as a getter.
if ( value === undefined ) {
return this.options.value;
}
// Value passed, act as a setter.
this.options.value = this._constrain( value );
var progress = this.options.value + "%";
this.element.text( progress );
},
// Create a private method. _ 즉 underscore를 하면 private 메소드가 된다
_constrain: function( value ) {
if ( value > 100 ) {
value = 100;
}
if ( value < 0 ) {
value = 0;
}
return value;
}
});
- 사용하기
var bar = $( "<div></div>" )
.appendTo( "body" )
.progressbar({ value: 20 });
// Get the current value.
alert( bar.progressbar( "value" ) );
// Update the value.
bar.progressbar( "value", 50 );
// Get the current value again.
alert( bar.progressbar( "value" ) );
- 그외 Option 동작, Triggering CallBack Function, CleanUp with Destroy방법은 링크 참조한다
<참조>
- jQuery UI Getting Start
- jQuery UI How to Work
- Theming jQuery UI
- jQuery UI CSS Framework API
- jQuery UI Theme Base 깃헙 소스
- Twitter Bootstrap CSS를 jQuery UI에 적용
- How to Use Widget Factory
