Bagaimana jQuery UI menggunakan perpustakaan widget
Kami akan mencipta bar kemajuan. Seperti yang ditunjukkan dalam contoh di bawah, ini boleh dilakukan dengan memanggil jQuery.widget() dengan dua parameter: nama pemalam yang akan dibuat dan objek literal yang mengandungi fungsi yang menyokong pemalam. Apabila pemalam dipanggil, ia akan mencipta contoh pemalam baharu dan semua fungsi akan dilaksanakan dalam konteks kejadian itu. Ini berbeza daripada pemalam jQuery standard dalam dua cara penting. Pertama, konteks ialah objek, bukan elemen DOM. Kedua, konteks sentiasa objek tunggal, bukan koleksi.
$.widget( "custom.progressbar", {
_create: function() {
var progress = this.options.value + "%";
this.element
.addClass( "progressbar" )
.text( progress );
}
});Nama pemalam mesti termasuk ruang nama Dalam contoh ini, kami menggunakan ruang nama custom. Anda hanya boleh mencipta ruang nama sedalam satu tahap, jadi custom.progressbar ialah nama pemalam yang sah dan very.custom.progressbar bukan nama pemalam yang sah.
Kami melihat bahawa Kilang Widget menyediakan kami dengan dua sifat. this.element ialah objek jQuery yang mengandungi elemen. Jika pemalam kami dipanggil pada objek jQuery yang mengandungi berbilang elemen, tika pemalam yang berasingan akan dibuat untuk setiap elemen dan setiap tika akan mempunyai this.elementnya sendiri. Atribut kedua, this.options, ialah cincang pasangan kunci/nilai yang mengandungi semua pilihan pemalam. Pilihan ini boleh dihantar kepada pemalam seperti ini:
$( "<div></div>" )
.appendTo( "body" )
.progressbar({ value: 20 });Apabila kita memanggil jQuery.widget(), ia memanjangkan jQuery dengan menambahkan fungsi pada jQuery.fn (sistem yang digunakan untuk mencipta pemalam standard). Nama fungsi yang ditambahkan adalah berdasarkan nama yang anda berikan kepada jQuery.widget() tanpa ruang nama - "progressbar". Pilihan yang dihantar kepada pemalam mendapatkan nilai yang ditetapkan dalam contoh pemalam. Seperti yang ditunjukkan dalam contoh di bawah, kami boleh menentukan nilai lalai untuk mana-mana pilihan. Apabila mereka bentuk API anda, anda harus mengetahui kes penggunaan yang paling biasa untuk pemalam anda supaya anda boleh menetapkan lalai yang sesuai dan pastikan anda menjadikan semua pilihan benar-benar pilihan.
$.widget( "custom.progressbar", {
// Default options.
options: {
value: 0
},
_create: function() {
var progress = this.options.value + "%";
this.element
.addClass( "progressbar" )
.text( progress );
}
});Kaedah pemalam panggilan
Sekarang kita boleh memulakan bar kemajuan kita, kita akan melakukan tindakan dengan memanggil kaedah pada contoh pemalam. Untuk menentukan kaedah pemalam, kami hanya merujuk fungsi dalam objek yang kami hantar ke jQuery.widget(). Kita juga boleh mentakrifkan kaedah "peribadi" dengan memberi awalan nama fungsi dengan garis bawah.
$.widget( "custom.progressbar", {
options: {
value: 0
},
_create: function() {
var progress = this.options.value + "%";
this.element
.addClass( "progressbar" )
.text( progress );
},
// Create a public method.
value: function( value ) {
// No value passed, act as a getter.
if ( value === undefined ) {
return this.options.value;
}
// Value passed, act as a setter.
this.options.value = this._constrain( value );
var progress = this.options.value + "%";
this.element.text( progress );
},
// Create a private method.
_constrain: function( value ) {
if ( value > 100 ) {
value = 100;
}
if ( value < 0 ) {
value = 0;
}
return value;
}
});Untuk memanggil kaedah pada contoh pemalam, anda menghantar nama kaedah kepada pemalam jQuery. Jika kaedah yang anda panggil menerima parameter, anda hanya lulus parameter tersebut selepas nama kaedah.
Nota: Laksanakan kaedah dengan menghantar nama kaedah kepada fungsi jQuery yang sama yang digunakan untuk memulakan pemalam. Ini dilakukan untuk mengelakkan pencemaran ruang nama jQuery sambil mengekalkan panggilan kaedah berantai. Kemudian dalam bab ini, kita akan melihat kegunaan lain yang kelihatan lebih semula jadi.
var bar = $( "<div></div>" )
.appendTo( "body" )
.progressbar({ value: 20 });
// Get the current value.
alert( bar.progressbar( "value" ) );
// Update the value.
bar.progressbar( "value", 50 );
// Get the current value again.
alert( bar.progressbar( "value" ) );Pilihan penggunaan
option() kaedah disediakan secara automatik kepada pemalam. Kaedah option() membolehkan anda mendapatkan dan menetapkan pilihan selepas permulaan. Kaedah ini seperti kaedah .css() dan .attr() jQuery: anda boleh menghantar hanya nama untuk digunakan sebagai penilai, anda boleh menghantar nama dan nilai untuk digunakan sebagai penetap, atau anda boleh menghantar nama kunci/pasangan nilai kunci . untuk menetapkan berbilang nilai. Apabila digunakan sebagai penilai, pemalam akan mengembalikan nilai semasa pilihan yang sepadan dengan nama yang dihantar. Apabila digunakan sebagai penetap, kaedah _setOption pemalam akan dipanggil untuk setiap pilihan yang ditetapkan. Kami boleh menentukan kaedah _setOption dalam pemalam kami untuk bertindak balas terhadap perubahan pilihan. Untuk tindakan yang menukar pilihan untuk dilakukan secara bebas, kami boleh membebankan _setOptions.
$.widget( "custom.progressbar", {
options: {
value: 0
},
_create: function() {
this.options.value = this._constrain(this.options.value);
this.element.addClass( "progressbar" );
this.refresh();
},
_setOption: function( key, value ) {
if ( key === "value" ) {
value = this._constrain( value );
}
this._super( key, value );
},
_setOptions: function( options ) {
this._super( options );
this.refresh();
},
refresh: function() {
var progress = this.options.value + "%";
this.element.text( progress );
},
_constrain: function( value ) {
if ( value > 100 ) {
value = 100;
}
if ( value < 0 ) {
value = 0;
}
return value;
}
});Tambah panggil balik
Cara paling mudah untuk melanjutkan pemalam ialah menambah panggilan balik supaya pengguna boleh bertindak balas apabila keadaan pemalam berubah. Kita boleh melihat contoh berikut tentang cara menambah panggilan balik pada bar kemajuan apabila kemajuan mencapai 100%. Kaedah _trigger() mengambil tiga parameter: nama panggil balik, objek acara jQuery yang memulakan panggilan balik dan cincang data yang dikaitkan dengan acara. Nama panggil balik ialah satu-satunya parameter yang diperlukan, tetapi parameter lain berguna untuk pengguna yang ingin melaksanakan fungsi tersuai pada pemalam. Sebagai contoh, jika kita mencipta pemalam boleh seret, kita boleh lulus acara mousemove apabila panggilan balik seret dicetuskan, yang akan membolehkan pengguna bertindak balas terhadap seretan berdasarkan koordinat x/y yang disediakan oleh objek acara. Ambil perhatian bahawa acara asal yang dihantar kepada _trigger() mestilah acara jQuery, bukan acara penyemak imbas asli.
$.widget( "custom.progressbar", {
options: {
value: 0
},
_create: function() {
this.options.value = this._constrain(this.options.value);
this.element.addClass( "progressbar" );
this.refresh();
},
_setOption: function( key, value ) {
if ( key === "value" ) {
value = this._constrain( value );
}
this._super( key, value );
},
_setOptions: function( options ) {
this._super( options );
this.refresh();
},
refresh: function() {
var progress = this.options.value + "%";
this.element.text( progress );
if ( this.options.value == 100 ) {
this._trigger( "complete", null, { value: 100 } );
}
},
_constrain: function( value ) {
if ( value > 100 ) {
value = 100;
}
if ( value < 0 ) {
value = 0;
}
return value;
}
});Fungsi panggil balik pada asasnya hanyalah pilihan tambahan, jadi anda boleh mendapatkan dan menetapkannya sama seperti pilihan lain. Apabila panggilan balik dilaksanakan, acara yang sepadan akan dicetuskan. Jenis acara ditentukan oleh nama pemalam sambungan dan nama fungsi panggil balik. Kedua-dua panggilan balik dan peristiwa menerima dua parameter yang sama: objek acara dan cincang data yang dikaitkan dengan acara, seperti ditunjukkan dalam contoh di bawah. Pemalam anda mungkin perlu menyertakan kefungsian yang menghalang pengguna daripada menggunakannya dan cara terbaik untuk melakukan ini ialah membuat panggilan balik yang boleh dibatalkan. Pengguna boleh membatalkan panggilan balik atau acara berkaitan sama seperti mereka boleh membatalkan sebarang acara asli, dengan memanggil event.preventDefault() atau kembali false. Jika pengguna membatalkan panggilan balik, kaedah _trigger() akan mengembalikan false supaya anda boleh melaksanakan fungsi yang sesuai dalam pemalam.
var bar = $( "<div></div>" )
.appendTo( "body" )
.progressbar({
complete: function( event, data ) {
alert( "Callbacks are great!" );
}
})
.bind( "progressbarcomplete", function( event, data ) {
alert( "Events bubble and support many handlers for extreme flexibility." );
alert( "The progress bar value is " + data.value );
});
bar.progressbar( "option", "value", 100 );Essence
Sekarang kita telah melihat cara mencipta pemalam menggunakan Kilang Widget, mari lihat cara ia berfungsi sebenarnya. Apabila anda memanggil jQuery.widget() ia akan mencipta pembina untuk pemalam dan menetapkan objek yang anda hantar sebagai prototaip untuk contoh pemalam. Semua fungsi yang ditambahkan secara automatik pada pemalam datang daripada prototaip widget asas, yang ditakrifkan sebagai jQuery.Widget.prototype. Apabila tika pemalam dicipta, ia disimpan pada elemen DOM asal menggunakan jQuery.data dengan nama pemalam sebagai kunci.
Memandangkan tika pemalam dipautkan terus ke elemen DOM, anda boleh mengakses tika pemalam secara terus tanpa melalui kaedah pemalam. Ini akan membolehkan anda memanggil kaedah terus pada contoh pemalam tanpa menghantar nama kaedah sebagai rentetan, dan anda juga akan mempunyai akses terus kepada sifat pemalam.
var bar = $( "<div></div>" ) .appendTo( "body" ) .progressbar() .data( "progressbar" ); // Call a method directly on the plugin instance. bar.option( "value", 50 ); // Access properties on the plugin instance. alert( bar.options.value );
Anda juga boleh membuat contoh tanpa melintasi kaedah pemalam dan hanya memanggil pembina terus dengan pilihan dan elemen:
var bar = $.custom.progressbar( {}, $( "<div></div>" ).appendTo( "body") );
// Same result as before.
alert( bar.options.value );Melanjutkan prototaip pemalam
Kelebihan terbesar pemalam yang mempunyai pembina dan prototaip adalah ia mudah untuk dilanjutkan. Dengan menambah atau mengubah suai kaedah pada prototaip pemalam, kami boleh mengubah suai gelagat semua tika pemalam. Contohnya, jika kami ingin menambah kaedah pada bar kemajuan yang menetapkan semula kemajuan kepada 0%, kami boleh menambah kaedah ini pada prototaip dan ia boleh dipanggil pada semua kejadian pemalam.
$.custom.progressbar.prototype.reset = function() {
this._setOption( "value", 0 );
};Untuk butiran lanjut tentang memanjangkan widget, dan cara mencipta widget baharu di atas widget sedia ada, lihat melalui widget Kilang Widget ) sambungan widget (Widget) .
Pembersihan
Benarkan pengguna menggunakan pemalam dan kemudian menyahgunakannya dalam keadaan tertentu. Anda boleh melakukan ini melalui kaedah _destroy(). Di dalam kaedah _destroy(), anda harus membuat asal semua tindakan yang dilakukan oleh pemalam semasa pemulaan dan penggunaan kemudian. _destroy() dipanggil melalui kaedah .destroy(), yang dipanggil secara automatik apabila elemen yang terikat pada tika pemalam dialih keluar daripada DOM, jadi ini boleh digunakan untuk pengumpulan sampah. Kaedah .destroy() asas juga mengendalikan beberapa operasi pembersihan biasa, seperti mengalih keluar rujukan contoh daripada elemen DOM widget, menyahjilid semua acara dalam ruang nama widget daripada elemen dan menyahikat semua acara yang ditambahkan menggunakan acara .destroy(). _bind()
$.widget( "custom.progressbar", {
options: {
value: 0
},
_create: function() {
this.options.value = this._constrain(this.options.value);
this.element.addClass( "progressbar" );
this.refresh();
},
_setOption: function( key, value ) {
if ( key === "value" ) {
value = this._constrain( value );
}
this._super( key, value );
},
_setOptions: function( options ) {
this._super( options );
this.refresh();
},
refresh: function() {
var progress = this.options.value + "%";
this.element.text( progress );
if ( this.options.value == 100 ) {
this._trigger( "complete", null, { value: 100 } );
}
},
_constrain: function( value ) {
if ( value > 100 ) {
value = 100;
}
if ( value < 0 ) {
value = 0;
}
return value;
},
_destroy: function() {
this.element
.removeClass( "progressbar" )
.text( "" );
}
});Tutup ulasanWidget Factory hanyalah satu cara untuk mencipta pemalam stateful. Terdapat beberapa model lain yang tersedia, masing-masing dengan kekuatan dan kelemahan mereka sendiri. Kilang widget menyelesaikan banyak masalah biasa dan sangat meningkatkan kecekapan Ia juga meningkatkan kebolehgunaan semula kod, menjadikannya sesuai untuk UI jQuery dan pemalam stateful yang lain. Sila ambil perhatian bahawa dalam bahagian ini kami menggunakan ruang nama custom. Ruang nama ui dikhaskan oleh pemalam UI jQuery rasmi. Apabila membuat pemalam anda sendiri, anda harus mencipta ruang nama anda sendiri. Ini akan menjadikannya lebih jelas dari mana pemalam itu berasal dan skop yang dimilikinya.
