jQuery UI LibraryjQuery UI 라이브러리 시작하기

비고

jQuery UI는 jQuery 위에 구축 된 JavaScript UI 라이브러리로 사용자 인터페이스 상호 작용, 효과 및 위젯 세트를 제공합니다.

버전

번역 출시일
1.7.0 2009-03-06
1.7.1 2009-03-19
1.7.2 2009-06-12
1.7.4 2010-05-04
1.8.0 2010-03-23
1.8.1 2010-05-04
1.8.2 2010-06-07
1.8.4 2010-08-10
1.8.5 2010-09-17
1.8.6 2010-10-02
1.8.7 2010-12-10
1.8.8 2011-01-14
1.8.9 2011 년 1 월 21 일
1.8.10 2011-02-24
1.8.11 2011-03-18
1.8.12 2011 년 4 월 23 일
1.8.13 2011 년 5 월 17 일
1.8.14 2011-06-28
1.8.15 2011-08-08
1.8.16 2011 년 8 월 18 일
1.8.17 2012-01-10
1.8.18 2012-02-23
1.8.19 2012-04-17
1.8.20 2012-04-30
1.8.21 2012-06-05
1.8.22 2012-07-24
1.8.23 2012-08-15
1.8.24 2012-09-28
1.9.0 2012-10-08
1.9.1 2012-10-25
1.9.2 2012-11-23
1.10.0 2013-01-17
1.10.1 2013-02-15
1.10.2 2013-03-14
1.10.3 2013-05-03
1.10.4 2014-01-17
1.11.0 2014-06-26
1.11.1 2014-08-13
1.11.2 2014-10-16
1.11.3 2015-02-12
1.11.4 2015-03-11

jQuery UI 스크립트 추가 및 기본 사용법

jQuery UI 라이브러리를 시작하려면 jQuery 스크립트, jQuery UI 스크립트 및 jQuery UI 스타일 시트를 HTML에 추가해야한다.

먼저, jQuery UI를 다운로드하십시오 . 다운로드 페이지에서 필요한 기능을 선택하십시오. 압축을 풀고 jquery-ui.cssjquery-ui.js (및 jquery.js )를 HTML에서 사용할 수있는 폴더에 넣으십시오 (예 : 다른 스크립트 및 스타일 시트 사용).

jQuery UI는 jQuery에 의존하므로 jquery-ui.js 앞에 jquery.js 를 포함 jquery-ui.js .

<link rel="stylesheet" href="stylesheets/jquery-ui.css">
<script src="scripts/jquery.js"></script>
<script src="scripts/jquery-ui.js"></script>

그게 다야! 이제 jQuery UI를 사용할 수 있습니다. 예를 들어 다음 HTML과 함께 datepicker를 사용합니다.

<input type="text" name="date" id="date">

그런 다음 다음 JavaScript를 사용하십시오.

$("#date").datepicker();

어느 것이 당신에게 좋은 datepicker 팝업을 줄 것입니다 :

스크린 샷

자세한 내용은 공식 "시작하기"를 참조하십시오.

처음 예제를위한 jQuery UI 설정하기

jQuery UI 프레임 워크는 jQuery JavaScript 라이브러리에 대한 사용자 인터페이스 컨트롤을 확장하고 확장하는 데 도움이됩니다.

jQuery UI를 사용하려면 이러한 라이브러리를 HTML에 추가해야합니다. 빠른 시작 방법은 사용 가능한 코드 소스를 사용하는 것입니다.

jQuery 라이브러리

https://code.jquery.com/jquery-3.1.0.js
https://code.jquery.com/ui/1.12.0/jquery-ui.js

jQuery UI를위한 다양한 테마를 선택할 수 있으며 나만의 테마 롤 수 있습니다. 이 예제에서는 '부드러움'을 사용합니다. CSS를 통해 테마를 추가합니다.

jQuery UI CSS

https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css

함께 모아서

CDN을 다운로드하거나 선택했으면 웹 페이지에서 이제 jQuery 및 jQuery UI를 사용할 수 있도록 이러한 라이브러리 및 스타일 시트를 HTML에 추가해야합니다. 라이브러리를로드하는 순서가 중요합니다. 먼저 jQuery 라이브러리를 호출 한 다음 jQuery UI 라이브러리를 호출하십시오. jQuery UI는 jQuery를 확장하므로 이후에 호출해야합니다. HTML은 다음과 같이 보일 수 있습니다.

<html>
<head>
  <title>My First UI</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );
  </script>
</head>
<body>
 
<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
  <li class="ui-state-default">Item 6</li>
  <li class="ui-state-default">Item 7</li>
</ul>
 
</body>
</html>