jQuery UI에서 자주 쓰는 옵션 및 API

jQuery UI에서 자주 쓰는 옵션을 정리해 줄게!
각 위젯별로 자주 사용하는 옵션과 설명을 포함했어. 🚀

---

📌 1. datepicker (날짜 선택)

사용자가 날짜를 쉽게 선택할 수 있도록 달력 UI를 제공함. 📅

✅ 자주 쓰는 옵션

옵션	설명	예제
dateFormat	날짜 형식 지정 (yy/mm/dd, dd-mm-yy 등)	{ dateFormat: 'yy-mm-dd' }
minDate	선택 가능한 최소 날짜 설정	{ minDate: 0 } → 오늘 이후 선택 가능
maxDate	선택 가능한 최대 날짜 설정	{ maxDate: "+1M" } → 한 달 후까지만 선택 가능
changeMonth	월을 선택할 수 있는 드롭다운 표시	{ changeMonth: true }
changeYear	연도를 선택할 수 있는 드롭다운 표시	{ changeYear: true }
showButtonPanel	"오늘" 버튼 및 "닫기" 버튼 표시	{ showButtonPanel: true }
defaultDate	기본으로 선택될 날짜 지정	{ defaultDate: "-1w" } → 일주일 전으로 설정

🔹 예제 코드

$("#datepicker").datepicker({
    dateFormat: "yy/mm/dd",
    minDate: 0,
    maxDate: "+1M",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true
});

---

📌 2. dialog (팝업 창)

경고창, 알림창, 모달 창 같은 UI를 만들 때 사용.

✅ 자주 쓰는 옵션

옵션	설명	예제
autoOpen	자동으로 열릴지 여부 (false이면 수동으로 열어야 함)	{ autoOpen: false }
modal	모달(배경 어두워지고 팝업만 조작 가능) 여부	{ modal: true }
width	팝업 창의 너비	{ width: 500 }
height	팝업 창의 높이	{ height: 300 }
buttons	팝업 내부의 버튼 추가	{ buttons: { "닫기": function() { $(this).dialog("close"); } } }

🔹 예제 코드

$("#myDialog").dialog({
    autoOpen: false,
    modal: true,
    width: 500,
    height: 300,
    buttons: {
        "닫기": function() {
            $(this).dialog("close");
        }
    }
});

// 버튼 클릭 시 팝업 열기
$("#openDialog").click(function(){
    $("#myDialog").dialog("open");
});

🔹 HTML

<div id="myDialog" title="안내">
    <p>이것은 jQuery UI의 다이얼로그 팝업입니다.</p>
</div>
<button id="openDialog">팝업 열기</button>

---

📌 3. accordion (아코디언 메뉴)

FAQ(자주 묻는 질문) 같은 UI를 만들 때 사용. 📑

✅ 자주 쓰는 옵션

옵션	설명	예제
active	처음 열릴 패널 지정 (false면 모두 닫힘)	{ active: 1 } → 두 번째 패널 열림
collapsible	클릭하면 접거나 펼칠 수 있도록 설정	{ collapsible: true }
heightStyle	높이를 자동 조정 (content, fill, auto)	{ heightStyle: "content" }
animate	애니메이션 효과	{ animate: 200 } → 200ms 동안 애니메이션 실행

🔹 예제 코드

$("#faq").accordion({
    active: 0,
    collapsible: true,
    heightStyle: "content",
    animate: 200
});

🔹 HTML

<div id="faq">
    <h3>질문 1</h3>
    <div><p>답변 1 내용</p></div>
    <h3>질문 2</h3>
    <div><p>답변 2 내용</p></div>
</div>

---

📌 4. tabs (탭 메뉴)

여러 개의 탭을 만들 때 사용. 📌

✅ 자주 쓰는 옵션

옵션	설명	예제
active	처음 활성화될 탭 지정 (0부터 시작)	{ active: 1 } → 두 번째 탭 활성화
collapsible	탭을 클릭해서 닫을 수 있도록 설정	{ collapsible: true }
event	탭을 변경하는 이벤트 (click, mouseover 등)	{ event: "mouseover" }
heightStyle	높이 자동 조정 (auto, fill, content)	{ heightStyle: "content" }

🔹 예제 코드

$("#myTabs").tabs({
    active: 0,
    event: "click",
    heightStyle: "content"
});

🔹 HTML

<div id="myTabs">
    <ul>
        <li><a href="#tab1">탭 1</a></li>
        <li><a href="#tab2">탭 2</a></li>
    </ul>
    <div id="tab1"><p>탭 1 내용</p></div>
    <div id="tab2"><p>탭 2 내용</p></div>
</div>

---

📌 5. sortable (드래그 정렬)

리스트나 테이블의 순서를 마우스로 드래그해서 변경할 때 사용.

✅ 자주 쓰는 옵션

