jQuery UI 확장 위젯

jQuery UI의 위젯 팩토리를 사용하면 기존 위젯의 기능을 확장하는 위젯을 더 쉽게 만들 수 있습니다. 이러한 방식으로 기존 위젯을 기반으로 강력한 위젯을 만들 수 있으며, 기존 위젯의 기능을 미세하게 조정할 수도 있습니다.

참고: 이 장을 공부하기 전에 위젯 팩토리가 무엇인지, 어떻게 작동하는지 이해해야 합니다. 이 지식이 익숙하지 않은 경우 먼저 Widget Factory 사용 방법 장을 확인하시기 바랍니다.

위젯 확장 만들기

위젯 팩토리를 통해 위젯을 만드는 작업은 위젯 이름과 프로토타입 객체를 $.widget()에 전달하여 수행됩니다. 다음 예에서는 "custom" 네임스페이스에 "superDialog" 위젯을 만듭니다. $.widget() 传递小部件名称和一个原型对象来完成的。下面的实例是在 "custom" 命名空间中创建一个 "superDialog" 小部件。

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

为了支持扩展，$.widget() 可选性地接受作为父部件使用的小部件的构造函数。当指定一个父部件时，把它作为第二个参数进行传递，放在小部件名称后面，在小部件原型对象前面。

就像上面的实例，下面也要在 "custom" 命名空间中创建一个 "superDialog" 小部件。但是这次传递的是 jQuery UI 的 dialog（对话框）小部件 的构造函数（$.ui.dialog），表示 superDialog 小部件应该使用 jQuery UI 的 dialog（对话框）小部件作为父部件。

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

在这里，superDialog 和 dialog 两个小部件实质上是等价的，只是名称和命名空间不同而已。为了让我们新的小部件更具特点，我们可以添加一些方法到它的原型对象上。

小部件的原型对象是传递给 $.widget() 的最后一个参数。到目前为止，我们的实例使用的是一个空的对象。现在让我们给这个对象添加一个方法：

$.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() 方法，这会把它的文本颜色改为红色。请注意，部件库（Widget Factory）是如何自动设置 this 为小部件的实例对象。如需了解实例上所有可用的方法和属性列表，请访问 部件库（Widget Factory） API 文档。

扩展已有的方法

有时候，您需要调整或添加已有部件方法的行为。您可以把方法名称指定为原型对象上需要重载的方法名称。下面的实例重载了 dialog（对话框）的 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()

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

확장을 지원하기 위해 $.widget()은 선택적으로 상위 위젯으로 사용할 위젯의 생성자를 허용합니다. 상위 위젯을 지정할 때 위젯 이름 뒤, 위젯 프로토타입 객체 앞에 두 번째 인수로 전달하세요.

위의 예와 마찬가지로 "custom" 네임스페이스에 "superDialog" 위젯도 생성하겠습니다. 그러나 이번에 전달된 것은 jQuery UI의 대화 상자 위젯($.ui.dialog)의 생성자이며, 이는 superDialog 위젯이 jQuery UI의 대화 상자 위젯을 상위 위젯으로 사용해야 함을 나타냅니다. 🎜

$.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 );
    }
});

🎜여기서 superDialog와 대화 상자 두 위젯은 이름과 네임스페이스가 다르다는 점을 제외하면 본질적으로 동일합니다. 새 위젯을 더욱 독특하게 만들기 위해 프로토타입 객체에 몇 가지 메소드를 추가할 수 있습니다. 🎜🎜위젯의 프로토타입 개체는 $.widget()에 전달된 마지막 매개변수입니다. 지금까지 예제에서는 빈 개체를 사용했습니다. 이제 이 개체에 메서드를 추가해 보겠습니다. 🎜

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

