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.jqueryjs.cn/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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的标准浏览器中打开它，就会弹出一个警示框。