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
|
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 -
Example
|
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 -
Example
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
19 | nonaktifkan () Metode ini menonaktifkan widget. Action - disable() Metode ini menonaktifkan widget. Example
|
20 | memungkinkan() Metode ini mengaktifkan widget. Action - enable() Metode ini mengaktifkan widget. Example
|
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
|
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
|
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
|
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
|
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
|
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
|
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.