JqueryUI - fabryka widżetów

Wcześniej jedynym sposobem pisania niestandardowych formantów w jQuery było rozszerzenie przestrzeni nazw $ .fn . Działa to dobrze w przypadku prostych widżetów. Załóżmy, że tworzysz bardziej stanowe widżety, szybko staje się to kłopotliwe. Aby ułatwić proces tworzenia widgetów, w interfejsie użytkownika jQuery wprowadzono narzędzie Widget Factory, które usuwa większość schematu, który jest zwykle związany z zarządzaniem widgetem.

Fabryka widżetów jQueryUI to po prostu funkcja ($ .widget), która przyjmuje nazwę ciągu i obiekt jako argumenty i tworzy wtyczkę jQuery oraz „klasę” w celu hermetyzacji jej funkcjonalności.

Składnia

Poniżej przedstawiono składnię metody jQueryUI Widget Factory -

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

name- Jest to ciąg znaków zawierający przestrzeń nazw i nazwę widżetu (oddzieloną kropką) widgetu do utworzenia.

base- Podstawowy widget do dziedziczenia. Musi to być konstruktor, którego instancję można utworzyć za pomocą słowa kluczowego `new`. Domyślnie jQuery.Widget .

prototype- obiekt, który ma być użyty jako prototyp dla widgetu do dziedziczenia. Na przykład interfejs użytkownika jQuery ma wtyczkę „myszy”, na której oparte są pozostałe wtyczki interakcji. Aby to osiągnąć, wszystkie elementy draggable, droppable itp. Dziedziczą po wtyczce myszy, jak na przykład: jQuery.widget ("ui.draggable", $ .ui.mouse, {...}); Jeśli nie podasz tego argumentu, widget odziedziczy bezpośrednio z „podstawowego widgetu” jQuery.Widget (zwróć uwagę na różnicę między małymi literami „w” jQuery.widget i dużymi literami „W” jQuery.Widget).

Podstawowy widget

Podstawowy widget to widget używany przez fabrykę widgetów.

Opcje

W poniższej tabeli wymieniono różne opcje , których można używać z widgetem podstawowym -

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

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

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

Metody

W poniższej tabeli wymieniono różne metody , których można używać z widgetem podstawowym -

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

Wydarzenia

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

Cykl życia fabryki widżetów jQueryUI

Fabryka widgetów jQueryUI zapewnia obiektowy sposób zarządzania cyklem życia widgetu. Te działania w cyklu życia obejmują -

Tworzenie i niszczenie widżetu: na przykład

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

Zmiana opcji widżetów: Na przykład

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

Wykonywanie wywołań „super” w widżetach podklasowych: na przykład

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

Powiadomienia o wydarzeniach: na przykład

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

Przykład

Teraz stwórzmy niestandardowy widżet w poniższym przykładzie. Stworzymy widget przycisku. W poniższych przykładach zobaczymy, jak tworzyć opcje, metody i zdarzenia w widgecie -

Tworzenie niestandardowego widżetu

Najpierw utwórzmy prosty niestandardowy widżet.

<!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>

Zapiszmy powyższy kod w pliku HTML widgetfactoryexample.htm i otwórz go w standardowej przeglądarce obsługującej javascript, musisz również zobaczyć następujące dane wyjściowe -

Dodawanie opcji do niestandardowego widżetu

W poprzednim przykładzie użyliśmy funkcji _create do utworzenia kontrolki niestandardowej. Jednak użytkownicy na ogół chcą dostosować sterowanie, ustawiając i modyfikując opcje. Możemy zdefiniować obiekt opcji, który przechowuje wartości domyślne dla wszystkich zdefiniowanych opcji. Służy do tego funkcja _setOption . Jest wywoływana dla każdej indywidualnej opcji ustawionej przez użytkownika. Tutaj ustawiamy szerokość i kolor tła przycisku.

<!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>

Zapiszmy powyższy kod w pliku HTML widgetfactoryexample.htm i otwórz go w standardowej przeglądarce obsługującej javascript, musisz również zobaczyć następujące dane wyjściowe -

Dodawanie metod do niestandardowego widżetu

W poniższym przykładzie dodamy metody, z których użytkownik może korzystać i które są bardzo łatwe do wbudowania w framework. Napiszemy metodę Move, która przesuwa przycisk na określoną odległość w poziomie. Aby to zadziałało, musimy również ustawić położenie i lewe właściwości w funkcji _create -

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

Następnie użytkownik może teraz wywołać twoją metodę w zwykły sposób interfejsu użytkownika jQuery -

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>

Zapiszmy powyższy kod w pliku HTML widgetfactoryexample.htm i otwórz go w standardowej przeglądarce obsługującej javascript, musisz również zobaczyć następujące dane wyjściowe -

Dodawanie zdarzeń do niestandardowego widżetu

W tym przykładzie pokażemy, jak utworzyć wydarzenie. Aby utworzyć zdarzenie, wystarczy użyć metody _trigger. Pierwszy parametr to nazwa zdarzenia, drugi dowolny standardowy obiekt zdarzenia, który chcesz przekazać, a trzeci dowolny niestandardowy obiekt zdarzenia, który chcesz przekazać.

Tutaj uruchamiamy zdarzenie, gdy przycisk przesunie się poza x = 400. Wszystko, co musisz zrobić, to dodać do funkcji Move -

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

W tym przypadku zdarzenie jest nazywane outbounds, a pusty obiekt zdarzenia jest przekazywany z niestandardowym obiektem zdarzenia, który po prostu dostarcza pozycję jako jedyną właściwość.

Cała funkcja ruchu to -

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

Użytkownik może ustawić funkcję obsługi zdarzeń, po prostu definiując opcję o tej samej nazwie.

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

Zapiszmy powyższy kod w pliku HTML widgetfactoryexample.htm i otwórz go w standardowej przeglądarce obsługującej javascript, otworzy się okno ostrzegawcze.