JqueryUI - Nhà máy widget

Trước đó, cách duy nhất để viết các điều khiển tùy chỉnh trong jQuery là mở rộng không gian tên $ .fn . Điều này hoạt động tốt cho các vật dụng đơn giản. Giả sử bạn xây dựng nhiều widget trạng thái hơn, nó sẽ nhanh chóng trở nên cồng kềnh. Để hỗ trợ quá trình xây dựng các widget, Widget Factory đã được giới thiệu trong giao diện người dùng jQuery, công cụ này loại bỏ hầu hết các bản soạn sẵn thường được liên kết với việc quản lý một widget.

JQueryUI Widget Factory chỉ đơn giản là một hàm ($ .widget) lấy tên chuỗi và một đối tượng làm đối số và tạo một plugin jQuery và một "Lớp" để đóng gói chức năng của nó.

Cú pháp

Sau đây là cú pháp của phương thức jQueryUI Widget Factory:

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

name- Là chuỗi chứa vùng têntên widget (cách nhau bằng dấu chấm) của widget cần tạo.

base- Tiện ích cơ sở để kế thừa từ đó. Đây phải là một hàm tạo có thể được khởi tạo bằng từ khóa `new`. Mặc định là jQuery.Widget .

prototype- Đối tượng được sử dụng làm nguyên mẫu cho tiện ích con kế thừa. Ví dụ: giao diện người dùng jQuery có một plugin "chuột" dựa trên phần còn lại của các plugin tương tác. Để đạt được điều này, tất cả có thể kéo , có thể kéo, v.v. đều kế thừa từ plugin chuột như sau: jQuery.widget ("ui.draggable", $ .ui.mouse, {...}); Nếu bạn không cung cấp đối số này, tiện ích con sẽ kế thừa trực tiếp từ "tiện ích cơ sở", jQuery.Widget (lưu ý sự khác biệt giữa chữ thường "w" jQuery.widget và chữ hoa "W" jQuery.Widget).

Tiện ích cơ sở

Widget cơ sở là widget được nhà máy sản xuất widget sử dụng.

Tùy chọn

Bảng sau liệt kê các tùy chọn khác nhau có thể được sử dụng với tiện ích cơ sở -

Sr.No. Tùy chọn & Mô tả
1 khuyết tật

Tùy chọn này sẽ tắt tiện ích nếu được đặt thành true . Theo mặc định, giá trị của nó làfalse.

Option - disabledhide

Tùy chọn này sẽ tắt tiện ích nếu được đặt thành true . Theo mặc định, giá trị của nó làfalse.

Example

$( ".selector" ).widget({ disabled: true });
2 ẩn giấu

Tùy chọn này xác định cách tạo hoạt ảnh cho việc ẩn phần tử. Theo mặc định, giá trị của nó lànull.

Option - hide

Tùy chọn này xác định cách tạo hoạt ảnh cho việc ẩn phần tử. Theo mặc định, giá trị của nó lànull.

Điều này có thể thuộc loại -

  • Boolean- Nếu được đặt thành false, sẽ không có hoạt ảnh nào được sử dụng. Phần tử sẽ mờ dần theo thời lượng mặc định và tốc độ mặc định nếu được đặt thành true .

  • Number - Phần tử sẽ mờ dần theo thời lượng được chỉ định và tốc độ mặc định.

  • String - Phần tử sẽ được ẩn bằng hiệu ứng được chỉ định.

  • Object- Nếu giá trị là một đối tượng, sau đó có hiệu lực, chậm trễ, thời gian,giảm bớt các thuộc tính có thể được cung cấp.

Example

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

Tùy chọn này xác định cách tạo hiệu ứng hiển thị phần tử. Theo mặc định, giá trị của nó lànull.

Option - show

Tùy chọn này xác định cách tạo hiệu ứng hiển thị phần tử. Theo mặc định, giá trị của nó lànull.

