JqueryUI - Pabrik Widget

Sebelumnya, satu-satunya cara untuk menulis kontrol kustom di jQuery adalah dengan memperluas namespace $ .fn . Ini berfungsi dengan baik untuk widget sederhana. Misalkan Anda membuat widget yang lebih berstatus, itu dengan cepat menjadi tidak praktis. Untuk membantu proses pembuatan widget, Pabrik Widget diperkenalkan di jQuery UI, yang menghapus sebagian besar boilerplate yang biasanya terkait dengan pengelolaan widget.

Pabrik Widget jQueryUI hanyalah sebuah fungsi ($ .widget) yang mengambil nama string dan objek sebagai argumen dan membuat plugin jQuery dan "Class" untuk merangkum fungsionalitasnya.

Sintaksis

Berikut ini adalah sintaks dari metode Pabrik Widget jQueryUI -

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

name- Ini adalah string yang berisi namespace dan nama widget (dipisahkan oleh titik) dari widget yang akan dibuat.

base- Widget dasar yang akan diwarisi. Ini harus berupa konstruktor yang dapat dibuat dengan kata kunci `new`. Default-nya adalah jQuery.Widget .

prototype- Objek yang akan digunakan sebagai prototipe widget yang akan diwarisi. Misalnya, jQuery UI memiliki plugin "mouse" yang menjadi dasar plugin interaksi lainnya. Untuk mencapai ini, draggable, droppable, dll semua mewarisi dari plugin mouse seperti: jQuery.widget ("ui.draggable", $ .ui.mouse, {...}); Jika Anda tidak memberikan argumen ini, widget akan mewarisi langsung dari "widget dasar", jQuery.Widget (perhatikan perbedaan antara huruf kecil "w" jQuery.widget dan huruf besar "W" jQuery.Widget).

Widget Dasar

Widget dasar adalah widget yang digunakan oleh pabrik widget.

Pilihan

Tabel berikut mencantumkan opsi berbeda yang dapat digunakan dengan widget dasar -

Sr.No. Opsi & Deskripsi
1 disembunyikan

Opsi ini menonaktifkan widget jika disetel ke true . Secara default nilainya adalahfalse.

Option - disabledhide

Opsi ini menonaktifkan widget jika disetel ke true . Secara default nilainya adalahfalse.

Example

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

Opsi ini menentukan cara menganimasikan penyembunyian elemen. Secara default nilainya adalahnull.

Option - hide

Opsi ini menentukan cara menganimasikan penyembunyian elemen. Secara default nilainya adalahnull.

Ini bisa menjadi tipe -

  • Boolean- Jika disetel ke false, tidak ada animasi yang akan digunakan. Elemen akan menghilang dengan durasi default dan easing default jika disetel ke true .

  • Number - Elemen akan menghilang dengan durasi yang ditentukan dan easing default.

  • String - Elemen akan disembunyikan menggunakan efek yang ditentukan.

  • Object- Jika nilainya adalah sebuah objek, maka efek, penundaan, durasi, dan properti easing dapat disediakan.

Example

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

Opsi ini menentukan cara menganimasikan penampilan elemen. Secara default nilainya adalahnull.

Option - show

Opsi ini menentukan cara menganimasikan penampilan elemen. Secara default nilainya adalahnull.

Ini bisa menjadi tipe -

  • Boolean- Jika disetel ke false, tidak ada animasi yang akan digunakan untuk menampilkan elemen. Elemen akan menghilang dengan durasi default dan easing default jika disetel ke true .

  • Number - Elemen akan menghilang dengan durasi yang ditentukan dan easing default.

  • String - Elemen akan ditampilkan menggunakan efek yang ditentukan.

  • Object- Jika nilainya adalah sebuah objek, maka efek, penundaan, durasi, dan properti easing dapat disediakan.

Example

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

Metode

Tabel berikut mencantumkan metode berbeda yang dapat digunakan dengan widget dasar -

Sr.No. Tindakan & Deskripsi
1 _membuat()

Metode ini adalah konstruktor widget. Tidak ada parameter, tapi this.element dan this.options sudah disetel.

Action - _create()