🎜이제 superDialog에는 텍스트 색상을 빨간색으로 변경하는 red() 메서드가 있습니다. 위젯 팩토리가 자동으로 this를 위젯의 인스턴스로 설정하는 방법에 유의하세요. 인스턴스에서 사용할 수 있는 모든 메서드 및 속성 목록을 보려면 Widget Factory API 설명서를 참조하세요. 🎜🎜기존 메소드 확장🎜🎜때로는 기존 위젯 메소드의 동작을 조정하거나 추가해야 할 때가 있습니다. 프로토타입 객체에서 재정의해야 하는 메서드의 이름으로 메서드 이름을 지정할 수 있습니다. 다음 예제에서는 대화 상자의 open() 메서드를 오버로드합니다. 대화 상자는 기본적으로 열려 있으므로 이 코드가 실행되면 "open"이 기록됩니다. 🎜

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

🎜이 코드를 실행하면 문제가 발생합니다. open()의 기본 동작을 재정의했으므로 대화 상자가 더 이상 화면에 표시되지 않습니다. 🎜🎜프로토타입 객체에 메서드를 사용할 때 실제로는 원래 메서드를 오버로드하고 프로토타입 체인에서 새 메서드를 사용하는 것입니다. 🎜

상위 위젯 메소드를 사용할 수 있도록 하기 위해 위젯 팩토리(Widget Factory)에서는 _super() 및 _superApply() 두 가지 메소드를 제공합니다. _super() 和 _superApply()。

使用 _super() 和 _superApply() 来访问父部件

_super() 和 _superApply() 在父部件中调用了同样的方法。请看下面的实例。就像上一个实例，这个实例也重载了 open() 方法来记录 "open"。然而，这次运行 _super() 是调用了 dialog（对话框）的 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();

_super() 和 _superApply() 实际上等同于最初的 Function.prototype.call() 和 Function.prototype.apply() 方法。因此，_super() 接受一个参数列表，_superApply() 接受一个数组作为参数。下面的实例演示了这二者之间的不同。

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" );

重定义小部件

jQuery UI 1.9 添加了重定义小部件的功能。因此，可以不用创建一个新的小部件，我们只需要传递 $.widget() 这样一个已有的小部件名称和构造函数即可。下面的实例在 open() 中添加了相同的记录，但不是通过创建一个新的小部件来完成的。

rrreee

通过这个方法，我们可以扩展一个已有的小部件方法，但是仍然可以使用 _super() 来访问原始的方法 - 这些都不是通过创建一个新的小部件来完成的，而是直接重定义小部件即可。

小部件（Widgets）和多态性（Polymorphism）

当在小部件扩展及它们的插件之间进行交互时候，有一点值得注意，父部件的插件不能用来调用子部件元素上的方法。下面的实例演示了这一点。

rrreee

上面的实例中，父部件的插件，dialog()，不能调用 superDialog 元素上的 close() 方法。如需了解更多调用小部件方法的知识，请查看 小部件（Widget）方法调用。

定制个性化实例

目前为止，我们看到的实例都有在小部件原型上扩展的方法。在原型上重载的方法影响了小部件的所有实例。

为了演示这一点，请看下面的实例。dialog（对话框）的两个势力都使用了相同的 open()

_super() 및 _superApply()를 사용하여 상위 위젯에 액세스하세요.

_super() 및 _superApply () 상위 위젯에서도 동일한 메소드가 호출됩니다. 아래 예를 참조하세요. 이전 예제와 마찬가지로 이 예제에서도 "open"을 기록하기 위해 open() 메서드를 오버로드합니다. 그러나 이번에는 _super()를 실행하면 대화 상자의 open()이 호출되고 대화 상자가 열립니다.

rrreee

_super() 및 _superApply()는 실제로 원래 Function.prototype.call() 및 함수와 동일합니다. 프로토타입.apply() 메소드. 따라서 _super()는 매개변수 목록을 받아들이고 _superApply()는 배열을 매개변수로 받아들입니다. 다음 예에서는 둘 사이의 차이점을 보여줍니다.

rrreee

위젯 재정의

jQuery UI 1.9에는 위젯을 재정의하는 기능이 추가되었습니다. 따라서 새 위젯을 만드는 대신 $.widget()과 같은 기존 위젯 이름과 생성자만 전달하면 됩니다. 다음 예에서는 open()에 동일한 레코드를 추가하지만 새 위젯을 생성하여 추가하지는 않습니다.