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 -

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

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

$( ".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 -

_create: function() {
   this.element.css( "background-color", this.options.color );
}

this._delay( this._foo, 100 );

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

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

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

_getCreateOptions: function() {
   return { id: this.element.attr( "id" ) };
}

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

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

_init: function() {
   if ( this.options.autoOpen ) {
      this.open();
   }
}

this._off( this.element, "click" );

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

_setOption: function( key, value ) {
   if ( key === "width" ) {
      this.element.width( value );
   }
   if ( key === "height" ) {
      this.element.height( value );
   }
   this._super( key, value );
}

_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();
   }
}

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

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

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

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()
      });
   }
});

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

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

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

this.option( "width" );

var options = this.option();
for ( var key in options ) {
   console.log( key, options[ key ] );
}

this.option( "width", 500 );

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

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

Eventos

$( ".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.