JqueryUI - Fábrica de Widget

Anteriormente, a única maneira de escrever controles personalizados em jQuery era estender o namespace $ .fn . Isso funciona bem para widgets simples. Suponha que você construa widgets com mais estado, isso rapidamente se torna complicado. Para ajudar no processo de construção de widgets, o Widget Factory foi introduzido na UI do jQuery, que remove a maior parte do clichê que normalmente está associado ao gerenciamento de um widget.

O jQueryUI Widget Factory é simplesmente uma função ($ .widget) que recebe um nome de string e um objeto como argumentos e cria um plugin jQuery e uma "Classe" para encapsular sua funcionalidade.

Sintaxe

A seguir está a sintaxe do método jQueryUI Widget Factory -

jQuery.widget( name [, base ], prototype )

name- É uma string contendo um namespace e o nome do widget (separado por um ponto) do widget a ser criado.

base- O widget base do qual herdar. Deve ser um construtor que pode ser instanciado com a palavra-chave `new`. O padrão é jQuery.Widget .

prototype- O objeto a ser usado como protótipo para o widget herdar. Por exemplo, jQuery UI tem um plugin de "mouse" no qual o resto dos plugins de interação são baseados. Para conseguir isso, arrastáveis, soltáveis, etc. , todos herdam do plugin do mouse da seguinte forma: jQuery.widget ("ui.draggable", $ .ui.mouse, {...}); Se você não fornecer esse argumento, o widget herdará diretamente do "widget base", jQuery.Widget (observe a diferença entre "w" jQuery.widget minúsculo e "W" jQuery.Widget maiúsculo).

Widget Base

O widget base é o widget usado pela fábrica de widgets.

Opções

A tabela a seguir lista as diferentes opções que podem ser usadas com o widget base -

Sr. Não. Opção e descrição
1 invisível

Esta opção desativa o widget se definida como verdadeira . Por padrão, seu valor éfalse.

Option - disabledhide

Esta opção desativa o widget se definida como verdadeira . Por padrão, seu valor éfalse.

Example

$( ".selector" ).widget({ disabled: true });
2 ocultar

Esta opção determina como animar a ocultação do elemento. Por padrão, seu valor énull.

Option - hide

Esta opção determina como animar a ocultação do elemento. Por padrão, seu valor énull.

Isso pode ser do tipo -

  • Boolean- Se definido como falso, nenhuma animação será usada. O elemento desaparecerá com a duração padrão e o easing padrão se definido como verdadeiro .

  • Number - O elemento desaparecerá com a duração especificada e o easing padrão.

  • String - O elemento será escondido usando o efeito especificado.

  • Object- Se o valor for um objeto, as propriedades de efeito, atraso, duração e atenuação podem ser fornecidas.

Example

$( ".selector" ).widget({ hide: { effect: "explode", duration: 1000 } });
3 exposição

Esta opção determina como animar a exibição do elemento. Por padrão, seu valor énull.

Option - show

Esta opção determina como animar a exibição do elemento. Por padrão, seu valor énull.

Isso pode ser do tipo -

  • Boolean- Se definido como falso, nenhuma animação será usada para mostrar o elemento. O elemento irá desaparecer com a duração padrão e o easing padrão se definido como verdadeiro .

  • Number - O elemento irá desaparecer com a duração especificada e o easing padrão.

  • String - O elemento será mostrado usando o efeito especificado.

  • Object- Se o valor for um objeto, as propriedades de efeito, atraso, duração e atenuação podem ser fornecidas.

Example

$( ".selector" ).widget({ show: { effect: "explode", duration: 1000 } });

Métodos

A tabela a seguir lista os diferentes métodos que podem ser usados ​​com o widget base -

Sr. Não. Ação e descrição
1 _crio()

Este método é o construtor do widget. Não há parâmetros, mas this.element e this.options já estão definidos.

Action - _create()

Esta ação destrói completamente a funcionalidade de acordeão de um elemento. Os elementos retornam ao seu estado pré-inicial. Este método é o construtor do widget. Não há parâmetros, mas this.element e this.options já estão definidos.

