[javascript] jQuery UI를 활용한 사용자 인터페이스 구현 방법

01 Dec 2023

javascript

jQuery UI는 HTML, CSS 및 JavaScript를 사용하여 다양한 사용자 인터페이스 요소를 구현하는 데 도움이 되는 라이브러리입니다. 이를테면 드래그 앤 드롭, 정렬 가능한 목록, 대화 상자 등을 손쉽게 만들 수 있습니다. 이 글에서는 jQuery UI를 사용하여 간단한 예제를 구현하는 방법에 대해 알아보겠습니다.

1. jQuery UI 라이브러리 추가하기

먼저, jQuery UI 라이브러리를 웹 페이지에 추가해야 합니다. 다음과 같은 코드를 사용하여 jQuery UI CDN에서 라이브러리를 가져올 수 있습니다:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">

위의 코드를 <head> 태그 안에 추가하면 됩니다.

2. 드래그 앤 드롭 구현하기

다음으로, 드래그 앤 드롭 기능을 구현해보겠습니다. 예를 들어, 드래그 앤 드롭으로 정렬 가능한 목록을 만들어보겠습니다.

<ul id="sortable">
  <li class="ui-state-default">아이템 1</li>
  <li class="ui-state-default">아이템 2</li>
  <li class="ui-state-default">아이템 3</li>
  <li class="ui-state-default">아이템 4</li>
  <li class="ui-state-default">아이템 5</li>
</ul>

위의 코드는 <ul> 요소 안에 정렬 가능한 목록을 생성하는 방법입니다. 이제 JavaScript 코드를 추가하여 드래그 앤 드롭 기능을 활성화합니다.

$(function() {
  $("#sortable").sortable();
  $("#sortable").disableSelection();
});

위의 코드는 $("#sortable").sortable() 함수를 사용하여 드래그 앤 드롭 기능을 활성화하고, $("#sortable").disableSelection() 함수를 사용하여 텍스트 선택 기능을 비활성화합니다.

3. 대화 상자 구현하기

이번에는 jQuery UI를 사용하여 대화 상자를 구현해보겠습니다. 대화 상자는 사용자에게 정보를 제공하거나 특정 작업을 수행할 수 있는 창 형태의 인터페이스입니다.

<div id="dialog" title="알림">
  <p>대화 상자 예제입니다.</p>
</div>
<button id="open-dialog">대화 상자 열기</button>

위의 코드는 대화 상자를 생성하는 방법입니다. 대화 상자는 <div> 요소로 생성되며, id 속성을 통해 대상 요소를 지정할 수 있습니다. 버튼을 클릭하여 대화 상자를 열 수도 있습니다.

$(function() {
  $("#dialog").dialog({
    autoOpen: false,
    modal: true,
    buttons: {
      "확인": function() {
        $(this).dialog("close");
      }
    }
  });
  
  $("#open-dialog").click(function() {
    $("#dialog").dialog("open");
  });
});

위의 코드는 $("#dialog").dialog() 함수를 사용하여 대화 상자를 초기화하고, autoOpen: false 속성을 설정하여 페이지 로딩 시 자동으로 열리지 않도록 합니다. 버튼 클릭 시 대화 상자를 열기 위해 $("#open-dialog").click() 함수를 사용합니다.

마치며

이제 jQuery UI를 활용하여 사용자 인터페이스 요소를 구현하는 방법을 알아보았습니다. 위에서 소개한 기능들을 참고하여 다양한 사용자 경험을 제공하는 웹 페이지를 구현해보세요.

자세한 내용과 다른 jQuery UI 기능들은 jQuery UI 공식 문서를 확인해보세요.