Latest web development tutorials

위젯 라이브러리 확장을 통해 jQuery를 UI 위젯

jQuery를 UI 위젯 라이브러리 (위젯 공장) 이러한 위젯은 위젯 기존의 기능을 확장 쉽게 위젯을 생성 할 수있다. 기존 강력한 위젯에 기초하여 생성 할 수 있습니다이 방법은 또한 기존의 위젯 기능에 대한 미세 조정을 할 수 있습니다.

참고 :이 장을 공부하기 전에, 당신은 위젯 라이브러리 (위젯 공장), 그리고 어떻게 그것이 작동하는 것을 이해할 필요가있다. 이 지식에 익숙하지 않은 경우, 그래서하시기 바랍니다 부품 라이브러리 (위젯 공장) 사용하는 방법 절을 참조하십시오.

위젯 확장 만들기

를 통해 위젯 라이브러리 (위젯 공장)에 의해 위젯 만들기 $.widget() 위젯 완료하는 프로토 타입 객체의 이름을 전달됩니다. 다음 예는 "사용자 정의"네임 스페이스에 "superDialog"위젯을 만드는 것입니다. 

$.widget( "custom.superDialog", {} );

확장을 지원하기 위해, $.widget() 선택 사항 부모 위젯 생성자를 사용하는 구성원으로 받아 들였다. 이 위젯 프로토 타입 객체의 앞, 뒷면에 두 번째 인수, 위젯 이름으로 전달 될 때 부모 멤버를 지정하는 경우.

위의 예처럼, 다음은 또한 "사용자 정의"네임 스페이스에 "superDialog"위젯을 만들어야합니다. 하지만이 전송은 jQuery를 UI의 대화 (대화) 위젯 생성자 ( $.ui.dialog ), 부모의 구성원으로 jQuery를 UI의 대화 (대화) 위젯을 사용한다 superDialog 위젯을 나타냅니다. 

$.widget( "custom.superDialog", $.ui.dialog, {} );

여기에, superDialog이와 대화 위젯은 단지 다른 이름과 네임 스페이스, 본질적으로 동일합니다. 우리의 새로운 위젯 더 많은 기능을 위해서는 우리의 프로토 타입 객체에 대한 몇 가지 방법을 추가 할 수 있습니다.

위젯 프로토 타입 객체가 전달됩니다 $.widget() 마지막 인수. 지금까지, 우리의 예는 널 (null) 개체를 사용합니다. 이제 객체에 메소드를 추가 할 수 있습니다 : 

$.widget( "custom.superDialog", $.ui.dialog, {
    red: function() {
        this.element.css( "color", "red" );
    }
});
 
// Create a new <div>, convert it into a superDialog, and call the red() method.
$( "<div>I am red</div>" )
    .superDialog()
    .superDialog( "red" );

지금 superDialog 이 red() 의 텍스트 색상을 빨간색으로 변경됩니다 방법을. 회원 라이브러리 (위젯 공장)이 자동으로 설정하는 방법이므로주의 해주십시오 this 위젯 인스턴스 개체로. 인스턴스에서 사용할 수있는 모든 프로퍼티와 메소드의 목록은 방문 회원 라이브러리 (위젯 공장) API 설명서를 .

기존의 방법을 확장

때로는 기존 구성 요소의 동작을 조정하거나 방법을 추가해야합니다. 당신은 개체를 다시로드 할 필요가 프로토 타입에 메소드의 메소드 이름의 이름을 지정할 수 있습니다. 다음 예제의 대화 (대화) 우선 open() 메서드를 . 대화 상자가 기본적으로 활성화되어 있기 때문에이 코드를 실행하면, "open" 가 기록됩니다. 

$.widget( "custom.superDialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
    }
});
 
// Create a new <div>, and convert it into a superDialog.
$( "<div>" ).superDialog();

이 코드를 실행하면 문제가있는 것입니다. 우리는 오버로드 없기 때문에 open() 기본 동작을, 그래서 대화 (대화)는 더 이상 화면에 표시됩니다.

우리는 프로토 타입 객체를 사용하는 경우는, 실제로 원형 고리의 새로운 방법을 이용하여 원래의 방법에 중첩된다.

- 조립 방법을 사용할 수 있습니다 부모 위해서는, 회원 라이브러리 (위젯 공장) 두 가지 방법을 제공합니다 _super() 및 _superApply() .