Tindakan ini benar-benar menghancurkan fungsionalitas akordeon elemen. Elemen-elemen kembali ke keadaan pra-initnya. Metode ini adalah konstruktor widget. Tidak ada parameter, tapi this.element dan this.options sudah disetel.

Example

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

Metode ini memanggil fungsi yang disediakan setelah penundaan yang ditentukan. Mengembalikan ID waktu tunggu untuk digunakan dengan clearTimeout () .

Action - _delay( fn [, delay ] )

Metode ini memanggil fungsi yang disediakan setelah penundaan yang ditentukan. Mengembalikan ID waktu tunggu untuk digunakan dengan clearTimeout () .

Example

this._delay( this._foo, 100 );
3 _menghancurkan()

Metode penghancuran publik () membersihkan semua data umum, kejadian, dll. Dan kemudian mendelegasikan ke metode _destroy () ini untuk pembersihan khusus, khusus widget,.

Action - _destroy()

Metode penghancuran publik () membersihkan semua data umum, kejadian, dll. Dan kemudian mendelegasikan ke metode _destroy () ini untuk pembersihan khusus, khusus widget,.

Example

_destroy: function() {
   this.element.removeClass( "my-widget" );
}
4 _focusable (elemen)

Metode ini menyiapkan elemen untuk menerapkan kelas ui-state-focus pada fokus. Penangan acara secara otomatis dibersihkan saat dihancurkan.

Action - _focusable( element )

Metode ini menyiapkan elemen untuk menerapkan kelas ui-state-focus pada fokus. Penangan acara secara otomatis dibersihkan saat dihancurkan.

Example

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

Semua widget memicu acara pembuatan . Secara default, tidak ada data yang disediakan dalam acara tersebut, tetapi metode ini dapat mengembalikan objek yang akan diteruskan sebagai data kejadian pembuatan.

Action - _getCreateEventData()

Semua widget memicu acara pembuatan . Secara default, tidak ada data yang disediakan dalam acara tersebut, tetapi metode ini dapat mengembalikan objek yang akan diteruskan sebagai data kejadian pembuatan.

Example

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

Metode ini memungkinkan widget untuk menentukan metode kustom untuk menentukan opsi selama pembuatan instance. Opsi yang diberikan pengguna menggantikan opsi yang dikembalikan oleh metode ini, yang menggantikan opsi default.

Action - _getCreateOptions()

Metode ini memungkinkan widget untuk menentukan metode kustom untuk menentukan opsi selama pembuatan instance. Opsi yang diberikan pengguna menggantikan opsi yang dikembalikan oleh metode ini, yang menggantikan opsi default.

Example

_getCreateOptions: function() {
   return { id: this.element.attr( "id" ) };
}
7 _hide (elemen, opsi [, callback])

Metode ini segera menyembunyikan elemen, menggunakan metode animasi bawaan, atau menggunakan efek khusus. Lihat opsi sembunyikan untuk kemungkinan nilai opsi.

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

Metode ini segera menyembunyikan elemen, menggunakan metode animasi bawaan, atau menggunakan efek khusus. Lihat opsi sembunyikan untuk kemungkinan nilai opsi.

Example

this._hide( this.element, this.options.hide, function() {
   $( this ).remove();
});
8 _hoverable (elemen)

Metode ini Menyiapkan elemen untuk menerapkan kelas ui-state-hover pada hover. Penangan acara secara otomatis dibersihkan saat dihancurkan.

Action - _hoverable( element )

Metode ini Menyiapkan elemen untuk menerapkan kelas ui-state-hover pada hover. Penangan acara secara otomatis dibersihkan saat dihancurkan.

Example

this._hoverable( this.element.find( "div" ) );
9 _init ()

Kapan pun plugin dipanggil tanpa argumen atau hanya dengan hash opsi, widget diinisialisasi; ini termasuk saat widget dibuat.

Action - _init()

Kapan pun plugin dipanggil tanpa argumen atau hanya dengan hash opsi, widget diinisialisasi; ini termasuk saat widget dibuat.

Example

_init: function() {
   if ( this.options.autoOpen ) {
      this.open();
   }
}
10 _off (elemen, eventName)

Metode ini melepaskan penangan kejadian dari elemen yang ditentukan.

