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ên và tê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ở -

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

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

$( ".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ở:

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

Sự kiện

$( ".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ộng và mà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.