옵션	설명	예제
axis	가로(x) 또는 세로(y) 방향으로만 이동 제한	{ axis: "y" }
containment	이동 가능한 영역 제한	{ containment: "parent" }
cursor	마우스 커서 스타일	{ cursor: "move" }
handle	특정 요소를 드래그 핸들로 지정	{ handle: ".drag-handle" }

🔹 예제 코드

$("#sortableList").sortable({
    axis: "y",
    cursor: "move",
    containment: "parent"
});

🔹 HTML

<ul id="sortableList">
    <li>아이템 1</li>
    <li>아이템 2</li>
    <li>아이템 3</li>
</ul>

---

🚀 jQuery UI 자주 쓰는 옵션 요약

위젯	주요 옵션
datepicker	dateFormat, minDate, maxDate, changeMonth, changeYear, showButtonPanel
dialog	autoOpen, modal, width, height, buttons
accordion	active, collapsible, heightStyle, animate
tabs	active, collapsible, event, heightStyle
sortable	axis, containment, cursor, handle

jQuery UI를 처음 사용한다면 이 옵션들만 익혀도 웬만한 기능은 다 구현 가능해!
어떤 기능을 만들지 정하고, 적절한 옵션을 사용하면 돼! 😊 🚀

📌 jQuery UI 공식 사이트 (https://jqueryui.com/) 설명

jQuery UI는 웹에서 자주 사용하는 UI(사용자 인터페이스) 요소들을 쉽게 구현할 수 있도록 제공하는 라이브러리야.
이 사이트에서는 jQuery UI의 다양한 위젯, 애니메이션 효과, 인터랙션 기능을 제공하고 있어.

✅ jQuery UI 사이트에서 제공하는 주요 기능

1. Widgets (위젯) 🎛

   • datepicker → 날짜 선택기 (캘린더 UI)
   • dialog → 팝업 창
   • tabs → 탭 메뉴
   • accordion → 아코디언 메뉴

2. Interactions (상호작용 기능) 🖱

   • draggable → 요소를 마우스로 드래그 가능
   • sortable → 리스트 정렬 기능
   • resizable → 크기 조절 가능

3. Effects (애니메이션 효과) 🎨

   • show/hide → 요소 보이기/숨기기
   • fadeIn/fadeOut → 서서히 나타나고 사라지는 효과
   • slideDown/slideUp → 슬라이드 효과

4. Themes (테마 시스템) 🎨

   • 기본 테마 제공 (base, smoothness 등)
   • ThemeRoller 기능을 사용하여 커스텀 테마 제작 가능

✅ jQuery UI 공식 사이트의 주요 특징

• 각 기능별로 데모(예제)를 제공해서 직접 확인 가능
• 공식 API 문서(Reference)를 제공하여 코드 사용법을 쉽게 확인할 수 있음
• 무료로 사용 가능하며, 웹 개발에서 쉽게 적용할 수 있음

📌 jQuery UI는 개발자가 UI 기능을 빠르고 쉽게 추가할 수 있도록 돕는 라이브러리야! 🚀

---

---

📌 API란?

✅ API (Application Programming Interface) 정의

API는 개발자들이 특정 기능을 쉽게 사용할 수 있도록 제공된 설명서(문서)와 코드 모음이야.

쉽게 말해서 "이미 만들어진 기능을 가져다 쓰는 방법"을 문서화한 것이야.
API 문서를 보면, 어떤 기능을 어떻게 사용해야 하는지 확인할 수 있어.

✅ API의 주요 특징

1. 기능을 쉽게 가져다 쓸 수 있도록 제공됨
   • 개발자가 직접 복잡한 기능을 만들 필요 없이 API를 사용해서 해결 가능
2. 함수, 메서드, 클래스 등의 사용법이 정리된 설명서 포함
   • 개발자가 참고할 수 있도록 문서화됨 (예제 코드 포함)
3. 외부 프로그램과 상호작용 가능
   • API를 통해 데이터를 요청하고 응답받을 수 있음 (예: REST API, 라이브러리 API)

---

✅ API의 예시

1. jQuery UI API

$("#datepicker").datepicker();  // 달력 UI 적용

• datepicker()는 jQuery UI에서 제공하는 API 함수야.
• API 문서를 보면 어떤 옵션을 설정할 수 있는지 확인 가능.

2. Google Maps API

new google.maps.Map(document.getElementById("map"), { zoom: 10 });

• 구글 지도 API를 사용해서 웹에 지도를 추가하는 코드야.

3. REST API (웹 API)

fetch("https://api.example.com/users")
  .then(response => response.json())
  .then(data => console.log(data));

• 웹 API를 사용해서 서버에서 JSON 데이터를 가져오는 예제야.

📌 API는 이미 만들어진 기능을 쉽게 가져다 쓸 수 있도록 제공하는 설명서이자 코드 모음이야! 🚀