jquery - UI

첫번째

ui 위젯 - datepicker();

 

날짜 : <input type="text" id="date1">

$(function(){
$("#date1").datepicker();

});

 

$(document).ready(function(){}):

==> 간단하게 $(function(){}); 바꿀 수 있습니다.

 

두번째

ui위젯 - tabs

$(function(){

$("#tabs").tabs();

});

<div id="tabs">
<ul>
<li><a href="#tabs-1">주문</a></li>
<li><a href="#tabs-2">사이즈</a></li>
<li><a href="#tabs-3">토핑</a></li>
<li><a href="#tabs-4">배달시간</a></li>
</ul>

<div id="tabs-1">
  주문페이지
  <p><label>아이디 :</label><input type="text" value="<%=sid%>"></p>
  <p><label>전화번호 :</label><input type="tel" name="phone"></p>
  <p><label>e-mail :</label><input type="email" name="e-mail"></p>
  <p><label>주소 :</label><input type="text" name="address"></p>
  </div>
  <div id="tabs-2">
  <fieldset>
   <legend>피자 사이즈</legend>
   <p><label><input type="radio" name="size" value="small"></label>small</p>
   <p><label><input type="radio" name="size" value="medium"></label>medium</p>
   <p><label><input type="radio" name="size" value="large"></label>large</p>
  </fieldset>
  </div>
  <div id="tabs-3">
  <fieldset>
   <legend>토핑선택</legend>
   <p><a href="#">인기 토핑</a></p>
   <p><input type="checkbox" name="topping" value="bacon">베이컨</p>
   <p><input type="checkbox" name="topping" value="cheese">치즈</p>
   <p><input type="checkbox" name="topping" value="onion">양파</p>
   <p><input type="checkbox" name="topping" value="mushroom">버섯</p>
  </fieldset>
  </div>
  <div id="tabs-4">
  <p><label>희망 배송 시간:</label>
   <input type="text" id="date">
   <input type="time" min="10:00" step="600">
  </p>
  <p><input type="button" value="주문하기"></p>
  </div>
 </div>