Latest web development tutorials

jQuery를 UI 위젯 라이브러리를 사용하는 방법

우리는 진행 표시 줄을 생성합니다. 호출하기 실시 예에 나타낸 바와 같이 jQuery.widget() 완료하기 위해, 두 개의 매개 변수 : 플러그인 이름이 생성 될 객체를 포함하는 텍스트가 플러그인을 지원하는 기능이다. 플러그가 호출 될 때, 새로운 플러그인 인스턴스를 생성하고, 모든 기능은 본 실시 예의 문맥에서 실행된다. 이 두 가지 중요한 방법으로 다른 표준 jQuery 플러그인. 우선, 콘텍스트 객체가 아니라 DOM 요소이다. 둘째, 컨텍스트는 항상 하나의 객체가 아닌 모음입니다. 

$.widget( "custom.progressbar", {
    _create: function() {
        var progress = this.options.value + "%";
        this.element
            .addClass( "progressbar" )
            .text( progress );
    }
});

플러그인 네임 스페이스의 이름을 포함해야합니다,이 예에서, 우리가 사용하는 custom 네임 스페이스를. 당신은 하나의 층 깊은 네임 스페이스를 만들 수 있습니다, 따라서 custom.progressbar 이름 효과적인 플러그인입니다 very.custom.progressbar 유효한 플러그인 이름입니다.

우리는 부품 라이브러리 (위젯 공장) 두 가지 속성을 우리에게 제공했다. this.element 하나의 요소를 포함하는 객체의 jQuery이다. 우리는 여러 요소를 포함하고있는 jQuery를 플러그인 객체를 호출 할 경우, 각 요소에 대해 별도의 플러그인 인스턴스를 생성되며, 각 인스턴스는 고유해야합니다 this.element . 두 번째 특성은, this.options , 플러그 - 인 옵션은 모든 키 이름 / 값 쌍 해시 (해시)를 포함한다. 다음과 같이이 옵션은 플러그인에 전달 될 수있다 : 

$( "<div></div>" )
    .appendTo( "body" )
    .progressbar({ value: 20 });

우리가 호출 할 때 jQuery.widget() , 제공함으로써 어느 jQuery.fn jQuery를 확장 할 수있는 기능을 추가 (표준 플러그인 시스템을 만드는 데 사용). 함수 이름은 패스에 따라 추가 jQuery.widget() "의 ProgressBar"- 네임 스페이스가없는 이름입니다. 플러그 통과 옵션 플러그인 인스턴스에 설정된 값을 얻을 수있다. 다음 예에서와 같이, 우리는 모든 옵션에 기본 값을 지정할 수 있습니다. 당신의 API를 설계 할 때, 당신은 당신의 플러그인의 가장 일반적으로 사용되는 알고 있어야합니다, 그래서 당신은 적절한 기본값을 설정하고 모든 옵션을 진정으로 선택하도록 할 수 있습니다. 

$.widget( "custom.progressbar", {
 
    // Default options.
    options: {
        value: 0
    },
    _create: function() {
        var progress = this.options.value + "%";
        this.element
            .addClass( "progressbar" )
            .text( progress );
    }
});

플러그인 메소드를 호출

이제 우리는 우리의 진행률 표시 줄을 초기화 할 수 있습니다, 우리는 플러그인 인스턴스에서 메서드를 호출하여 작업을 수행합니다. 플러그인 방식을 정의하려면, 우리는 우리가 통과 jQuery.widget() 함수 객체를 참조합니다. 우리는 또한 밑줄 접두사와 함수 이름을 "개인"방법을 정의 할 수 있습니다. 

$.widget( "custom.progressbar", {
 
    options: {
        value: 0
    },
 
    _create: function() {
        var progress = this.options.value + "%";
        this.element
            .addClass( "progressbar" )
            .text( progress );
    },
 
    // Create a public method.
    value: function( value ) {
 
        // No value passed, act as a getter.
        if ( value === undefined ) {
            return this.options.value;
        }
 
        // Value passed, act as a setter.
        this.options.value = this._constrain( value );
        var progress = this.options.value + "%";
        this.element.text( progress );
    },
 
    // Create a private method.
    _constrain: function( value ) {
        if ( value > 100 ) {
            value = 100;
        }
        if ( value < 0 ) {
            value = 0;
        }
        return value;
    }
});

