jQuery UI (1)

jQuery UI 플러그인 기본 설정

http://jqueryui.com/demos/

jQuery UI Plugin 내부는 아래와 같이 네 가지 부류를 형성합니다.

  1. 상호작용
  2. 위젯
  3. 유틸리티
  4. 효과


jQuery UI 플러그인의 기본 사용 방법

★ jQuery UI Test page

							$(document).ready(function(){
								$("#open_button").click(function () {
									$("#dialog").dialog('open');
								});
								$("#dialog").dialog({
									autoOpen: false,
									buttons: {
										submit: function () {
											var eventName = $("#event_name").val();
											var eventDate = $("#event_date").val();

											// 출력
											$("
").html(eventName+' : '+eventDate).appendTo("#output"); $("#event_name").val(''); $("#event_date").val(''); $("#dialog").dialog('close'); }, reset: function () { $("#event_name").val(''); $("#event_date").val(''); }, cancel: function () { $("#event_name").val(''); $("#event_date").val(''); $("#dialog").dialog('close'); } }, modal: true }); $("#event_date").datepicker({ dateFormat: 'yy년 mm월 dd일', numberOfMonths: 3, //buttonImage: "images/event/icon/calendar.gif", //buttonImageOnly: true, //dateFormat: "yy-mm-dd", showMonthAfterYear: true, yearSuffix: "년", monthNames:["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"], dayNamesMin:["월","화","수","목","금","토","일"] }); });
Hello JQuery UI..


jQuery UI Dialog 플러그인의 옵션

jQuery UI Dialog 플러그인의 옵션
옵션 속성 이름 자료형 설명
autoOpen Boolean 자동으로 실행할지를 지정합니다.
buttons Object 다이얼로그에 생성할 버튼과 이벤트 핸들러를 지정합니다.
modal Boolean 모달 다이얼로그의 형태로 생성할지를 지정합니다.


jQuery UI Dialog 플러그인의 메서드

jQuery UI Dialog 플러그인의 메서드
메서드 이름 설명
destory 다이얼로그를 파괴합니다.
disable 다이얼로그를 사용 불가능하게 만듭니다.
enable 다이얼로그를 사용 가능하게 만듭니다.
close 다이얼로그를 닫습니다.
isOpen 다이얼로그가 열려 있는지 확인합니다.
open 다이얼로그를 실행합니다.


jQuery UI Datepicker 플러그인의 옵션

jQuery UI Datepicker 플러그인의 옵션
옵션 속성 이름 자료형 설명
dateFormat String 날짜 출력 형식을 지정합니다.
numberOfMonths Number 달력에 표시할 개월 수를 지정합니다.