Điều này có thể thuộc loại -

  • Boolean- Nếu được đặt thành false sẽ không có hoạt ảnh nào được sử dụng để hiển thị phần tử. Phần tử sẽ mờ dần theo thời lượng mặc định và tốc độ mặc định nếu được đặt thành true .

  • Number - Phần tử sẽ mờ dần theo thời lượng đã chỉ định và tốc độ mặc định.

  • String - Phần tử sẽ được hiển thị bằng cách sử dụng hiệu ứng được chỉ định.

  • Object- Nếu giá trị là một đối tượng, sau đó có hiệu lực, chậm trễ, thời gian,giảm bớt các thuộc tính có thể được cung cấp.

Example

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

Phương pháp

Bảng sau liệt kê các phương pháp khác nhau có thể được sử dụng với tiện ích cơ sở:

Sr.No. Mô tả hành động
1 _tạo nên()

Phương thức này là phương thức khởi tạo của widget. Không có tham số nào, nhưng this.elementthis.options đã được thiết lập.

Action - _create()

Hành động này phá hủy hoàn toàn chức năng đàn accordion của một phần tử. Các phần tử trở về trạng thái pre-init. Phương thức này là phương thức khởi tạo của widget. Không có tham số nào, nhưng this.elementthis.options đã được thiết lập.

Example

_create: function() {
   this.element.css( "background-color", this.options.color );
}
2 _delay (fn [, delay])

Phương thức này gọi hàm được cung cấp sau một khoảng thời gian trễ được chỉ định. Trả về ID thời gian chờ để sử dụng với clearTimeout () .

Action - _delay( fn [, delay ] )

Phương thức này gọi hàm được cung cấp sau một khoảng thời gian trễ được chỉ định. Trả về ID thời gian chờ để sử dụng với clearTimeout () .

Example

this._delay( this._foo, 100 );
3 _hủy hoại()

Phương thức hủy diệt công khai () dọn dẹp tất cả dữ liệu, sự kiện, v.v. chung và sau đó ủy quyền cho phương thức _destroy () này để dọn dẹp tùy chỉnh, dành riêng cho tiện ích con.

Action - _destroy()

Phương thức hủy diệt công khai () dọn dẹp tất cả dữ liệu, sự kiện, v.v. chung và sau đó ủy quyền cho phương thức _destroy () này để dọn dẹp tùy chỉnh, dành riêng cho tiện ích con.

Example

_destroy: function() {
   this.element.removeClass( "my-widget" );
}
4 _focusable (phần tử)

Phương thức này thiết lập phần tử để áp dụng lớp ui-state-focus trên tiêu điểm. Các trình xử lý sự kiện sẽ tự động được dọn dẹp khi hủy.

Action - _focusable( element )

Phương thức này thiết lập phần tử để áp dụng lớp ui-state-focus trên tiêu điểm. Các trình xử lý sự kiện sẽ tự động được dọn dẹp khi hủy.

Example

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

Tất cả các widget sẽ kích hoạt sự kiện tạo . Theo mặc định, không có dữ liệu nào được cung cấp trong sự kiện, nhưng phương thức này có thể trả về một đối tượng sẽ được chuyển làm dữ liệu của sự kiện tạo.

Action - _getCreateEventData()

Tất cả các widget sẽ kích hoạt sự kiện tạo . Theo mặc định, không có dữ liệu nào được cung cấp trong sự kiện, nhưng phương thức này có thể trả về một đối tượng sẽ được chuyển làm dữ liệu của sự kiện tạo.

Example

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

Phương pháp này cho phép tiện ích con xác định một phương thức tùy chỉnh để xác định các tùy chọn trong quá trình khởi tạo. Các tùy chọn do người dùng cung cấp sẽ ghi đè các tùy chọn được trả về bởi phương thức này, sẽ ghi đè các tùy chọn mặc định.

Action - _getCreateOptions()

Phương pháp này cho phép tiện ích con xác định một phương thức tùy chỉnh để xác định các tùy chọn trong quá trình khởi tạo. Các tùy chọn do người dùng cung cấp sẽ ghi đè các tùy chọn được trả về bởi phương thức này, sẽ ghi đè các tùy chọn mặc định.

Example