플러그인 인스턴스의 메소드를 호출하려면 jQuery 플러그인에 메소드의 이름을 전달할 수 있습니다. 당신이 매개 변수를 허용하는 방법을 호출 할 경우, 당신은 단순히 이러한 매개 변수 뒤에 메소드 이름을 전달합니다.

참고 JQuery와 기능은 상기 방법을 수행하는 플러그인을 초기화하는 데 사용되는 동일한 방법 이름으로 전달된다. 이것은 사슬 메소드 호출을 유지하면서 JQuery와 공간 오염을 방지하기 위해 수행된다. 이후의 장에서, 우리는 다른 용도가 더 자연스럽게 볼 수 있습니다. 

var bar = $( "<div></div>" )
    .appendTo( "body" )
    .progressbar({ value: 20 });
 
// Get the current value.
alert( bar.progressbar( "value" ) );
 
// Update the value.
bar.progressbar( "value", 50 );
 
// Get the current value again.
alert( bar.progressbar( "value" ) );

옵션을 사용하여

option() 메소드는 자동으로 플러그에 제공된다. option() 메소드는 당신이 얻을 및 초기화 후 설정 옵션을 할 수 있습니다. jQuery의 하나의 방법 .css() 및 .attr() 메소드 : 인수가 사용하는 것 같이 만 이름을 전달할 수 있습니다, 당신은 또한 키 이름 / 값 쌍을 사용하거나 전달 세트 등의 이름과 값을 전달할 수 있습니다 여러 값을 설정하는 해시. 값으로 사용되는 경우, 플러그인이 전류 값에 대응하는 수신 옵션 이름을 반환한다. 세터로 사용되는 경우, 위젯 _setOption 각 옵션을 설정하기위한 메서드가 호출됩니다. 우리는 우리의 플러그인을 지정할 수 있습니다 _setOption 옵션 변경을 반영하는 방법. 작업이 독립적으로 수행 할 수 있도록, 우리가 오버라이드 (override) 할 수있는 옵션을 변경 _setOptions . 

$.widget( "custom.progressbar", {
    options: {
        value: 0
    },
    _create: function() {
        this.options.value = this._constrain(this.options.value);
        this.element.addClass( "progressbar" );
        this.refresh();
    },
    _setOption: function( key, value ) {
        if ( key === "value" ) {
            value = this._constrain( value );
        }
        this._super( key, value );
    },
    _setOptions: function( options ) {
        this._super( options );
        this.refresh();
    },
    refresh: function() {
        var progress = this.options.value + "%";
        this.element.text( progress );
    },
    _constrain: function( value ) {
        if ( value > 100 ) {
            value = 100;
        }
        if ( value < 0 ) {
            value = 0;
        }
        return value;
    }
});

콜백을 추가

간단한 확장 변경 플러그인 상태 발생시 사용자가 반응 할 수 있도록 콜백을 추가하는 것이다. 우리는 진행률 표시 줄이 100 %에 도달 할 때 진행률 표시 줄에 콜백을 추가하는 방법은 다음과 같은 예를 볼 수 있습니다. _trigger() 콜백의 이름, 콜백 jQuery를 이벤트 개체를 시작하고, 이벤트와 연관된 데이터의 해시 : 방법은 세 가지 인수를 사용합니다. 콜백 이름이 하나의 매개 변수를 요구하지만, 사용자 정의 플러그인의 사용자 기능을 구현하려는 것입니다, 다른 매개 변수는 매우 유용합니다. 우리가 드래그 플러그인을 작성하는 경우 사용자가 드래그의 x / y 좌표가 제공하는 객체에 따라 이벤트에 응답 할 수 있도록 콜백을 트리거 예를 들어, 우리는 MouseMove 이벤트 끌기 이벤트를 전달할 수 있습니다. 에 전달 유의하시기 바랍니다 _trigger() 대신 기본 브라우저 이벤트의 jQuery를 행사해야합니다 원래 이벤트의. 

