jQuery UI Widgets via expansão biblioteca de widgets

jQuery UI biblioteca widget (Widget Factory) torna mais fácil para criar widgets, esses widgets estende a funcionalidade de widgets existentes. Desta forma, você pode criar com base dos widgets poderosas existentes, você também pode fazer ajustes finos na função Widget existente.

Nota: Antes de estudar este capítulo, você precisa entender o que é uma biblioteca de widget (Widget Factory), e como ele funciona. Se você não estiver familiarizado com este conhecimento, portanto, revise como usar biblioteca de peças (Widget Factory) seção.

Criar a extensão Widget

Criar um widget biblioteca widget (Widget Factory) até $.widget() é passado o nome do widget e um objeto de protótipo para ser concluído. O exemplo a seguir é criar um widget "superDialog" no namespace "custom".

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

Para apoiar a expansão, $.widget() Opcional aceito como membro de usar o construtor widget pai. Ao especificar um membro pai quando ele é passado como o segundo argumento, o nome do widget na parte de trás, na frente do objeto Widget de protótipo.

Como no exemplo acima, o seguinte também deve criar um widget "superDialog" no namespace "custom". Mas esta transferência é de diálogo (de diálogo) Widget da jQuery UI construtor ( $.ui.dialog ), representa Widget superDialog deve usar de diálogo widget (de diálogo) do jQuery UI como um membro pai.

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

Aqui, superDialog dois e widgets de diálogo são essencialmente equivalentes, apenas um nome diferente e namespace somente. Para que o nosso novo widget mais recursos, podemos adicionar alguns métodos ao seu objeto de protótipo.

objeto de protótipo Widget é passado para o $.widget() último argumento. Até agora, o nosso exemplo usa um objeto nulo. Agora vamos adicionar um método para o objeto:

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

Agora superDialog têm um red() método, que irá mudar a sua cor de texto vermelho. Por favor, note que as bibliotecas membros (Widget Factory) é como configurar automaticamente this como um objeto instância do widget. Para obter uma lista de todas as propriedades e métodos disponíveis no exemplo, visitar as bibliotecas membros (Widget Factory) documentação da API .

Estender os métodos existentes

Às vezes, você precisa ajustar o comportamento de um componente existente ou adicionar métodos. Você pode especificar o nome do nome do método do método no protótipo objeto precisa recarregar. O exemplo a seguir substitui diálogo (de diálogo) do open() método . Porque a caixa de diálogo é ativada por padrão, quando você executar este código, "open" será gravado.

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

Quando você executar este código, há um problema. Desde que nós sobrecarregado open() o comportamento padrão, de modo que o diálogo (de diálogo) não é mais exibida na tela.

Quando usamos o objeto de protótipo, estamos na verdade se sobrepõe ao método original, utilizando um novo método na cadeia de protótipos.

Para que o pai métodos de montagem estão disponíveis, biblioteca membro (Widget Factory) fornece dois métodos - _super() e _superApply() .

Use _super() e _superApply() para acessar o membro pai

_super() e _superApply() chama da mesma maneira como o componente principal. Considere os seguintes exemplos. Como última instância, que estão sobrecarregados open() método para gravar o "open" . No entanto, este prazo _super() é chamado de diálogo (de diálogo) do open() caixa de diálogo Abrir, e.

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

_super() e _superApply() é virtualmente idêntico ao original Function.prototype.call() e Function.prototype.apply() método. Portanto, _super() aceita uma lista de parâmetros, _superApply() aceita uma matriz como um parâmetro. O exemplo que se segue demonstra que diferente entre os dois.

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

redefinir Widget

jQuery UI 1.9 adicionou redefinir a função widget. Portanto, você não pode criar um novo widget, que só precisa passar $.widget() de modo que um nome do widget existente e construtor. Os exemplos a seguir no open() para adicionar o mesmo registro, mas não através da criação de um novo widget para ser concluído.

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

Através deste método, podemos estender uma pequena parte do método existente, mas você ainda pode usar _super() para acessar o método original - não são, criando um novo widget para completar, mas que é redefinir diretamente Widget pode.

Widgets (Widgets) e polimorfismo (polimorfismo)

Quando estendida entre widgets e plug-ins para interagir com o seu tempo, é de salientar que o membro de encaixe não pode ser usado para ligar o elemento método pai submontagem. O exemplo a seguir demonstra isso.

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

Exemplos do acima, o membro pai do plug-in, dialog() , você não pode chamar elementos superDialog no close() método. Para mais informações chamar o método widget, ver a chamada de método widget (Widget) .

Exemplos de personalizado

Até agora, vimos exemplos dos métodos de extensão Widget de protótipos. No protótipo método sobrecarregado afeta todas as instâncias do widget.

Para ilustrar este ponto, considere os seguintes exemplos. diálogo (de diálogo) as duas forças estão usando a mesma open() método.

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

Às vezes, você só precisa mudar o comportamento de uma instância do widget. Para fazer isso, você precisa usar uma atribuição atributo normal, JavaScript, obter uma referência para casos e substituir esse método. Como exemplos específicos apresentados abaixo.

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

Sobrecarregado personalização técnica é o exemplo perfeito de uma personalização de uma só vez.