JqueryUI - 小部件工廠

以前，在 jQuery 中編寫自定義控制元件的唯一方法是擴充套件 $.fn 名稱空間。這對於簡單的小部件非常有效。假設您構建了更多狀態化的小部件，它很快就會變得很麻煩。為了幫助構建小部件的過程，jQuery UI 中引入了小部件工廠，它消除了通常與管理小部件相關的許多樣板程式碼。

jQueryUI 小部件工廠只是一個函式（$.widget），它以字串名稱和物件作為引數，並建立一個 jQuery 外掛和一個“類”來封裝其功能。

語法

以下是 jQueryUI 小部件工廠方法的語法：

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

name - 它是一個包含名稱空間和小部件名稱（用點分隔）的字串，用於建立小部件。

base - 要從中繼承的基本小部件。這必須是一個可以使用`new`關鍵字例項化的建構函式。預設為jQuery.Widget。

prototype - 用作小部件要從中繼承的原型的物件。例如，jQuery UI 有一個“滑鼠”外掛，其餘互動外掛都基於此。為了實現這一點，draggable、droppable等都從滑鼠外掛繼承，如下所示：jQuery.widget( "ui.draggable", $.ui.mouse, {...} ); 如果您不提供此引數，則小部件將直接從“基本小部件”jQuery.Widget繼承（注意小寫“w”jQuery.widget和大寫“W”jQuery.Widget之間的區別）。

基本小部件

基本小部件是小部件工廠使用的小部件。

選項

下表列出了可與基本小部件一起使用的不同選項：

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

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

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

方法

下表列出了可與基本小部件一起使用的不同方法：

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

事件

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

jQueryUI 小部件工廠生命週期

jQueryUI 小部件工廠提供了一種面向物件的方式來管理小部件的生命週期。這些生命週期活動包括：

建立和銷燬小部件：例如，

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

更改小部件選項：例如

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

在子類化的小部件中進行“超級”呼叫：例如

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

事件通知：例如

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

示例

現在讓我們在下面的示例中建立一個自定義小部件。我們將建立一個按鈕小部件。在以下示例中，我們將看到如何在小部件中建立選項、方法和事件：

建立自定義小部件

讓我們首先建立一個簡單自定義小部件。

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

讓我們將以上程式碼儲存在一個 HTML 檔案widgetfactoryexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它，您還應該看到以下輸出：

向自定義小部件新增選項

在前面的示例中，我們使用了_create函式來建立自定義控制元件。但使用者通常希望透過設定和修改選項來自定義控制元件。我們可以定義一個選項物件，該物件儲存所有定義選項的預設值。_setOption函式用於此目的。它用於使用者設定的每個單獨選項。這裡我們正在設定按鈕的width和background-color。

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

讓我們將以上程式碼儲存在一個 HTML 檔案widgetfactoryexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它，您還應該看到以下輸出：

向自定義小部件新增方法

在以下示例中，我們將新增使用者可以利用的方法，這些方法非常易於構建到框架中。我們將編寫一個Move方法，該方法將按鈕向指定的水平距離移動。為了使此方法生效，我們還需要在_create函式中設定position和left屬性 -

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

此後，使用者現在可以以通常的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>

讓我們將以上程式碼儲存在一個 HTML 檔案widgetfactoryexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它，您還應該看到以下輸出：

向自定義小部件新增事件

在此示例中，我們將演示如何建立事件。要建立事件，您只需使用_trigger方法即可。第一個引數是事件的名稱，第二個是您想要傳遞的任何標準事件物件，第三個是您想要傳遞的任何自定義事件物件。

這裡我們在按鈕移動到x=400以外時觸發一個事件。您只需新增到move函式中 -

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

在這種情況下，事件稱為outbounds，並傳遞了一個空事件物件和一個自定義事件物件，該物件僅將位置作為其唯一屬性。

整個move函式為 -

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

讓我們將以上程式碼儲存在一個HTML檔案widgetfactoryexample.htm中，並在支援javascript的標準瀏覽器中開啟它，就會彈出一個警示框。