$.widget( "custom.progressbar", {
    options: {
        value: 0
    },
    _create: function() {
        this.options.value = this._constrain(this.options.value);
        this.element.addClass( "progressbar" );
        this.refresh();
    },
    _setOption: function( key, value ) {
        if ( key === "value" ) {
            value = this._constrain( value );
        }
        this._super( key, value );
    },
    _setOptions: function( options ) {
        this._super( options );
        this.refresh();
    },
    refresh: function() {
        var progress = this.options.value + "%";
        this.element.text( progress );
        if ( this.options.value == 100 ) {
            this._trigger( "complete", null, { value: 100 } );
        }
    },
    _constrain: function( value ) {
        if ( value > 100 ) {
            value = 100;
        }
        if ( value < 0 ) {
            value = 0;
        }
        return value;
    }
});

본질적으로 콜백 함수 만 추가 옵션은 다른 옵션과 동일 얻고으로 설정할 수 있습니다. 콜백이있을 것입니다 때마다 해당 이벤트가 트리거됩니다. 이벤트 유형 이름 및 접속 플러그를 결정하는 콜백 함수의 이름이다. 이하의 실시 예에 도시 된 바와 같이, 특히, 이벤트 객체 및 이벤트와 연관된 데이터의 해시 : 이벤트 콜백은 동일한 두 개의 인자를 받아 들인다. 이렇게하기 위해, 사용자를 방지하기위한 플러그의 기능을 포함 할 수있는 최선의 방법은 콜백을 취소 할 수있다 사랑을 생성하는 것이다. 사용자 콜백 또는 네이티브와 관련된 이벤트가 그들과 함께 어떤 이벤트를 취소 취소 할 수 있습니다, 그들은 호출이다 event.preventDefault() 또는 반환 false 달성하기 위해. 당신이 콜백을 취소 할 경우, _trigger() 메서드는 반환 false , 그래서 당신은 플러그인에서 해당 기능을 달성 할 수 있습니다. 

var bar = $( "<div></div>" )
    .appendTo( "body" )
    .progressbar({
        complete: function( event, data ) {
            alert( "Callbacks are great!" );
        }
    })
    .bind( "progressbarcomplete", function( event, data ) {
        alert( "Events bubble and support many handlers for extreme flexibility." );
        alert( "The progress bar value is " + data.value );
    });
 
bar.progressbar( "option", "value", 100 );

자연

이제 우리는 플러그인을 만들 위젯 라이브러리 (위젯 공장)를 사용의이 실제로 어떻게 작동하는지 살펴 보자하는 방법을 보았다. 전화를 할 경우 jQuery.widget() ,이 플러그인에 대한 생성자 함수를 만들고 플러그인 인스턴스가 프로토 타입 객체로 전달됩니다 설정합니다. 위젯과 같이 정의 기본 위젯 프로토 타입에서 온다에 모든 기능은 자동으로 추가됩니다 jQuery.Widget.prototype . 당신이 플러그인 인스턴스가 사용됩니다 만들 때 jQuery.data 원래 DOM 요소에 저장합니다, 플러그인 이름 키 이름으로.

직접 DOM 요소에 연결된 플러그 인스턴스 때문에 직접 플러그인 방식을 통과 할 필요없이, 플러그 - 인스턴스를 액세스 할 수있다. 이 방법을 사용하면 문자열 메소드 이름을 통과 할 필요없이, 플러그인 인스턴스에서 직접 호출 할 수 있습니다, 당신은 또한 속성을 직접 연결에 액세스 할 수 있습니다. 

var bar = $( "<div></div>" )
    .appendTo( "body" )
    .progressbar()
    .data( "progressbar" );
 
// Call a method directly on the plugin instance.
bar.option( "value", 50 );
 
// Access properties on the plugin instance.
alert( bar.options.value );

