[javascript] jQuery UI의 상호작용 가능한 위젯 사용 방법

01 Dec 2023

jQuery UI는 웹 개발자들이 다양한 상호작용 가능한 위젯을 사용할 수 있도록 도와주는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 손쉽게 드래그 앤 드롭, 리사이즈, 선택 등과 같은 다양한 기능을 웹 애플리케이션에 추가할 수 있습니다.

위젯의 다운로드 및 포함

jQuery UI를 사용하기 위해서는 먼저 해당 라이브러리를 다운로드하고 HTML 파일에 포함해야 합니다. 다음은 jQuery UI를 다운로드하고 포함하는 방법입니다.

jQuery UI를 다운로드합니다. jQuery UI 공식 웹사이트에서 최신 버전을 다운로드합니다.
다운로드한 파일 중에서 필요한 위젯에 해당하는 파일을 선택합니다. 예를 들어, 드래그 앤 드롭 기능을 사용하려면 jquery-ui-draggable.js 파일을 선택합니다.
HTML 파일에 jQuery와 jQuery UI의 스크립트 파일을 포함합니다. 다음은 예시입니다.

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

jQuery UI의 위젯을 사용하는 방법은 각 위젯마다 다소 다를 수 있습니다. 아래는 몇 가지 대표적인 위젯의 사용 방법을 소개합니다.

드래그 앤 드롭은 요소를 마우스로 클릭하여 이동시킬 수 있는 기능입니다. 드래그 앤 드롭을 적용하기 위해서는 다음과 같은 코드를 사용합니다.

$(function() {
  $("#draggable").draggable();
});

위 코드에서 #draggable는 드래그 앤 드롭을 적용할 요소의 ID입니다. 해당 요소를 마우스로 클릭하여 이동할 수 있게 됩니다.

리사이즈는 요소의 크기를 조절할 수 있는 기능입니다. 리사이즈를 적용하기 위해서는 다음과 같은 코드를 사용합니다.

$(function() {
  $("#resizable").resizable();
});

위 코드에서 #resizable는 리사이즈를 적용할 요소의 ID입니다. 해당 요소의 크기를 조절할 수 있게 됩니다.

선택은 요소를 마우스로 클릭하여 선택할 수 있는 기능입니다. 선택을 적용하기 위해서는 다음과 같은 코드를 사용합니다.

$(function() {
  $("#selectable").selectable();
});

위 코드에서 #selectable은 선택을 적용할 요소의 ID입니다. 해당 요소를 클릭하여 선택할 수 있게 됩니다.

이제 jQuery UI의 상호작용 가능한 위젯을 사용하는 방법을 알아보았습니다. 위젯을 사용하기 위해서는 먼저 jQuery UI를 다운로드하고 HTML 파일에 포함해야 합니다. 각 위젯마다 다음과 같이 코드를 작성하여 사용할 수 있습니다.

더 자세한 내용은 jQuery UI 공식 문서를 참조하시기 바랍니다.