Example

_create: function() {
   this.element.css( "background-color", this.options.color );
}
2 _delay (fn [, delay])

Este método chama a função fornecida após um atraso especificado. Retorna o ID de tempo limite para uso com clearTimeout () .

Action - _delay( fn [, delay ] )

Este método chama a função fornecida após um atraso especificado. Retorna o ID de tempo limite para uso com clearTimeout () .

Example

this._delay( this._foo, 100 );
3 _destruir()

O método público destroy () limpa todos os dados comuns, eventos, etc. e, em seguida, delega a este método _destroy () para limpeza customizada específica do widget.

Action - _destroy()

O método público destroy () limpa todos os dados comuns, eventos, etc. e, em seguida, delega a este método _destroy () para limpeza customizada específica do widget.

Example

_destroy: function() {
   this.element.removeClass( "my-widget" );
}
4 _focusable (elemento)

Este método configura o elemento para aplicar a classe ui-state-focus no focus. Os manipuladores de eventos são limpos automaticamente na destruição.

Action - _focusable( element )

Este método configura o elemento para aplicar a classe ui-state-focus no focus. Os manipuladores de eventos são limpos automaticamente na destruição.

Example

_create: function() {
   this._focusable( this.element.find( ".my-items" ) );
}
5 _getCreateEventData ()

Todos os widgets acionam o evento de criação . Por padrão, nenhum dado é fornecido no evento, mas este método pode retornar um objeto que será passado como os dados do evento de criação.

Action - _getCreateEventData()

Todos os widgets acionam o evento de criação . Por padrão, nenhum dado é fornecido no evento, mas este método pode retornar um objeto que será passado como os dados do evento de criação.

Example

_getCreateEventData: function() {
   return this.options;
}
6 _getCreateOptions ()

Este método permite que o widget defina um método personalizado para definir opções durante a instanciação. As opções fornecidas pelo usuário substituem as opções retornadas por este método, que substituem as opções padrão.

Action - _getCreateOptions()

Este método permite que o widget defina um método personalizado para definir opções durante a instanciação. As opções fornecidas pelo usuário substituem as opções retornadas por este método, que substituem as opções padrão.

Example

_getCreateOptions: function() {
   return { id: this.element.attr( "id" ) };
}
7 _hide (elemento, opção [, retorno de chamada])

Este método oculta um elemento imediatamente, usando métodos de animação integrados ou usando efeitos personalizados. Veja a opção ocultar para valores de opção possíveis.

Action - _hide( element, option [, callback ] )

Este método oculta um elemento imediatamente, usando métodos de animação integrados ou usando efeitos personalizados. Veja a opção ocultar para valores de opção possíveis.

Example

this._hide( this.element, this.options.hide, function() {
   $( this ).remove();
});
8 _hoverable (elemento)

Este método configura o elemento para aplicar a classe ui-state-hover ao passar o mouse. Os manipuladores de eventos são limpos automaticamente na destruição.

Action - _hoverable( element )

Este método configura o elemento para aplicar a classe ui-state-hover ao passar o mouse. Os manipuladores de eventos são limpos automaticamente na destruição.

Example

this._hoverable( this.element.find( "div" ) );
9 _iniciar()

Sempre que o plugin é chamado sem argumentos ou com apenas um hash de opção, o widget é inicializado; isso inclui quando o widget é criado.

Action - _init()

Sempre que o plugin é chamado sem argumentos ou com apenas um hash de opção, o widget é inicializado; isso inclui quando o widget é criado.

Example

_init: function() {
   if ( this.options.autoOpen ) {
      this.open();
   }
}
10 _off (elemento, eventName)

Este método desassocia os manipuladores de eventos do (s) elemento (s) especificado (s).

Action - _off( element, eventName )

Este método desassocia os manipuladores de eventos do (s) elemento (s) especificado (s).

Example

this._off( this.element, "click" );
11 _on ([suppressDisabledCheck] [, elemento], manipuladores)