또한, 탐색의 방법없이 플러그의 인스턴스를 생성 할 수 있으며, 옵션 생성자 원소를 직접 호출 : 

var bar = $.custom.progressbar( {}, $( "<div></div>" ).appendTo( "body") );
 
// Same result as before.
alert( bar.options.value );

프로토 타입의 확장

위젯 생성자와 프로토 타입의 가장 큰 장점은 쉽게 확장이다. 추가하거나 방법 플러그 프로토 타입을 수정하여, 우리는 모든 인스턴스의 위젯 동작을 수정할 수 있습니다. 우리는 0 % 진행에 다시 진행 표시 줄에 메서드를 추가 할 경우, 예를 들어, 우리는 모든 플러그인 인스턴스에서 호출 될 프로토 타입에이 방법을 추가 할 수 있습니다. 

$.custom.progressbar.prototype.reset = function() {
    this._setOption( "value", 0 );
};

자세한 내용과 방법을 기존의 위젯 자세한 내용에 새로운 위젯을 만드는 방법에 대한 확장 된 위젯의 경우, 참조 멤버 라이브러리로 확장 위젯 (위젯) (위젯 공장의) .

정리

일부의 경우, 응용 프로그램은 플러그인, 다음 응용 프로그램을 취소 할 수있는 사용자 수 있습니다. 당신은 할 수 있습니다 _destroy() 이 방법을 수행 할 수 있습니다. 에서 _destroy() 메소드 내에서, 당신은 초기화 및 사용 후 플러그 - 인 할 동안 모든 조치를 취소해야합니다. _destroy() 에 의해 .destroy() 메소드가 호출, .destroy() 는 가비지 컬렉션에 사용할 수 있도록 자동으로 호출 DOM 바인딩에서 요소를 제거 할 때 방법은 플러그인 인스턴스입니다. 기본 .destroy() 방법은 또한 일반적으로 이러한 위젯 인스턴스에서 DOM 요소를 제거하는 등 몇 가지 정리 작업, 처리하는 데 사용되는이 요소의 모든 이벤트는, 모든 결합 해제 사용, 결합 해제 위젯 네임 스페이스를 인용 _bind() 이벤트를 추가 할 수 있습니다. 

$.widget( "custom.progressbar", {
    options: {
        value: 0
    },
    _create: function() {
        this.options.value = this._constrain(this.options.value);
        this.element.addClass( "progressbar" );
        this.refresh();
    },
    _setOption: function( key, value ) {
        if ( key === "value" ) {
            value = this._constrain( value );
        }
        this._super( key, value );
    },
    _setOptions: function( options ) {
        this._super( options );
        this.refresh();
    },
    refresh: function() {
        var progress = this.options.value + "%";
        this.element.text( progress );
        if ( this.options.value == 100 ) {
            this._trigger( "complete", null, { value: 100 } );
        }
    },
    _constrain: function( value ) {
        if ( value > 100 ) {
            value = 100;
        }
        if ( value < 0 ) {
            value = 0;
        }
        return value;
    },
    _destroy: function() {
        this.element
            .removeClass( "progressbar" )
            .text( "" );
    }
});

닫기 노트

구성 요소 라이브러리 (위젯 공장) 플러그의 상태를 만들 수있는 방법입니다. 이 사용될 수있는 기타 다른 모델은, 각각 고유의 장점과 단점을 갖는다. 부품 라이브러리 (위젯 공장) 많은 일반적인 문제를 해결하고, 크게 효율을 향상시킬뿐만 아니라 매우 jQuery를 UI 플러그 - 인 다른 상태에 적합하게 코드의 재사용 성을 향상시킨다.

이 섹션에서 우리가 사용할 수 있습니다 custom 네임 스페이스를. ui 네임 스페이스는 공식 jQuery를 UI 플러그인을 예약되어 있습니다. 자신의 플러그인을 만들 때, 당신은 당신의 자신의 네임 스페이스를 만들어야합니다. 더 명확하게하는 등의 범위에 속하는 곳 플러그에서 그래서.