jQuery 시작 자습서(20): jQuery UI 기본 작업 프로세스

이 편에서는 JQuery UI 구성 요소의 기본 작업 과정을 소개하고, 프로세스 막대(Progressbar)의 예를 들어 JQuery UI 구성 요소 작업의 기본 과정을 소개한다.
초기화
대부분의 JQuery Ui 구성 요소는 그 상태를 유지할 수 있기 때문에 UI 구성 요소의 상태를 추적할 수 있도록 jQuery UI 구성 요소에도 하나의 생명 주기가 있다. 이 생명 주기는 초기화부터 시작하고 하나의 UI 구성 요소를 초기화하기 위해 일반적으로 어떤 HTML 요소에서 UI 구성 요소(플러그인) 방법을 호출한다.예컨대1 $(  "#elem"   ).progressbar();
이 방법은 id=elem의 요소를 초기화합니다.progressbar를 호출할 때 파라미터가 없기 때문에 부족한 속성을 사용하여 프로세스를 초기화합니다.구성을 가져오는 방법으로 jQuery UI 구성 요소의 기본값을 수정할 수 있습니다.예를 들면 다음과 같습니다.1 $(  "#elem"   ).progressbar({ value: 20 });
또한 한 번에 여러 개의 매개 변수를 입력하여 jQuery UI 구성 요소를 초기화할 수 있으며, 다른 설정되지 않은 속성은 기본값을 사용합니다.이러한 속성은 jQuery UI 구성 요소 상태의 일부이기도 합니다.초기화 후 이 속성을 수정할 필요가 있으면 옵션 방법을 통해 변경할 수 있습니다.
메서드
jQuery UI 구성 요소를 초기화한 후에 우리는 UI 구성 요소의 상태 속성을 조회할 수 있습니다. 초기화된 UI 구성 요소마다 그 방법을 호출할 수 있습니다. 호출 방법은 방법 이름을 전송하는 것입니다. 예를 들어 프로세스 막대의value 호출 방법은 다음과 같습니다.1 $(  "#elem"   ).progressbar(  "value"   );
만약 이 방법에 매개 변수가 있다면, 방법명 다음에 매개 변수를 직접 입력합니다. 예를 들어value값을 40으로 설정합니다.1 $(  "#elem"   ).progressbar(  "value" , 40 );
앞에서 설명한 jQuery 메소드 체인과 마찬가지로 jQuery UI 메소드도 다음과 같은 여러 메소드 연결을 지원합니다.1 $(  "#elem"   ) 2     .progressbar(  "value" , 90 ) 3     .addClass(  "almost-done"   );
통용 방법
대부분의 jQuery UI 구성 요소에 대해 지원되는 방법이 있습니다. 예를 들어 다음과 같습니다. 옵션 방법은 앞에서 말한 바와 같이 UI 구성 요소가 초기화된 후에 속성 값을 수정해야 한다면 옵션 방법을 사용할 수 있습니다. 예를 들어progressbar의value 값을 수정할 수 있습니다.1 $(  "#elem"   ).progressbar(  "option" ,  "value" , 30 );
이것은 앞에서 사용한value 방법과 다르다는 것을 주의하십시오. 이 예는 설정 항목value를 30으로 수정하려고 합니다.구성 항목의 값을 가져오려면 다음과 같이 매개 변수가 없는 호출을 사용합니다.1 $(  "#elem"   ).progressbar(  "option" ,  "value"   );
또한 한 번에 여러 구성 항목을 수정해야 하는 경우 다음과 같은 방법으로 객체를 가져올 수 있습니다.1 $(  "#elem"   ).progressbar(  "option" , { 2      value: 100, 3      disabled:  true 4    });
diable 메서드 이 메서드는 다음과 같은 UI 구성 요소를 disable 합니다.1 $(  "#elem"   ).progressbar(  "disable"   );
이 메서드는 프로세스 막대를 disable 하고 Style을 수정하여 유효하지 않게 만듭니다.이 방법은 설정된 disable 속성이true인 것과 같습니다.
enable 메서드 enable UI 구성 요소(예:1 $(  "#elem"   ).progressbar(  "enable"   );
이 방법은 disable 속성을false로 설정하는 것과 같습니다.
Destroy 방법 UI 구성 요소가 필요하지 않으면 Destroy () 방법을 호출하면 대응하는 HTML 요소를 원상태로 복원할 수 있습니다. (jQuery 이전의 태그를 사용하지 않았습니다.)또한 jQuery UI의 라이프 사이클을 종료합니다.UI 구성 요소를 종료하면 UI 구성 요소 방법을 더 이상 호출할 수 없습니다.HTML 요소를 삭제하면 jQuery가 자동으로 종료됩니다.
widget 방법
일부 UI 구성 요소는 wrapper 요소나 원래 요소와 관련이 없는 새 요소를 만듭니다.이 경우,widget 방법은 생성된 새로운 요소를 되돌려줍니다.Progressbar에서 생성된 HTML 요소가 없습니다. 이 방법은 원래의 HTML 요소를 되돌려줍니다.1 $(  "#elem"   ).progressbar(  "widget"   );
이벤트
모든 UI 구성 요소에는 상태가 변경되었음을 알리는 이벤트가 있습니다.대부분의 UI 구성 요소의 경우 이벤트가 발생할 때 이벤트 이름은 UI 구성 요소 이름이 접두어로 지정됩니다.예를 들어 Progressbar 값이 변경되면 이벤트 처리 방법을 바인딩합니다.1 $(  "#elem"   ).bind(  "progressbarchange" ,  function () { 2      alert(  "The value has changed!"   ); 3    });
모든 이벤트는 대응하는 리셋 함수를 가지고 있으며 하나의 설정 항목으로 정의되어 있기 때문에 우리는 Progressbar의change 리셋 함수에 직접 걸어서 Progressbarchange 이벤트에 귀속되지 않도록 할 수 있다. 예를 들어 다음과 같다.1 $(  "#elem"   ).progressbar({ 2      change:  function () { 3        alert(  "The value has changed!"   ); 4      } 5    });
공유 이벤트
UI 구성 요소마다 지원하는 이벤트는 다르지만,create 이벤트는 UI 구성 요소마다 지원되며, 이 이벤트는 UI 구성 요소가 만들어진 후 바로 터치됩니다.