JqueryUI教程

JqueryUI - Widget Factory

早些时候，在jQuery中编写自定义控件的唯一方法是扩展 $.fn 命名空间.这适用于简单的小部件.假设您构建了更多有状态的小部件，它很快变得很麻烦.为了帮助构建小部件的过程，在jQuery UI中引入了Widget Factory，它删除了通常与管理小部件相关的大部分样板.

jQueryUI Widget Factory简单来说一个函数($ .widget)，它接受一个字符串名称和一个对象作为参数，并创建一个jQuery插件和一个"类"来封装它的功能.

语法

以下是jQueryUI Widget Factory方法的语法 :

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

名称 : 它是一个字符串，包含要创建的小部件的名称空间和小部件名称(用点分隔).

base : 要继承的基本窗口小部件.这必须是可以使用`new`关键字实例化的构造函数.默认为 jQuery.Widget .

原型 : 用作要继承的窗口小部件原型的对象.例如，jQuery UI有一个"鼠标"插件，其余的交互插件都基于该插件.为了实现这一点， draggable，droppable，等都继承自鼠标插件，如下所示:jQuery.widget("ui.draggable"，$ .ui.mouse，{...}) ;如果你不提供这个参数，小部件将直接从"基本小部件"jQuery.Widget继承(注意小写"w"jQuery.widget和大写"W"jQuery.Widget之间的区别.)

基本小部件

基本小部件是小部件工厂使用的小部件.

选项

下表列出了可与基本小部件一起使用的不同选项 :

Sr.No.	Option&描述
1	disabledhide 如果设置为 true ，则此选项会禁用窗口小部件.默认情况下，其值为 false . 选项 - 禁用隐藏如果设置为 true ，则此选项将禁用窗口小部件.默认情况下，其值为 false . 示例 $(".selector").widget({disabled:true});
2	hide 此选项确定如何为元素的隐藏设置动画.默认情况下，其值为 null . 选项 - 隐藏此选项确定如何为元素的隐藏设置动画.默认情况下，其值为 null . 这可以是 : Boolean : 如果设置为 false ，则不使用动画.如果设置为 true ，元素将以默认持续时间和默认缓动淡出. Number : 元素将以指定的持续时间和默认缓动淡出. String : 该元素将使用指定的效果隐藏. Object : 如果值是对象，则可以提供效果，延迟，持续时间，和缓动属性. 示例 $(".selector").widget({hide: {effect:"explode"，持续时间:1000}});
3	show 此选项确定如何为元素的显示设置动画.默认情况下，其值为 null . 选项 - 显示此选项确定如何为元素的显示设置动画.默认情况下，其值为 null . 这可以是 : Boolean : 如果设置为 false ，则不会使用动画来显示元素.如果设置为 true ，元素将以默认持续时间和默认缓动淡入. Number :元素将以指定的持续时间和默认缓动淡入. String : 该元素将使用指定的效果显示. Object : 如果值是对象，则可以提供效果，延迟，持续时间，和缓动属性. 示例 $(".selector").widget({show: {effect:"explode"，持续时间:1000}});

Sr.No.

Option&描述

disabledhide

如果设置为 true ，则此选项会禁用窗口小部件.默认情况下，其值为 false .

选项 - 禁用隐藏

如果设置为 true ，则此选项将禁用窗口小部件.默认情况下，其值为 false .

示例

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

hide

此选项确定如何为元素的隐藏设置动画.默认情况下，其值为 null .

选项 - 隐藏

此选项确定如何为元素的隐藏设置动画.默认情况下，其值为 null .

这可以是 :

Boolean : 如果设置为 false ，则不使用动画.如果设置为 true ，元素将以默认持续时间和默认缓动淡出.
Number : 元素将以指定的持续时间和默认缓动淡出.
String : 该元素将使用指定的效果隐藏.
Object : 如果值是对象，则可以提供效果，延迟，持续时间，和缓动属性.

示例

 
 $(".selector").widget({hide: {effect:"explode"，持续时间:1000}});

show

此选项确定如何为元素的显示设置动画.默认情况下，其值为 null .

选项 - 显示

此选项确定如何为元素的显示设置动画.默认情况下，其值为 null .

这可以是 :

Boolean : 如果设置为 false ，则不会使用动画来显示元素.如果设置为 true ，元素将以默认持续时间和默认缓动淡入.
Number :元素将以指定的持续时间和默认缓动淡入.
String : 该元素将使用指定的效果显示.
Object : 如果值是对象，则可以提供效果，延迟，持续时间，和缓动属性.