사용 _super() 및 _superApply() 상위 구성원에 액세스 할 수

_super() 및 _superApply() 부모 컴포넌트와 동일한 방식으로 부른다. 다음 예를 고려하십시오. 오버로드 마지막 인스턴스와 같은 open() 기록하는 방법 "open" . 그러나,이 실행 _super() 의 대화 (대화)라고 open() , 및 열기 대화 상자. 

$.widget( "custom.superDialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
 
        // Invoke the parent widget's open().
        return this._super();
    }
});
 
$( "<div>" ).superDialog();

_super() 및 _superApply() 원본과 거의 동일하다 Function.prototype.call() 및 Function.prototype.apply() 방법. 따라서, _super() 매개 변수의 목록을 받아, _superApply() 매개 변수로 배열을 받아들입니다. 다음의 예는 둘 사이에 서로 다른 보여줍니다. 

$.widget( "custom.superDialog", $.ui.dialog, {
    _setOption: function( key, value ) {
 
        // Both invoke dialog's setOption() method. _super() requires the arguments
        // be passed as an argument list, _superApply() as a single array.
        this._super( key, value );
        this._superApply( arguments );
    }
});

위젯을 다시 정의

jQuery를 UI 1.9은 위젯 기능을 재정의했다. 따라서, 새로운 위젯을 만들 수 없습니다, 우리는 단지 통과해야 $.widget() 그래서 기존의 위젯 이름과 생성자입니다. 에서 다음 예제 open() 같은 레코드를 추가,하지만 완료 할 수있는 새로운 위젯을 만들어합니다. 

$.widget( "ui.dialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
        return this._super();
    }
});
 
$( "<div>" ).dialog();

이 방법을 통해, 우리는 기존의 방법의 작은 부분을 확장 할 수 있습니다,하지만 당신은 여전히 사용할 수 있습니다 _super() 원래의 방법에 액세스 할 수 - 이러한 완료 할 수있는 새로운 위젯을 만들어 아니지만, 그 직접 위젯을 다시 정의된다 할 수 있습니다.

위젯 (위젯) 및 다형성 (다형성)

그들의 시간과 상호 작용하는 위젯 및 플러그 인 사이에 연장 할 때 플러그 부재 상위 방법 조립체 요소를 호출하는 데 사용될 수 있음은 주목할 만하다. 다음의 예는이 방법을 보여줍니다. 

$.widget( "custom.superDialog", $.ui.dialog, {} );
 
var dialog = $( "<div>" ).superDialog();
 
// This works.
dialog.superDialog( "close" );
 
// This doesn't.
dialog.dialog( "close" );

위의 예는, 플러그인의 상위 멤버는 dialog() , 당신은에 superDialog 요소를 호출 할 수 없습니다 close() 메서드를. 자세한 내용은 위젯 메소드를 호출 참조 위젯 (위젯) 메서드 호출을 .

사용자 정의의 예는 개인화

지금까지, 우리는 위젯 프로토 타입 확장 메서드의 인스턴스를 보았다. 프로토 타입에 오버로드 방법은 위젯의 모든 인스턴스에 영향을 미칩니다.

이 점을 설명하기 위하여 다음 예를 고려한다. 대화 상자 (대화) 두 힘은 동일한 사용하는 open() 메소드를. 

$.widget( "ui.dialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
        return this._super();
    }
});
 
// Create two dialogs, both use the same open(), therefore "open" is logged twice.
$( "<div>" ).dialog();
$( "<div>" ).dialog();

때때로, 당신은 위젯의 인스턴스의 동작을 변경해야합니다. 이렇게하려면, 일반 속성 지정 자바 스크립트를 사용하여 인스턴스에 대한 참조를 얻고,이 메소드를 오버라이드 (override) 할 필요가있다. 구체적인 예는 다음과 같습니다. 

var dialogInstance = $( "<div>" )
    .dialog()
    // Retrieve the dialog's instance and store it.
    .data( "ui-dialog" );
 
// Override the close() method for this dialog
dialogInstance.close = function() {
    console.log( "close" );
};
 
// Create a second dialog
$( "<div>" ).dialog();
 
// Select both dialogs and call close() on each of them.
// "close" will only be logged once.
$( ":data(ui-dialog)" ).dialog( "close" );

오버로드 기술 개인화 한 번 정의의 완벽한 예입니다.