_getCreateOptions: function() {
   return { id: this.element.attr( "id" ) };
}
7 _hide (phần tử, tùy chọn [, gọi lại])

Phương pháp này ẩn một phần tử ngay lập tức, sử dụng các phương pháp hoạt ảnh có sẵn hoặc sử dụng các hiệu ứng tùy chỉnh. Xem tùy chọn ẩn để biết các giá trị tùy chọn có thể.

Action - _hide( element, option [, callback ] )

Phương pháp này ẩn một phần tử ngay lập tức, sử dụng các phương pháp hoạt ảnh có sẵn hoặc sử dụng các hiệu ứng tùy chỉnh. Xem tùy chọn ẩn để biết các giá trị tùy chọn có thể.

Example

this._hide( this.element, this.options.hide, function() {
   $( this ).remove();
});
số 8 _hoverable (phần tử)

Phương thức này Thiết lập phần tử để áp dụng lớp ui-state-hover khi di chuột. Các trình xử lý sự kiện sẽ tự động được dọn dẹp khi hủy.

Action - _hoverable( element )

Phương thức này Thiết lập phần tử để áp dụng lớp ui-state-hover khi di chuột. Các trình xử lý sự kiện sẽ tự động được dọn dẹp khi hủy.

Example

this._hoverable( this.element.find( "div" ) );
9 _trong đó()

Bất kỳ lúc nào plugin được gọi mà không có đối số hoặc chỉ có hàm băm tùy chọn, tiện ích sẽ được khởi tạo; điều này bao gồm khi tiện ích con được tạo.

Action - _init()

Bất kỳ lúc nào plugin được gọi mà không có đối số hoặc chỉ có hàm băm tùy chọn, tiện ích sẽ được khởi tạo; điều này bao gồm khi tiện ích con được tạo.

Example

_init: function() {
   if ( this.options.autoOpen ) {
      this.open();
   }
}
10 _off (phần tử, eventName)

Phương thức này bỏ liên kết các trình xử lý sự kiện khỏi (các) phần tử được chỉ định.

Action - _off( element, eventName )

Phương thức này bỏ liên kết các trình xử lý sự kiện khỏi (các) phần tử được chỉ định.

Example

this._off( this.element, "click" );
11 _on ([ressionDisabledCheck] [, element], trình xử lý)

Liên kết các trình xử lý sự kiện với (các) phần tử được chỉ định. Việc ủy ​​quyền được hỗ trợ thông qua các bộ chọn bên trong tên sự kiện, ví dụ: "click .foo".

Action - _on( [suppressDisabledCheck ] [, element ], handlers )

Liên kết các trình xử lý sự kiện với (các) phần tử được chỉ định. Việc ủy ​​quyền được hỗ trợ thông qua các bộ chọn bên trong tên sự kiện, ví dụ: "click .foo".

Example

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
   }
});
12 _setOption (khóa, giá trị)

Phương thức này được gọi từ phương thức _setOptions () cho từng tùy chọn riêng lẻ. Trạng thái tiện ích con nên được cập nhật dựa trên các thay đổi.

Action - _setOption( key, value )

Phương thức này được gọi từ phương thức _setOptions () cho từng tùy chọn riêng lẻ. Trạng thái tiện ích con nên được cập nhật dựa trên các thay đổi.

Example

_setOption: function( key, value ) {
   if ( key === "width" ) {
      this.element.width( value );
   }
   if ( key === "height" ) {
      this.element.height( value );
   }
   this._super( key, value );
}
13 _setOptions (tùy chọn)

Phương thức này được gọi bất cứ khi nào phương thức option () được gọi, bất kể hình thức mà phương thức option () được gọi là gì.

Action - _setOptions( options )

Phương thức này được gọi bất cứ khi nào phương thức option () được gọi, bất kể hình thức mà phương thức option () được gọi là gì.

Example

_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 (phần tử, tùy chọn [, gọi lại])

Hiển thị một phần tử ngay lập tức, sử dụng các phương pháp hoạt ảnh tích hợp hoặc sử dụng các hiệu ứng tùy chỉnh. Xem tùy chọn hiển thị để biết các giá trị tùy chọn có thể có.