示例

 
 $(".selector").widget({show: {effect:"explode"，持续时间: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(){
//在元素完全可见时聚焦元素.
 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"); 
}

Sr.No.	Action&描述
1	_create() 此方法是小部件的构造函数.没有参数，但 this.element 和 this.options 已经设置. 动作 - _create() 此动作完全破坏元素的折叠功能.元素返回到pre-init状态.此方法是小部件的构造函数.没有参数，但 this.element 和 this.options 已经设置. 示例 _create:function(){ this.element.css("background-color"，this.options.color); }
2	_delay(fn [ ，delay ]) 此方法在指定的延迟后调用提供的函数.返回与 clearTimeout()一起使用的超时ID. 操作 - _delay(fn [，delay]) 此方法在指定的延迟后调用提供的函数.返回与 clearTimeout()一起使用的超时ID. 示例 this._delay(this._foo，100);
3	_destroy() 公共 destroy()方法清除所有常见数据，事件等，然后委托给 _destroy()自定义，特定于小部件，清理的方法. 操作 - _destroy() 公共 destroy()方法清除所有常见数据，事件等，然后委托给这个 _destroy()方法用于自定义，特定于小部件的清理. 示例 _destroy:function(){ this.element.removeClass("my-widget"); }
4	_focusable(element) 此方法设置元素以在焦点上应用 ui-state-focus 类.事件处理程序会在销毁时自动清理. 操作 - _focusable(元素) 此方法设置元素以在焦点上应用 ui-state-focus 类.事件处理程序会在销毁时自动清理. 示例 _create:function(){ this._focusable(this.element.find(".my-items")); }
5	_getCreateEventData() 所有小部件都会触发创建事件.默认情况下，事件中不提供任何数据，但此方法可以返回将作为创建事件数据传递的对象. 操作 - _getCreateEventData() 所有小部件都会触发创建事件.默认情况下，事件中不提供任何数据，但此方法可以返回将作为create事件数据传递的对象. 示例 _getCreateEventData:function(){ return this.options; }
6	_getCreateOptions() 此方法允许窗口小部件定义用于在实例化期间定义选项的自定义方法.用户提供的选项会覆盖此方法返回的选项，这会覆盖默认选项. 操作 - _getCreateOptions() 此方法允许窗口小部件定义用于在实例化期间定义选项的自定义方法.用户提供的选项会覆盖此方法返回的选项，这会覆盖默认选项. 示例 _getCreateOptions:function(){ return {id:this.element.attr("id")}; }
7	_hide(element， option [，callback]) 此方法使用内置动画方法或使用自定义效果立即隐藏元素.有关可能的选项值，请参阅隐藏选项. 操作 - _hide(元素，选项[，回调]) 此方法使用内置动画方法或使用自定义效果立即隐藏元素.有关可能的选项值，请参阅隐藏选项. 示例 this ._hide(this.element，this.options.hide，function(){ $(this).remove(); });
8	_hoverable(element) 此方法设置元素以在悬停时应用ui-state-hover类.事件处理程序会在销毁时自动清理. 操作 - _可移动(元素) 此方法设置元素以在悬停时应用ui-state-hover类.事件处理程序会在销毁时自动清理. 示例 this._hoverable(this.element.find("div"));
9	_init() 每次调用插件时都没有参数或只有一个选项哈希，小部件被初始化;这包括创建小部件的时间. 行动 - _init() 每次调用插件时都没有参数或只有一个选项哈希，小部件被初始化;这包括创建小部件的时间. 示例 _init: function(){ if(this.options.autoOpen){ this.open(); } }
10	_off(element，eventName) 此方法从指定的元素中取消绑定事件处理程序. 操作 - _off(element，eventName) 此方法从指定的元素中取消绑定事件处理程序. 示例 this._off(this.element，"click");
11	_on([suppressDisabledCheck] [，element] ，handlers ) 将事件处理程序绑定到指定的元素.通过事件名称中的选择器支持委派，例如"click .foo". 动作 - _on([suppressDisabledCheck] [，element ]，处理程序) 将事件处理程序绑定到指定的元素.通过事件名称内的选择器支持委派，例如"click .foo". 示例 this._on( this.element, { "click a": function( event ) { event.preventDefault(); } });
12	_setOption(key，value) 对于每个单独的选项，从 _setOptions()方法调用此方法.小部件状态应根据更改进行更新. 操作 - _setOption(键，值) 对于每个单独的选项，从 _setOptions()方法调用此方法.小部件状态应根据更改进行更新. 示例 _setOption :function(key，value){ if(key ==="width"){ this.element.width(value); } if(key ==="height"){ this.element.height(value); } this._super(key，value); }
13	_setOptions(options) 无论调用option()方法的形式如何，只要调用了option()方法，就会调用此方法. 操作 - _setOptions(选项) 每当调用option()方法时都会调用此方法，无论其中的形式如何调用了option()方法. 示例 _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(element，option [，callback]) 使用内置动画方法或使用自定义效果立即显示元素.有关可能的选项值，请参阅show选项. 操作 - _show(元素，选项[，回调]) 使用内置动画方法或使用自定义效果立即显示元素.有关可能的选项值，请参阅show选项. 示例 _this ._show(this.element，this.options.show，function(){ //在元素完全可见时聚焦元素. this.focus(); }
15	_super([arg] [，...]) 此方法使用任何指定的参数从父窗口小部件调用相同名称的方法.基本上.call(). 动作 - _super([arg] [，...]) 此方法从父窗口小部件调用相同名称的方法，任何指定的参数.基本上.call(). 示例 _setOption: function( key, value ) { if ( key === "title" ) { this.element.find( "h3" ).text( value ); } this._super( key, value ); }
16	_superApply(arguments) 使用参数数组从父窗口小部件调用相同名称的方法. Action - _superApply(arguments) 使用参数数组从父窗口小部件调用相同名称的方法. 示例 _setOption:function(key，value){ if(key ===") title"){ this.element.find("h3").text(value); } this._superApply(arguments); }
17	_trigger(type [type ，event] [，data]) 此方法触发事件及其关联的回调.名称等于type的选项被调用作为回调. 操作 - _trigger(类型[，事件] [，数据]) 此方法触发事件及其关联的回调.名称等于type的选项被调用作为回调. 示例 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	destroy() 此方法完全删除小部件功能.这将使元素返回其初始化前状态. 动作 - destroy() 此方法完全删除小部件功能.这将使元素返回到初始化前状态. 示例 this._on(this.element，{ "click a":function(event){ event.preventDefault(); this.destroy(); } });
19	disable() 此方法禁用小部件. 操作 - 禁用() 此方法禁用小部件. 示例 this ._on(this.element，{ "click a":function(event){ event.preventDefault(); this.disable(); } });
20	enable() 此方法启用小部件. 操作 - 启用() 此方法启用小部件. 示例 this ._on(this.element，{ "click a":function(event){ event.preventDefault(); this.enable(); } });
21	option(optionName) 此方法获取当前与指定的 optionName 相关联的值. 操作 - 选项(optionName) 此方法获取当前与指定的 optionName 关联的值. 示例 this.option("width");
22	option() 此方法获取一个对象，其中包含表示当前窗口小部件选项哈希的键/值对. 操作 - 选项() 此方法获取一个对象，其中包含表示当前窗口小部件选项哈希的键/值对. 示例 var options = this.option(); for(var key in options){ console.log(key，options [key]); }
23	option(optionName，value ) 此方法设置与指定的optionName关联的窗口小部件选项的值. 操作 - 选项(optionName，value) 此方法设置与指定的optionName关联的窗口小部件选项的值. 示例 this.option("width"，500);
24	option( options ) 此方法为小部件设置一个或多个选项. 操作 - 选项(选项) 此方法为小部件设置一个或多个选项. 示例 this.option({ width:500， height:500 });
25	widget() 此方法返回包含原始元素或其他相关生成元素的jQuery对象. 操作 - 小部件() 此方法返回包含原始元素或其他相关生成元素的jQuery对象. 示例 _create:function(){ this.widget().css("border"，"2px solid red"); }

事件

Sr.No.	事件方法&描述
1	create(event，ui) 创建小部件时会触发此事件. 事件 - 创建(事件，ui) 创建窗口小部件时会触发此事件.其中事件的类型为事件，而 ui 的类型为 Object . 语法 $(".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函数来创建自定义控件。但是用户通常希望通过设置和修改选项来自定义控件。我们可以定义一个options对象，它存储您定义的所有选项的默认值。 _setOption函数用于此目的。它针对用户设置的每个单独选项进行调用。这里我们设置按钮的宽度和背景颜色。

<!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以上，我们将触发一个事件。您所要做的就是添加移动功能

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

在这种情况下，事件被称为outbounds，并且一个空事件对象与一个自定义事件对象一起传递，该事件对象仅提供该位置作为其唯一属性。

整个移动功能是

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的标准浏览器中打开它，打开一个警告框。