Vincula manipuladores de eventos ao (s) elemento (s) especificado (s). A delegação é suportada por seletores dentro dos nomes dos eventos, por exemplo, "click .foo".

Action - _on( [suppressDisabledCheck ] [, element ], handlers )

Vincula manipuladores de eventos ao (s) elemento (s) especificado (s). A delegação é suportada por seletores dentro dos nomes dos eventos, por exemplo, "click .foo".

Example

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
   }
});
12 _setOption (chave, valor)

Este método é chamado a partir do método _setOptions () para cada opção individual. O estado do widget deve ser atualizado com base nas alterações.

Action - _setOption( key, value )

Este método é chamado a partir do método _setOptions () para cada opção individual. O estado do widget deve ser atualizado com base nas alterações.

Example

_setOption: function( key, value ) {
   if ( key === "width" ) {
      this.element.width( value );
   }
   if ( key === "height" ) {
      this.element.height( value );
   }
   this._super( key, value );
}
13 _setOptions (opções)

Este método é chamado sempre que o método option () é chamado, independentemente da forma em que o método option () foi chamado.

Action - _setOptions( options )

Este método é chamado sempre que o método option () é chamado, independentemente da forma em que o método option () foi chamado.

Example

_setOptions: function( options ) {
   var that = this,
   resize = false;
   $.each( options, function( key, value ) {
      that._setOption( key, value );
      if ( key === "height" || key === "width" ) {
         resize = true;
      }
   });
   if ( resize ) {
      this.resize();
   }
}
14 _show (elemento, opção [, retorno de chamada])

Mostra um elemento imediatamente, usando métodos de animação integrados ou usando efeitos personalizados. Veja a opção show para valores de opção possíveis.

Action - _show( element, option [, callback ] )

Mostra um elemento imediatamente, usando métodos de animação integrados ou usando efeitos personalizados. Veja a opção show para valores de opção possíveis.

Example

_this._show( this.element, this.options.show, function() {
   // Focus the element when it's fully visible.
   this.focus();
}
15 _super ([arg] [, ...])

Este método invoca o método de mesmo nome do widget pai, com quaisquer argumentos especificados. Essencialmente .call ().

Action - _super( [arg ] [, ... ] )

Este método invoca o método de mesmo nome do widget pai, com quaisquer argumentos especificados. Essencialmente .call ().

Example

_setOption: function( key, value ) {
   if ( key === "title" ) {
      this.element.find( "h3" ).text( value );
   }
   this._super( key, value );
}
16 _superApply (argumentos)

Invoca o método de mesmo nome do widget pai, com a matriz de argumentos.

Action - _superApply( arguments )

Invoca o método de mesmo nome do widget pai, com a matriz de argumentos.

Example

_setOption: function( key, value ) {
   if ( key === "title" ) {
      this.element.find( "h3" ).text( value );
   }
   this._superApply( arguments );
}
17 _trigger (tipo [, evento] [, dados])

Este método dispara um evento e seu retorno de chamada associado. A opção com o nome igual ao tipo é chamada como retorno de chamada.

Action - _trigger( type [, event ] [, data ] )

Este método dispara um evento e seu retorno de chamada associado. A opção com o nome igual ao tipo é chamada como retorno de chamada.

Example

this._on( this.element, {
   keydown: function( event ) {
      // Pass the original event so that the custom search event has
      // useful information, such as keyCode
      this._trigger( "search", event, {
         // Pass additional information unique to this event
         value: this.element.val()
      });
   }
});
18 destruir()

Este método remove a funcionalidade do widget completamente. Isso retornará o elemento de volta ao seu estado pré-inicialização.

Action - destroy()

Este método remove a funcionalidade do widget completamente. Isso retornará o elemento de volta ao seu estado pré-inicialização.

Example

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
      this.destroy();
   }
});
19 desabilitar ()

Este método desativa o widget.

Action - disable()

Este método desativa o widget.

Example

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
      this.disable();
   }
});
20 habilitar()

Este método ativa o widget.

Action - enable()

