Latest web development tutorials

jQuery를 UI 작동

jQuery를 UI 따라서, 그것은 일반적인 jQuery 플러그인은 약간 다른 패턴을 사용하고, 상태 (위젯)을 유지하기 위해 많은 작은 부품이 포함되어 있습니다. 그것의 설치가 jQuery 플러그인 대부분의 설치와 유사하다, jQuery를 UI 위젯의 기반이 부품 라이브러리 (위젯 공장) 만든 위젯 라이브러리는 공통 API를 제공합니다. 그래서만큼 당신이 하나를 사용하는 방법에 대해 알아, 당신은 다른 위젯 (위젯)을 사용하는 방법을 알고있다. 이 튜토리얼 것이다 (진행 막대) 진행률 표시 줄 위젯 코드 예제는 일반적인 기능에 대해 설명합니다.

설치

컴포넌트의 상태를 추적하기 위해, 우리는 먼저 위젯의 전체 라이프 사이클을 소개한다. 위젯이 설치되면 수명주기가 시작됩니다. 우리는 단지 플러그인 하나 이상의 요소에 호출 할 필요, 즉 설치된 위젯입니다. 

$( "#elem" ).progressbar();

따라서,이 경우, jQuery 오브젝트의 "ELEM"로 요소 ID를 각 구성 요소를 초기화한다. 우리가 인수 없음의 전화 때문에 .progressbar() 메소드를 위젯 초기화에 따라 기본 옵션입니다. 즉 기본 옵션을 대체 할 수 있도록 우리는 설치시 옵션 세트를 전달할 수 있습니다. 

$( "#elem" ).progressbar({ value: 20 });

옵션 설치 수는 우리의 요구에 따라 많은 통과시켰다. 우리는 당신이 기본값을 사용하는 옵션을 전달하지 않았다.

옵션은 작은 회원국의 일부입니다, 그래서 우리는 또한 설치 후 옵션을 설정할 수 있습니다. 우리는 따를 것이다 option 방법의이 부분을 설명합니다.

방법

위젯이 초기화되어 있기 때문에, 우리는 그 상태를 쿼리, 또는 위젯에 대한 작업을 수행 할 수 있습니다. 모든 작업은 메소드 호출의 형태 초기화 후에 수행된다. 위젯의 메소드를 호출하기 위해, 우리는 jQuery 플러그인에 메소드의 이름을 전달할 수 있습니다. 예를 들어, 진행 바 (ProgressBar의) 위젯에 전화를 value 방법, 우리는 사용한다 : 

$( "#elem" ).progressbar( "value" );

이 방법은 매개 변수를 사용하는 경우, 우리는 메소드 이름 뒤에 매개 변수를 전달할 수 있습니다. 예를 들어, 매개 변수 전달 40 받는 value 방법을 우리가 사용할 수 있습니다 : 

$( "#elem" ).progressbar( "value", 40 );

다른 jQuery를 방법과 마찬가지로, 위젯의 대부분은 방법 jQuery 오브젝트를 반환 연결합니다. 

$( "#elem" )
    .progressbar( "value", 90 )
    .addClass( "almost-done" );

공공 방법

각 위젯 기능 기반의 접근 방식을 제공하는 위젯의 자신의 세트가 있습니다. 그러나, 모든 공통점이 방법은 위젯이되어 있습니다.

선택권

우리는 앞에서 언급 한 바와 같이, 우리는 초기화 후 수 option 선택 방법을 변경합니다. 예를 들어, 통화 가능 option 에있어서의 진행 막대 (진행 막대) (30)의 값을 변경한다. 

$( "#elem" ).progressbar( "option", "value", 30 );

우리가 호출하기 전에이는 양해 해 주시기 바랍니다 value 방법의 예는 다릅니다. 이 예에서는, 호출 option 에있어서, 30의 값을 변경할 수있는 옵션.

우리는 또한 옵션의 현재 값을 얻을 수 있습니다. 

$( "#elem" ).progressbar( "option", "value" );

또한, 우리는 줄 수있는 option 여러 옵션을 업데이트, 객체 메소드를 전달합니다. 

$( "#elem" ).progressbar( "option", {
    value: 100,
    disabled: true
});

당신은 눈치 챘을 수도 있습니다 option 방법으로는 jQuery 코드 값과 세터 같은 플래그가 .css() 및 .attr() . 유일한 차이점은 첫 번째 매개 변수로 문자열 "옵션"을 통과해야한다는 것입니다.

비활성화

disable 위젯을 사용하지 않도록 설정하는 방법을. 진행 표시 줄을 사용할 수 있도록 진행 바 (ProgressBar의) 경우에,이 스타일을 변경합니다. 

$( "#elem" ).progressbar( "disable" );

통화 disable 방법은 설정하는 것과 같습니다 disabled 옵션을 true .

가능

enable 방법은 disable 반대의 접근 방식. 

$( "#elem" ).progressbar( "enable" );

전화 enable 방법은 설정하는 것과 같습니다 disabled 옵션을 false .

파괴

더 이상 위젯을 필요하지 않은 경우, 당신은 그것을 파괴 원래의 표시로 돌아갈 수 있습니다. 이 위젯 라이프 사이클의 종료 것을 의미한다. 

$( "#elem" ).progressbar( "destroy" );

당신이 위젯을 파괴 한 후에는 위젯을 다시 초기화하지 않는 한, 당신은 구성 요소에 메서드를 호출 할 수 없습니다. 당신을 통해 직접 요소를 제거하려면 .remove() , 수도 .html() 또는 .empty() 조상을 수정할 수있는 위젯이 자동으로 소멸됩니다.

위젯

래퍼 요소 또는 원래의 요소에 연결 요소를 생성 일부 위젯이 끊어집니다. 다음 예에서, widget 복귀 요소 생성. 진행 표시 줄 (진행 막대)의 예에서, 래퍼를 생성하지 않습니다 widget 방법은 원래의 요소를 반환합니다. 

$( "#elem" ).progressbar( "widget" );

행사

이벤트의 모든 위젯은 상태 변화가 알려 때를 위해, 그들과 관련된 행동의 다양한 있습니다. 이벤트가 트리거 가장 작은 부분 들어, 접두어로 위젯 이름으로 이름입니다. 값의 변화가 발생하면, 예를 들어, 우리는 변경의 진행 바 () 이벤트를 결합 할 수있다. 

$( "#elem" ).bind( "progressbarchange", function() {
    alert( "The value has changed!" );
});

각 이벤트는 렌더링을위한 옵션으로 대응하는 보정을 가지고 있습니다. 우리는 진행률 표시 줄 (진행 막대)를 사용할 수있는 change 결합에 해당 콜백, progressbarchange 이벤트를. 

$( "#elem" ).progressbar({
    change: function() {
        alert( "The value has changed!" );
    }
});

공개 이벤트

대부분의 이벤트는 특정 위젯, 모든 위젯은 공통 가지고 있습니다 create 이벤트를. 위젯이 생성되면 이벤트가 트리거됩니다.