Widget sambungan UI jQuery

Kilang Widget UI jQuery memudahkan untuk mencipta widget yang memanjangkan fungsi widget sedia ada. Dengan cara ini, anda boleh mencipta widget berkuasa berdasarkan yang sedia ada, dan anda juga boleh membuat pelarasan halus pada fungsi widget sedia ada.

Nota: Sebelum mempelajari bab ini, anda perlu memahami apa itu kilang widget dan cara ia berfungsi. Jika anda tidak biasa dengan pengetahuan ini, sila lihat bab Cara Menggunakan Kilang Widget terlebih dahulu.

Membuat sambungan widget

Mencipta widget melalui Kilang Widget dilakukan dengan menghantar nama widget dan objek prototaip ke $.widget(). Contoh berikut mencipta widget "superDialog" dalam ruang nama "custom".

$.widget( "custom.superDialog", {} );

Untuk menyokong sambungan, $.widget() secara pilihan menerima pembina widget untuk digunakan sebagai widget induk. Apabila menentukan widget induk, hantarkannya sebagai hujah kedua, selepas nama widget dan sebelum objek prototaip widget.

Sama seperti contoh di atas, kami juga akan mencipta widget "superDialog" dalam ruang nama "custom". Tetapi kali ini apa yang diluluskan ialah pembina ($.ui.dialog) widget dialog UI jQuery, menunjukkan bahawa widget superDialog harus menggunakan widget dialog UI jQuery sebagai widget induk.

$.widget( "custom.superDialog", $.ui.dialog, {} );

Di sini, dua widget superDialog dan dialog pada dasarnya adalah setara, kecuali nama dan ruang nama mereka berbeza. Untuk menjadikan widget baharu kami lebih tersendiri, kami boleh menambah beberapa kaedah pada objek prototaipnya.

Objek prototaip widget ialah parameter terakhir yang dihantar ke $.widget(). Setakat ini, contoh kami telah menggunakan objek kosong. Sekarang mari tambahkan kaedah pada objek ini:

$.widget( "custom.superDialog", $.ui.dialog, {
    red: function() {
        this.element.css( "color", "red" );
    }
});
 
// Create a new <div>, convert it into a superDialog, and call the red() method.
$( "<div>I am red</div>" )
    .superDialog()
    .superDialog( "red" );

Kini superDialog mempunyai kaedah red(), yang akan menukar warna teksnya kepada merah. Perhatikan cara Kilang Widget secara automatik menetapkan this kepada contoh widget. Untuk senarai semua kaedah dan sifat yang tersedia pada contoh, lawati dokumentasi API Kilang Widget.

Melanjutkan kaedah sedia ada

Kadangkala, anda perlu melaraskan atau menambah gelagat pada kaedah widget sedia ada. Anda boleh menentukan nama kaedah sebagai nama kaedah yang perlu ditindih pada objek prototaip. Contoh berikut melebihkan kaedah dialog open(). Memandangkan dialog dibuka secara lalai, "open" akan dilog apabila kod ini dijalankan.

$.widget( "custom.superDialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
    }
});
 
// Create a new <div>, and convert it into a superDialog.
$( "<div>" ).superDialog();

Apabila menjalankan kod ini, terdapat masalah. Memandangkan kami mengatasi kelakuan lalai open(), dialog tidak lagi dipaparkan pada skrin.

Apabila kita menggunakan kaedah pada objek prototaip, kita sebenarnya melebihkan kaedah asal dan menggunakan kaedah baharu dalam rantaian prototaip.

Untuk menyediakan kaedah widget induk, kilang widget menyediakan dua kaedah - _super() dan _superApply().

Gunakan _super() dan _superApply() untuk mengakses widget induk

_super() dan _superApply() panggil kaedah yang sama dalam widget induk. Lihat contoh di bawah. Sama seperti contoh sebelumnya, contoh ini juga membebankan kaedah open() untuk merekod "open". Walau bagaimanapun, kali ini menjalankan _super() memanggil dialog open() dan membuka dialog.

$.widget( "custom.superDialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
 
        // Invoke the parent widget's open().
        return this._super();
    }
});
 
$( "<div>" ).superDialog();

_super() dan _superApply() berkesan bersamaan dengan kaedah Function.prototype.call() dan Function.prototype.apply() asal. Jadi, _super() menerima senarai argumen dan _superApply() menerima tatasusunan sebagai argumen. Contoh berikut menunjukkan perbezaan antara keduanya.

$.widget( "custom.superDialog", $.ui.dialog, {
    _setOption: function( key, value ) {
 
        // Both invoke dialog's setOption() method. _super() requires the arguments
        // be passed as an argument list, _superApply() as a single array.
        this._super( key, value );
        this._superApply( arguments );
    }
});

Tentukan semula widget

jQuery UI 1.9 menambah keupayaan untuk mentakrifkan semula widget. Oleh itu, daripada mencipta widget baharu, kami hanya perlu menghantar $.widget() nama dan pembina widget sedia ada. Contoh di bawah menambah rekod yang sama di dalam open(), tetapi bukan dengan membuat widget baharu.

$.widget( "ui.dialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
        return this._super();
    }
});
 
$( "<div>" ).dialog();

Dengan kaedah ini, kita boleh melanjutkan kaedah widget sedia ada, tetapi masih menggunakan _super() untuk mengakses kaedah asal - ini tidak dilakukan dengan mencipta widget baharu, tetapi Hanya tentukan semula widget secara langsung.

Widget dan Polimorfisme

Apabila berinteraksi antara sambungan widget dan pemalamnya, adalah penting untuk ambil perhatian bahawa pemalam widget induk tidak boleh digunakan untuk memanggil kaedah pada elemen widget anak . Contoh berikut menunjukkan ini.

$.widget( "custom.superDialog", $.ui.dialog, {} );
 
var dialog = $( "<div>" ).superDialog();
 
// This works.
dialog.superDialog( "close" );
 
// This doesn't.
dialog.dialog( "close" );

Dalam contoh di atas, pemalam widget induk, dialog(), tidak boleh memanggil kaedah close() pada elemen superDialog. Untuk mengetahui lebih lanjut mengenai memanggil kaedah widget, lihat Kaedah Widget Memanggil.

Contoh Pemperibadian Tersuai

Contoh yang telah kita lihat setakat ini semuanya mempunyai kaedah yang meluas pada prototaip widget. Kaedah terlebih beban pada prototaip menjejaskan semua kejadian widget.

Untuk menunjukkan perkara ini, lihat contoh di bawah. Kedua-dua belah dialog menggunakan kaedah open() yang sama.

$.widget( "ui.dialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
        return this._super();
    }
});
 
// Create two dialogs, both use the same open(), therefore "open" is logged twice.
$( "<div>" ).dialog();
$( "<div>" ).dialog();

Kadangkala anda hanya perlu menukar gelagat tika tertentu widget. Untuk melakukan ini, anda perlu menggunakan tugasan sifat JavaScript biasa, mendapatkan rujukan kepada contoh dan mengatasi kaedah tersebut. Butirannya ditunjukkan dalam contoh berikut.

var dialogInstance = $( "<div>" )
    .dialog()
    // Retrieve the dialog's instance and store it.
    .data( "ui-dialog" );
 
// Override the close() method for this dialog
dialogInstance.close = function() {
    console.log( "close" );
};
 
// Create a second dialog
$( "<div>" ).dialog();
 
// Select both dialogs and call close() on each of them.
// "close" will only be logged once.
$( ":data(ui-dialog)" ).dialog( "close" );

Teknik kaedah terlampau beban untuk keadaan diperibadikan sesuai untuk penyesuaian sekali sahaja.