Action - _off( element, eventName )

Metode ini melepaskan penangan kejadian dari elemen yang ditentukan.

Example

this._off( this.element, "click" );
11 _on ([suppressDisabledCheck] [, elemen], penangan)

Mengikat penangan kejadian ke elemen yang ditentukan. Delegasi didukung melalui penyeleksi di dalam nama acara, misalnya, "klik .foo".

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

Mengikat penangan kejadian ke elemen yang ditentukan. Delegasi didukung melalui penyeleksi di dalam nama acara, misalnya, "klik .foo".

Example

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
   }
});
12 _setOption (kunci, nilai)

Metode ini dipanggil dari metode _setOptions () untuk setiap opsi individu. Status widget harus diperbarui berdasarkan perubahan.

Action - _setOption( key, value )

Metode ini dipanggil dari metode _setOptions () untuk setiap opsi individu. Status widget harus diperbarui berdasarkan perubahan.

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 (opsi)

Metode ini dipanggil setiap kali metode option () dipanggil, terlepas dari bentuk pemanggilan metode option ().

Action - _setOptions( options )

Metode ini dipanggil setiap kali metode option () dipanggil, terlepas dari bentuk pemanggilan metode option ().

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 (elemen, opsi [, callback])

Menampilkan elemen dengan segera, menggunakan metode animasi bawaan, atau menggunakan efek khusus. Lihat opsi pertunjukan untuk kemungkinan nilai opsi.

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

Menampilkan elemen dengan segera, menggunakan metode animasi bawaan, atau menggunakan efek khusus. Lihat opsi pertunjukan untuk kemungkinan nilai opsi.

Example

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

Metode ini memanggil metode dengan nama yang sama dari widget induk, dengan argumen yang ditentukan. Pada dasarnya .call ().

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

Metode ini memanggil metode dengan nama yang sama dari widget induk, dengan argumen yang ditentukan. Pada dasarnya .call ().

Example

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

Memanggil metode dengan nama yang sama dari widget induk, dengan larik argumen.

Action - _superApply( arguments )

Memanggil metode dengan nama yang sama dari widget induk, dengan larik argumen.

Example

_setOption: function( key, value ) {
   if ( key === "title" ) {
      this.element.find( "h3" ).text( value );
   }
   this._superApply( arguments );
}
17 _trigger (type [, event] [, data])

Metode ini memicu peristiwa dan callback terkait. Opsi dengan nama sama dengan tipe dipanggil sebagai callback.

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

Metode ini memicu peristiwa dan callback terkait. Opsi dengan nama sama dengan tipe dipanggil sebagai callback.

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 menghancurkan()

Metode ini menghapus fungsionalitas widget sepenuhnya. Ini akan mengembalikan elemen ke status pra-initnya.

Action - destroy()

Metode ini menghapus fungsionalitas widget sepenuhnya. Ini akan mengembalikan elemen ke status pra-initnya.

Example

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
      this.destroy();
   }
});
19 nonaktifkan ()

Metode ini menonaktifkan widget.

Action - disable()

Metode ini menonaktifkan widget.

Example

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
      this.disable();
   }
});
20 memungkinkan()

Metode ini mengaktifkan widget.

Action - enable()

Metode ini mengaktifkan widget.

Example

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

Metode ini mendapatkan nilai yang saat ini terkait dengan optionName yang ditentukan .

Action - option( optionName )

Metode ini mendapatkan nilai yang saat ini terkait dengan optionName yang ditentukan .

Example

this.option( "width" );
22 pilihan()

Metode ini mendapatkan objek yang berisi pasangan kunci / nilai yang mewakili hash opsi widget saat ini.

Action - option()

Metode ini mendapatkan objek yang berisi pasangan kunci / nilai yang mewakili hash opsi widget saat ini.

Example

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

Metode ini menetapkan nilai opsi widget yang terkait dengan optionName yang ditentukan.

Action - option( optionName, value )

Metode ini menetapkan nilai opsi widget yang terkait dengan optionName yang ditentukan.

Example

this.option( "width", 500 );
24 opsi (opsi)

Metode ini menyetel satu atau lebih opsi untuk widget.

Action - option( options )