Action - _show( element, option [, callback ] )

Hiển thị một phần tử ngay lập tức, sử dụng các phương pháp hoạt ảnh tích hợp hoặc sử dụng các hiệu ứng tùy chỉnh. Xem tùy chọn hiển thị để biết các giá trị tùy chọn có thể có.

Example

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

Phương thức này gọi phương thức cùng tên từ tiện ích con, với bất kỳ đối số được chỉ định nào. Về cơ bản .call ().

Action - _super( [arg ] [, ... ] )

Phương thức này gọi phương thức cùng tên từ tiện ích con, với bất kỳ đối số được chỉ định nào. Về cơ bản .call ().

Example

_setOption: function( key, value ) {
   if ( key === "title" ) {
      this.element.find( "h3" ).text( value );
   }
   this._super( key, value );
}
16 _superApply (đối số)

Gọi phương thức có cùng tên từ tiện ích con, với mảng đối số.

Action - _superApply( arguments )

Gọi phương thức có cùng tên từ tiện ích con, với mảng đối số.

Example

_setOption: function( key, value ) {
   if ( key === "title" ) {
      this.element.find( "h3" ).text( value );
   }
   this._superApply( arguments );
}
17 _trigger (loại [, sự kiện] [, dữ liệu])

Phương thức này kích hoạt một sự kiện và gọi lại liên quan của nó. Tùy chọn có tên bằng kiểu được gọi là lệnh gọi lại.

Action - _trigger( type [, event ] [, data ] )

Phương thức này kích hoạt một sự kiện và gọi lại liên quan của nó. Tùy chọn có tên bằng kiểu được gọi là lệnh gọi lại.

Example

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 hủy hoại()

Phương pháp này loại bỏ hoàn toàn chức năng của widget. Thao tác này sẽ đưa phần tử trở lại trạng thái pre-init.

Action - destroy()

Phương pháp này loại bỏ hoàn toàn chức năng của widget. Thao tác này sẽ đưa phần tử trở lại trạng thái pre-init.

Example

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
      this.destroy();
   }
});
19 vô hiệu hóa()

Phương pháp này vô hiệu hóa tiện ích con.

Action - disable()

Phương pháp này vô hiệu hóa tiện ích con.

Example

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
      this.disable();
   }
});
20 cho phép ()

Phương pháp này kích hoạt tiện ích.

Action - enable()

Phương pháp này kích hoạt tiện ích.

Example

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

Phương thức này nhận giá trị hiện được liên kết với optionName được chỉ định .

Action - option( optionName )

Phương thức này nhận giá trị hiện được liên kết với optionName được chỉ định .

Example

this.option( "width" );
22 Lựa chọn()

Phương thức này nhận một đối tượng chứa các cặp khóa / giá trị đại diện cho băm tùy chọn widget hiện tại.

Action - option()

Phương thức này nhận một đối tượng chứa các cặp khóa / giá trị đại diện cho băm tùy chọn widget hiện tại.

Example

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

Phương thức này đặt giá trị của tùy chọn widget được liên kết với optionName được chỉ định.

Action - option( optionName, value )

Phương thức này đặt giá trị của tùy chọn widget được liên kết với optionName được chỉ định.

Example

this.option( "width", 500 );
24 option (tùy chọn)

Phương pháp này đặt một hoặc nhiều tùy chọn cho tiện ích con.

Action - option( options )

Phương pháp này đặt một hoặc nhiều tùy chọn cho tiện ích con.

Example

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

Phương thức này trả về một đối tượng jQuery có chứa phần tử gốc hoặc phần tử được tạo có liên quan khác.

Action - widget()

Phương thức này trả về một đối tượng jQuery có chứa phần tử gốc hoặc phần tử được tạo có liên quan khác.

Example

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

Sự kiện

Sr.No. Phương pháp & Mô tả Sự kiện
1 tạo (sự kiện, ui)

Sự kiện này được kích hoạt khi một tiện ích con được tạo.

