01 제이쿼리 UI
유저인터페이스 인터렉션, 효과, 위젯, 테마생성 을 모아놓은 제이쿼리 라이브러리 공식사이트
02 시작
https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css
02-1 select.js
var airports = [
{ value : "RKPC", label: "제주국제공항, 제주특별자치도 제주시 , CJU" },
{ value : "RKSI", label: "인천국제공항, 인천광역시 중구, SEL" },
{ value : "RKSS", label: "김포국제공항, 서울특별시 강서구, SEL" },
{ value : "RKTN", label: "대구국제공항, 대구광역시 동구, TAE" },
{ value : "RKTU", label: "청주국제공항,충청북도 청주시, CJJ" },
{ value : "MDW", label: "무안국제공항, 전라남도 무안군, MWX" },
{ value : "RKJB", label: "John F. Kennedy International Airport, New York, MWX" },
{ value : "LGA", label: "La Guardia Airport, New York, NY" },
{ value : "IAD", label: "Washington Dulles International Airport, Washington, DC" },
{ value : "CDG", label: "Charles De Gaulle International Airport, Paris, France" },
{ value : "CGH", label: "Congonhas International Airport, Sao Paulo, Brazil" },
{ value : "CGK", label: "Soekarno-Hatta International Airport, Jakarta, Indonesia" },
{ value : "LHR", label: "London Heathrow Airport, London, United Kingdom" },
{ value : "FRA", label: "Frankfurt International Airport, Frankfurt, Germany" },
{ value : "HND", label: "Tokyo International Airport, Tokyo, Japan" },
];
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery UI Selectmenu</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="select.js"></script>
<script src="ui.js"></script>
</head>
<body>
<div class="content">
<div class="main">
<h1>망고항공 : 항공편 예약</h1>
<form>
<div>
<label for="departure" class="label">탑승일</label>
<input type="text" id="departure" name="departure" autocomplete="off" />
</div>
<div>
<label for="airport" class="label">공항</label>
<input type="text" id="airport" name="airport" />
</div>
<div>
<label for="meal" class="label">기내식</label>
<select name="meal" id="meal">
<option>선택안함</option>
<option>비건</option>
<option>글루텐프리</option>
<option>베지테리언</option>
<option>육류</option>
</select>
</div>
<div id="bags">
<p class="label">수화물 수량</p>
<input type="radio" id="none" name="bags" checked="checked" />
<label for="none">0</label>
<input type="radio" id="one" name="bags" />
<label for="one">1</label>
<input type="radio" id="two" name="bags" />
<label for="two">2</label>
</div>
<div id="seatTypes">
<p class="label">좌석</p>
<input type="checkbox" id="aisle" name="aisle" /><!-- 아일 -->
<label for="aisle">통로</label>
<input type="checkbox" id="window" name="window" />
<label for="window">창가</label>
<input type="checkbox" id="exit" name="exit" />
<label for="exit">비상구 좌석</label>
<input type="checkbox" id="any" name="any" />
<label for="any">선택안함</label>
</div>
<div>
<button id="next">다음 단계로 진행해 주세요</button>
</div>
</form>
</div>
</div>
<button id="telmeLink">대화상자열기</button>
<div id="telme" title="전화주세요!">
<p title="제이름은 멍멍멍">안녕하세요!!!</p>
<img src="https://placedog.net/500" alt="d" />
</div>
</body>
</html>