JAVASCRIPT#46 - jQuery UI란?

Darling, I kind of like the misery you put me through.

JAVASCRIPT#46 - jQuery UI란?

1. 제이쿼리 UI란?

- jQuery UI는 User Interface 를 제공하는 제이쿼리 플러그인으로 여러가지 시각효과 기능과 위젯을 지원한다.

2. 제이쿼리 UI 설치하기

제이쿼리UI.zip

다운로드해서 2개의 파일을 자신의 프로젝트 폴더에 추가한다.

jquery-ui.js

jquery-ui.css

이후 메인 html 파일에서 위의 js와 css를 추가해준다.

<link rel="stylesheet" href="jquery-ui.css">

<script type="text/javascript" src="./jquery-ui.js"></script>

3. 제이쿼리 UI 사용해보기

- jQuery UI는 좀 다른 방식으로 작동하는데, 아래와 같이 써야한다.

jQuery UI에서 제공하는 progressbar 라는 걸 사용해보도록 하자.

HTML 파트

<div id="progressbar"></div>

JS 파트

$("#progressbar").progressbar({value: 21});

프로그래스바 이용한 유닛생산 시스템 예제.

- 이 예제에서 쓰인것들 복습

1) 문자열을 정수값으로 바꾸기

UnitA_queue = UnitA_queue + parseInt($("#UnitA_howmany").val());

2) JS로 html 업데이트 시키기

$("#UnitA_num").html("Queue: " + UnitA_queue);

3) 자바스크립트 반복문 (자기자신 불러내기)

setTimeout(UnitA_unit_production, UnitA_updaterate);

유닛생산.zip