Event - create( event, ui )

Sự kiện này được kích hoạt khi một tiện ích con được tạo. Trường hợp sự kiện thuộc loại Sự kiệnui thuộc loại Đối tượng .

Syntax

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

jQueryUI widget Factory Lifecycle

Nhà máy sản xuất widget jQueryUI, cung cấp một cách hướng đối tượng để quản lý vòng đời của widget. Các hoạt động vòng đời này bao gồm:

Tạo và hủy một widget: Ví dụ:

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

Thay đổi tùy chọn tiện ích: Ví dụ:

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

Thực hiện cuộc gọi "super" trong các widget phân lớp: Ví dụ:

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

Thông báo sự kiện: Ví dụ

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

Thí dụ

Bây giờ chúng ta hãy tạo một widget tùy chỉnh trong ví dụ sau. Chúng tôi sẽ tạo một widget nút. Chúng ta sẽ xem cách tạo các tùy chọn, phương thức và sự kiện trong tiện ích con trong các ví dụ sau:

Tạo tiện ích con tùy chỉnh

Đầu tiên chúng ta hãy tạo một widget tùy chỉnh đơn giản.

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

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML widgetfactoryexample.htm và mở nó trong một trình duyệt chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau:

Thêm tùy chọn vào widget tùy chỉnh

Trong ví dụ trước, chúng ta đã sử dụng hàm _create để tạo điều khiển tùy chỉnh. Nhưng người dùng thường muốn tùy chỉnh điều khiển bằng cách cài đặt và sửa đổi các tùy chọn. Chúng tôi có thể xác định một đối tượng tùy chọn lưu trữ các giá trị mặc định cho tất cả các tùy chọn mà bạn xác định. Hàm _setOption được sử dụng cho mục đích này. Nó được gọi cho từng tùy chọn riêng lẻ mà người dùng đặt. Ở đây chúng tôi đang thiết lập chiều rộngmàu nền của nút.

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

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML widgetfactoryexample.htm và mở nó trong một trình duyệt chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau:

Thêm phương pháp vào widget tùy chỉnh

Trong ví dụ sau, chúng tôi sẽ thêm các phương thức mà người dùng có thể sử dụng và những phương thức này rất dễ xây dựng vào khung. Chúng tôi sẽ viết một phương thức Move, dịch chuyển nút một khoảng cách theo phương ngang xác định. Để thực hiện công việc này, chúng ta cũng cần thiết lập vị trí và thuộc tính bên trái trong hàm _create -

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

Sau đó, người dùng có thể gọi phương thức của bạn theo cách giao diện người dùng jQuery thông thường:

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>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML widgetfactoryexample.htm và mở nó trong một trình duyệt chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau:

Thêm sự kiện vào tiện ích con tùy chỉnh

Trong ví dụ này, chúng tôi sẽ trình bày cách tạo một sự kiện. Để tạo một sự kiện, tất cả những gì bạn phải làm là sử dụng phương thức _trigger. Tham số đầu tiên là tên của sự kiện, tham số thứ hai là bất kỳ đối tượng sự kiện tiêu chuẩn nào bạn muốn chuyển và tham số thứ ba là bất kỳ đối tượng sự kiện tùy chỉnh nào bạn muốn truyền.

Ở đây chúng tôi đang kích hoạt một sự kiện khi nút di chuyển vượt quá x = 400. Tất cả những gì bạn phải làm là thêm vào chức năng di chuyển -

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

Trong trường hợp này, sự kiện được gọi là outbounds và một đối tượng sự kiện trống được chuyển với một đối tượng sự kiện tùy chỉnh chỉ cung cấp vị trí làm thuộc tính duy nhất của nó.

Toàn bộ chức năng di chuyển là -

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

Người dùng có thể đặt chức năng xử lý sự kiện bằng cách xác định một tùy chọn có cùng tên.

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

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML widgetfactoryexample.htm và mở nó trong một trình duyệt tiêu chuẩn hỗ trợ javascript, một hộp cảnh báo sẽ mở ra.