Metode ini menyetel satu atau lebih opsi untuk widget.

Example

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

Metode ini mengembalikan objek jQuery yang berisi elemen asli atau elemen terkait lainnya yang dihasilkan.

Action - widget()

Metode ini mengembalikan objek jQuery yang berisi elemen asli atau elemen terkait lainnya yang dihasilkan.

Example

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

Acara

Sr.No. Metode & Deskripsi Acara
1 buat (acara, ui)

Peristiwa ini dipicu saat widget dibuat.

Event - create( event, ui )

Peristiwa ini dipicu saat widget dibuat. Dimana event bertipe Event , dan UI bertipe Object .

Syntax

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

Siklus hidup pabrik widget jQueryUI

Pabrik widget jQueryUI, menyediakan cara berorientasi objek untuk mengelola siklus hidup widget. Aktivitas siklus hidup ini meliputi -

Membuat dan menghancurkan widget: Misalnya,

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

Mengubah opsi widget: Misalnya

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

Melakukan panggilan "super" di widget subclass: Misalnya

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

Notifikasi acara: Misalnya

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

Contoh

Sekarang mari kita buat widget khusus dalam contoh berikut. Kami akan membuat widget tombol. Kami akan melihat cara membuat opsi, metode, dan acara di widget dalam contoh berikut -

Membuat Widget Kustom

Mari kita buat dulu widget khusus sederhana.

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

Mari kita simpan kode di atas dalam file HTML widgetfactoryexample.htm dan membukanya di browser standar yang mendukung javascript, Anda juga harus melihat output berikut -

Menambahkan Opsi ke Widget Kustom

Pada contoh sebelumnya, kami menggunakan fungsi _create untuk membuat kontrol kustom. Tetapi pengguna umumnya ingin menyesuaikan kontrol dengan menyetel dan mengubah opsi. Kita dapat menentukan objek opsi yang menyimpan nilai default untuk semua opsi yang Anda tentukan. Fungsi _setOption digunakan untuk tujuan ini. Ini dipanggil untuk setiap opsi individu yang ditetapkan pengguna. Di sini kami mengatur lebar dan warna latar belakang tombol.

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

Mari kita simpan kode di atas dalam file HTML widgetfactoryexample.htm dan membukanya di browser standar yang mendukung javascript, Anda juga harus melihat output berikut -

Menambahkan Metode ke Widget Khusus

Dalam contoh berikut kami akan menambahkan metode yang dapat digunakan pengguna dan ini sangat mudah untuk dibangun ke dalam kerangka kerja. Kami akan menulis metode Pindah, yang menggeser tombol pada jarak horizontal yang ditentukan. Untuk membuat ini berfungsi, kita juga perlu mengatur posisi dan properti kiri di fungsi _create -

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

Setelah ini, pengguna sekarang dapat memanggil metode Anda dengan cara UI jQuery biasa -

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>

Mari kita simpan kode di atas dalam file HTML widgetfactoryexample.htm dan membukanya di browser standar yang mendukung javascript, Anda juga harus melihat output berikut -

Menambahkan Acara ke Widget Kustom

Dalam contoh ini kami akan mendemonstrasikan cara membuat acara. Untuk membuat acara, yang harus Anda lakukan adalah menggunakan metode _trigger. Parameter pertama adalah nama peristiwa, yang kedua adalah objek peristiwa standar yang ingin Anda teruskan dan yang ketiga adalah objek peristiwa khusus yang ingin Anda teruskan.

Di sini kita menjalankan peristiwa ketika tombol bergerak melebihi x = 400. Yang harus Anda lakukan adalah menambahkan ke fungsi pemindahan -

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

Dalam hal ini acara disebut batas luar dan objek acara kosong diteruskan dengan objek acara khusus yang hanya menyediakan posisi sebagai satu-satunya properti.

Seluruh fungsi gerakan adalah -

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

Pengguna dapat menyetel fungsi penanganan peristiwa hanya dengan menentukan opsi dari nama yang sama.

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

Mari kita simpan kode di atas dalam file HTML widgetfactoryexample.htm dan membukanya di browser standar yang mendukung javascript, sebuah kotak peringatan terbuka.