Latest web development tutorials

jQuery UI widget melalui ekspansi widget perpustakaan

jQuery UI widget perpustakaan (Widget Factory) membuatnya lebih mudah untuk membuat widget, mereka widget memperluas fungsionalitas dari widget yang ada. Dengan cara ini Anda dapat membuat atas dasar widget kuat yang ada, Anda juga dapat melakukan penyesuaian baik pada fungsi widget yang ada.

Catatan: Sebelum mempelajari bab ini, Anda perlu memahami apa perpustakaan widget (Widget Factory), dan bagaimana cara kerjanya. Jika Anda tidak akrab dengan pengetahuan ini, jadi harap meninjau bagaimana menggunakan bagian perpustakaan (Widget Factory) bagian.

Buat ekstensi widget

Membuat widget dengan widget perpustakaan (Widget Pabrik) sampai $.widget() dilewatkan nama widget dan objek prototipe untuk menyelesaikan. Contoh berikut adalah untuk menciptakan sebuah "superDialog" widget di "kebiasaan" namespace. 

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

Untuk mendukung ekspansi, $.widget() Opsional diterima sebagai anggota untuk menggunakan induk widget konstruktor. Ketika menentukan anggota orangtua ketika dilewatkan sebagai argumen kedua, nama widget di belakang, di depan objek widget prototipe.

Seperti contoh di atas, berikut juga harus membuat "superDialog" widget di "kebiasaan" namespace. Tapi transfer ini adalah jQuery UI dialog (dialog) widget konstruktor ( $.ui.dialog ), merupakan superDialog widget harus menggunakan dialog (dialog) widget jQuery UI sebagai anggota induk. 

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

Di sini, superDialog dua dan widget dialog pada dasarnya sama, hanya nama yang berbeda dan namespace saja. Agar widget baru fitur kita lebih kita dapat menambahkan beberapa metode untuk objek prototipe.

Widget objek prototipe akan diteruskan ke $.widget() argumen terakhir. Sejauh ini, contoh kita menggunakan objek null. Sekarang mari kita menambahkan metode untuk objek: 

$.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" );

Sekarang superDialog memiliki red() metode, yang akan mengubah warna merah teksnya. Harap dicatat bahwa anggota perpustakaan (Widget Factory) adalah bagaimana untuk secara otomatis mengatur this sebagai contoh objek widget. Untuk daftar semua properti dan metode yang tersedia pada contoh, mengunjungi perpustakaan anggota (Widget Factory) dokumentasi API .

Memperpanjang metode yang ada

Kadang-kadang, Anda perlu menyesuaikan perilaku komponen yang ada atau menambahkan metode. Anda dapat menentukan nama nama metode metode pada prototipe objek kebutuhan untuk reload. Contoh berikut menimpa dialog (dialog) dari open() metode . Karena kotak dialog diaktifkan secara default, ketika Anda menjalankan kode ini, "open" itu akan disimpan. 

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

Ketika Anda menjalankan kode ini, ada masalah. Karena kita kelebihan beban open() perilaku default, sehingga dialog (dialog) tidak lagi ditampilkan pada layar.

Ketika kita menggunakan objek prototipe, kita sebenarnya tumpang tindih metode asli, menggunakan metode baru dalam rantai prototipe.

Agar orang tua metode perakitan yang tersedia, perpustakaan anggota (Widget Factory) menyediakan dua metode - _super() dan _superApply() .

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

_super() dan _superApply() panggilan dengan cara yang sama sebagai komponen induk. Perhatikan contoh berikut. Seperti contoh terakhir, yang kelebihan beban open() metode untuk merekam "open" . Namun, ini berjalan _super() disebut dialog (dialog) dari open() kotak dialog Open, dan. 

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

_super() dan _superApply() hampir identik dengan aslinya Function.prototype.call() dan Function.prototype.apply() metode. Oleh karena itu, _super() menerima daftar parameter, _superApply() menerima sebuah array sebagai parameter. Contoh berikut menunjukkan bahwa berbeda 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 );
    }
});

mendefinisikan widget

jQuery UI 1.9 menambahkan mendefinisikan fungsi widget. Oleh karena itu, Anda tidak dapat membuat widget baru, kita hanya perlu melewati $.widget() sehingga nama widget yang ada dan konstruktor. Berikut contoh dalam open() untuk menambahkan catatan yang sama, tapi tidak dengan menciptakan widget baru untuk menyelesaikan. 

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

Melalui metode ini, kita dapat memperpanjang bagian kecil dari metode yang ada, namun Anda masih dapat menggunakan _super() untuk mengakses metode asli - ini bukan dengan menciptakan widget baru untuk menyelesaikan, tapi yang langsung mendefinisikan widget bisa.

Widget (widget) dan polimorfisme (Polimorfisme)

Ketika diperpanjang antara widget dan plug-in untuk berinteraksi dengan waktu mereka, perlu dicatat bahwa anggota konektor tidak dapat digunakan untuk memanggil elemen metode orangtua subassembly. Contoh berikut menunjukkan ini. 

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

Contoh di atas, anggota induk dari plug-in, dialog() , Anda tidak dapat memanggil elemen superDialog di close() metode. Untuk informasi lebih lanjut hubungi metode widget, lihat widget (Widget) metode panggilan .

Contoh kustom yang dipersonalisasi

Sejauh ini, kita telah melihat contoh metode ekstensi widget prototipe. Pada prototipe metode kelebihan beban mempengaruhi semua contoh widget.

Untuk menggambarkan hal ini, perhatikan contoh berikut. dialog (dialog) dua kekuatan menggunakan sama open() metode. 

$.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();

Kadang-kadang, Anda hanya perlu mengubah perilaku contoh dari widget. Untuk melakukan ini, Anda perlu menggunakan normal atribut tugas JavaScript, mendapatkan referensi untuk contoh dan mengganti metode ini. Sebagai contoh spesifik yang ditunjukkan di bawah. 

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

Overload personalisasi Teknis adalah contoh sempurna dari kustomisasi satu kali.