Este método ativa o widget.

Example

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
      this.enable();
   }
});
21 opção (optionName)

Este método obtém o valor atualmente associado ao optionName especificado .

Action - option( optionName )

Este método obtém o valor atualmente associado ao optionName especificado .

Example

this.option( "width" );
22 opção()

Este método obtém um objeto contendo pares de chave / valor que representam o hash de opções do widget atual.

Action - option()

Este método obtém um objeto contendo pares de chave / valor que representam o hash de opções do widget atual.

Example

var options = this.option();
for ( var key in options ) {
   console.log( key, options[ key ] );
}
23 opção (optionName, valor)

Este método define o valor da opção do widget associada ao optionName especificado.

Action - option( optionName, value )

Este método define o valor da opção do widget associada ao optionName especificado.

Example

this.option( "width", 500 );
24 opção (opções)

Este método define uma ou mais opções para o widget.

Action - option( options )

Este método define uma ou mais opções para o widget.

Example

this.option({
   width: 500,
   height: 500
});
25 ferramenta()

Este método retorna um objeto jQuery contendo o elemento original ou outro elemento gerado relevante.

Action - widget()

Este método retorna um objeto jQuery contendo o elemento original ou outro elemento gerado relevante.

Example

_create: function() {
   this.widget().css( "border", "2px solid red" );
}

Eventos

Sr. Não. Método e descrição do evento
1 criar (evento, ui)

Este evento é acionado quando um widget é criado.

Event - create( event, ui )

Este evento é acionado quando um widget é criado. Onde o evento é do tipo Evento e ui é do tipo Objeto .

Syntax

$( ".selector" ).widget({
   create: function( event, ui ) {}
});

Ciclo de vida da fábrica de widgets jQueryUI

A fábrica de widgets jQueryUI fornece uma maneira orientada a objetos para gerenciar o ciclo de vida de um widget. Essas atividades do ciclo de vida incluem -

Criação e destruição de um widget: por exemplo,

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

Alterando opções de widget: por exemplo

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

Fazendo chamadas "super" em widgets de subclasse: por exemplo

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

Notificações de eventos: por exemplo

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

Exemplo

Agora vamos criar um widget customizado no exemplo a seguir. Vamos criar um widget de botão. Veremos como criar opções, métodos e eventos em um widget nos exemplos a seguir -

Criação de widget personalizado

Vamos primeiro criar um widget customizado simples.

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $.widget("iP.myButton", {
               _create: function() { 
                  this._button = $("<button>"); 
                  this._button.text("My first Widget Button");
                  this._button.width(this.options.width) 
                  this._button.css("background-color", this.options.color);    
                  this._button.css("position", "absolute");   
                  this._button.css("left", "100px");            
                  $(this.element).append(this._button);
               },
            });
            $("#button1").myButton();
         });
      </script>
   </head>
   
   <body>
      <div id = "button1"></div>
   </body>
</html>

Vamos salvar o código acima em um arquivo HTML widgetfactoryexample.htm e abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída -

Adicionando opções ao widget personalizado

No exemplo anterior, usamos a função _create para criar um controle personalizado. Mas os usuários geralmente desejam personalizar o controle definindo e modificando opções. Podemos definir um objeto de opções que armazena os valores padrão para todas as opções que você definir. A função _setOption é usada para essa finalidade. É chamado para cada opção individual que o usuário define. Aqui estamos definindo a largura e a cor de fundo do botão.

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $.widget("iP.myButton", {
               _create: function() { 
                  this._button = $("<button>"); 
                  this._button.text("My first Widget Button");
                  this._button.width(this.options.width) 
                  this._button.css("background-color", this.options.color);    
                  this._button.css("position", "absolute");   
                  this._button.css("left", "100px");            
                  $(this.element).append(this._button);
               },
               _setOption: function(key, value) { 
                  switch (key) { 
                     case "width": 
                     this._button.width(value); 
                     break; 
                     case "color":
                     this._button.css("background-color",value);
                     break; 
                  } 
               },
            });
            $("#button2").myButton();
            $("#button2").myButton("option", {width:100,color:"#cedc98"});
         });
      </script>
   </head>
   
   <body>
      <div id = "button2"></div>
   </body>
</html>

Vamos salvar o código acima em um arquivo HTML widgetfactoryexample.htm e abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída -

Adicionando métodos ao widget personalizado

No exemplo a seguir, adicionaremos métodos que o usuário pode utilizar e que são muito fáceis de construir na estrutura. Vamos escrever um método Move, que desloca o botão a uma distância horizontal especificada. Para fazer isso funcionar, também precisamos definir as propriedades position e left na função _create -

this._button.css("position", "absolute");   
this._button.css("left", "100px");

Depois disso, o usuário pode agora chamar seu método da maneira usual da jQuery UI -

this._button.css("position", "absolute");   
this._button.css("left", "100px");
$("button3").myButton("move", 200);
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <script>
         $(function() {
            $.widget("iP.myButton", {
               _create: function() { 
                  this._button = $("<button>"); 
                  this._button.text("My first Widget Button");
                  this._button.width(this.options.width) 
                  this._button.css("background-color", this.options.color);    
                  this._button.css("position", "absolute");   
                  this._button.css("left", "100px");            
                  $(this.element).append(this._button);
               },
         
               move: function(dx) { 
                  var x = dx + parseInt(this._button.css("left")); 
                  this._button.css("left", x); 
                  if(x>400) { this._trigger("outbounds",{},  {position:x}); }
               }
            });
            $("#button3").myButton();
            $("#button3").myButton("move", 200);
         });
      </script>
   </head>
   
   <body>
      <div id = "button3"></div>
   </body>
</html>

Vamos salvar o código acima em um arquivo HTML widgetfactoryexample.htm e abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída -

Adicionando eventos ao widget personalizado

Neste exemplo, vamos demonstrar como criar um evento. Para criar um evento, tudo o que você precisa fazer é usar o método _trigger. O primeiro parâmetro é o nome do evento, o segundo qualquer objeto de evento padrão que você deseja passar e o terceiro qualquer objeto de evento personalizado que você deseja passar.

Aqui, estamos disparando um evento quando o botão se move além de x = 400. Tudo que você precisa fazer é adicionar à função de movimento -

if(x<400) { this._trigger("outbounds",{}, {position:x}); }

Nesse caso, o evento é chamado de outbounds e um objeto de evento vazio é passado com um objeto de evento personalizado que simplesmente fornece a posição como sua única propriedade.

Toda a função de movimento é -

move: function(dx) {
   var x = dx + parseInt(this._button.css("left")); 
   this._button.css("left", x); 
   if(x<400) { this._trigger("outbounds",{}, {position:x}); }
}

O usuário pode definir a função de tratamento de eventos simplesmente definindo uma opção com o mesmo nome.

$("button4").myButton("option", {
   width: 100, 
   color: "red",
   outbounds:function(e,ui) {
      alert(ui.position);}
});
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $.widget("iP.myButton", {
               _create: function() { 
                  this._button = $("<button>"); 
                  this._button.text("My first Widget Button");
                  this._button.width(this.options.width) 
                  this._button.css("background-color", this.options.color);    
                  this._button.css("position", "absolute");   
                  this._button.css("left", "100px");            
                  $(this.element).append(this._button);
               },
               move: function(dx) { 
                  var x = dx + parseInt(this._button.css("left")); 
                  this._button.css("left", x); 
                  if(x>400) { this._trigger("outbounds",{},  {position:x}); }
               }
            });
            $("#button4").myButton();
            $("#button4").on("mybuttonoutbounds", function(e, ui) {
               alert("out");
            });
            $("#button4").myButton("move", 500);
         });
      </script>
   </head>
   
   <body>
      <div id = "button4"></div>
   </body>
</html>

Vamos salvar o código acima em um arquivo HTML widgetfactoryexample.htm e abri-lo em um navegador padrão compatível com javascript, uma caixa de alerta será exibida.