Cara menggunakan jQuery UI widget perpustakaan

Kami akan membuat progress bar. Seperti ditunjukkan dalam contoh berikut, yang dengan memanggil jQuery.widget() untuk menyelesaikan, dibutuhkan dua parameter: plug-in nama yang akan dibuat, sebuah teks yang berisi objek adalah fungsi dari plug-in dukungan. Ketika steker disebut, itu menciptakan sebuah plug-in contoh baru, semua fungsi akan dijalankan dalam konteks contoh ini. Ini dua hal penting standar yang berbeda jQuery Plugin. Pertama, konteksnya adalah obyek, bukan elemen DOM. Kedua, konteksnya adalah selalu satu objek, bukan koleksi.

$.widget( "custom.progressbar", {
    _create: function() {
        var progress = this.options.value + "%";
        this.element
            .addClass( "progressbar" )
            .text( progress );
    }
});

Harus berisi nama plugin namespace, dalam contoh ini, kita menggunakan custom namespace. Anda hanya dapat membuat satu lapisan namespace dalam, oleh karena itu, custom.progressbar merupakan plug-in yang efektif nama, very.custom.progressbar tidak plug-in nama yang valid.

Kita melihat bagian perpustakaan (Widget Factory) memberikan kita dengan dua sifat. this.element adalah objek jQuery yang mengandung satu unsur. Jika kita menyebut plug-in jQuery obyek yang berisi beberapa elemen, itu akan membuat plug-in contoh yang terpisah untuk setiap elemen, dan setiap contoh akan memiliki sendiri this.element . Sifat kedua, this.options , adalah plug-in pilihan mencakup semua pasangan nama / nilai kunci hash (hash). Pilihan ini dapat diteruskan untuk plug-in, sebagai berikut:

$( "<div></div>" )
    .appendTo( "body" )
    .progressbar({ value: 20 });

Ketika kita sebut jQuery.widget() , yang dengan memberikan jQuery.fn (digunakan untuk menciptakan sistem plug-in standar) menambahkan fungsi untuk memperpanjang jQuery. Nama fungsi ditambahkan berdasarkan pass Anda jQuery.widget() nama tanpa namespace - "progressbar". Opsi Plug-pass adalah untuk mendapatkan nilai yang ditetapkan dalam contoh Plugin. Seperti ditunjukkan dalam contoh berikut, kita dapat menentukan nilai default untuk setiap pilihan. Ketika merancang API Anda, Anda harus menyadari penggunaan yang paling umum dari plug-in Anda, sehingga Anda dapat mengatur default yang sesuai, dan memastikan bahwa semua pilihan yang benar-benar opsional.

$.widget( "custom.progressbar", {
 
    // Default options.
    options: {
        value: 0
    },
    _create: function() {
        var progress = this.options.value + "%";
        this.element
            .addClass( "progressbar" )
            .text( progress );
    }
});

Memanggil metode plug-in

Sekarang kita dapat menginisialisasi progress bar kami, kami akan melakukan tindakan dengan memanggil metode pada contoh plug-in. Untuk menentukan metode plug-in, kami hanya kami melewati jQuery.widget() referensi ke objek fungsi. Kita juga dapat mendefinisikan metode "pribadi" untuk nama fungsi dengan awalan 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 metode pada contoh plug-in, Anda dapat melewati nama metode untuk plugin jQuery. Jika Anda memanggil metode untuk menerima parameter, Anda hanya lulus nama metode belakang parameter ini.

Catatan: Fungsi jQuery diteruskan ke nama metode yang sama digunakan untuk menginisialisasi plug-in untuk melakukan metode ini. Hal ini dilakukan untuk mencegah pencemaran namespace jQuery sambil mempertahankan metode rantai panggilan. Dalam bab-bab selanjutnya, kita akan melihat kegunaan lain terlihat lebih alami.

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

Gunakan opsi

option() metode secara otomatis disediakan untuk plug-in. option() metode memungkinkan Anda untuk mendapatkan dan pilihan set setelah inisialisasi. Metode seperti jQuery .css() dan .attr() metode: Anda hanya dapat melewati nama sebagai argumen adalah dengan menggunakan, Anda juga dapat mengirimkan nama dan nilai sebagai set menggunakan atau lewat nama / pasangan nilai kunci hash untuk mengatur beberapa nilai. Ketika digunakan sebagai nilai, plug-in mengembalikan nama opsi yang masuk sesuai nilai saat ini. Ketika digunakan sebagai setter, widget _setOption metode akan dipanggil untuk setiap opsi disetel. Kita dapat menentukan plug-in di kami _setOption metode untuk mencerminkan pilihan perubahan. Mengubah opsi untuk tindakan yang akan dilakukan secara independen, kita dapat menimpa _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;
    }
});

Tambahkan callback

Perpanjangan sederhana adalah dengan menambahkan callback sehingga pengguna dapat bereaksi ketika perubahan terjadi di negara plug-in. Kita bisa melihat contoh berikut cara menambahkan panggilan balik ke progress bar ketika progress bar mencapai 100 persen. _trigger() metode mengambil tiga argumen: nama callback, callback acara jQuery mulai objek, dan hash dari data yang terkait dengan acara tersebut. Nama panggilan balik adalah satu-satunya yang diperlukan parameter, tetapi ingin menerapkan fitur kustom pengguna pada plug-in, parameter lain yang sangat berguna. Sebagai contoh, jika kita membuat sebuah plugin draggable, kita dapat melewati mousemove ajang drag ketika memicu callback, yang akan memungkinkan pengguna untuk menanggapi peristiwa berdasarkan objek yang disediakan oleh x / y koordinat drag. Harap dicatat diteruskan ke _trigger() dari peristiwa asli harus menjadi acara jQuery bukannya peristiwa browser native.

$.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 callback dasarnya hanya opsi tambahan, sehingga Anda bisa mendapatkan sama dengan pilihan lain dan mengatur mereka. Setiap kali callback, akan ada acara yang sesuai dipicu. Jenis acara adalah dengan nama dan nama fungsi callback untuk menentukan plug koneksi. Callback dan acara menerima sama dua argumen: sebuah objek acara dan hash dari data yang terkait dengan acara tersebut, terutama seperti yang ditunjukkan dalam contoh berikut. Anda mungkin perlu untuk menyertakan fitur plug-in untuk mencegah pengguna, untuk melakukan hal ini, cara terbaik adalah dengan membuat cinta Anda dapat membatalkan callback. Pengguna dapat membatalkan callback atau acara yang berhubungan dengan penduduk asli mencabut acara apapun dengan mereka, mereka dengan memanggil event.preventDefault() atau kembali false untuk mencapai. Jika Anda mencabut callback, _trigger() metode akan kembali false , sehingga Anda dapat mencapai fungsi yang tepat di plug-in.

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

alam

Sekarang kita telah melihat bagaimana menggunakan perpustakaan widget (Widget Factory) untuk membuat plug-in, mari kita lihat bagaimana benar-benar bekerja. Ketika Anda memanggil jQuery.widget() , itu menciptakan fungsi constructor untuk plug-in dan menetapkan contoh plugin dilewatkan sebagai objek prototipe. Semua fungsi secara otomatis ditambahkan ke widget berasal dari widget dasar prototipe, yang didefinisikan sebagai jQuery.Widget.prototype . Bila Anda membuat plug-in misalnya akan digunakan jQuery.data menyimpannya pada elemen DOM asli, plug-in nama sebagai nama kunci.

Karena contoh Plugin langsung terkait dengan elemen DOM, Anda dapat langsung mengakses plug-in contoh, tanpa perlu melintasi metode plug-in. Metode ini akan memungkinkan Anda untuk menghubungi langsung pada contoh plug-in, tanpa perlu melewati string nama metode, dan Anda juga dapat mengakses properti secara langsung pasang.

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 dapat membuat sebuah instance dari plug-in tanpa metode traversal, dan pilihan untuk memanggil elemen konstruktor langsung:

var bar = $.custom.progressbar( {}, $( "<div></div>" ).appendTo( "body") );
 
// Same result as before.
alert( bar.options.value );

Perpanjangan prototipe

konstruktor widget dan prototipe keuntungan terbesar adalah ekstensi mudah. Dengan menambahkan atau memodifikasi prototipe metode steker, kita dapat memodifikasi perilaku widget dari semua kasus. Sebagai contoh, jika kita ingin menambahkan metode untuk progress bar untuk me-reset kemajuan 0%, kita dapat menambahkan metode ini untuk prototipe, yang akan meminta semua plug-in misalnya.

$.custom.progressbar.prototype.reset = function() {
    this._setOption( "value", 0 );
};

Untuk widget diperpanjang untuk rincian lebih lanjut dan cara membuat widget baru pada ada widget lebih rinci, lihat widget diperpanjang (Widget) oleh anggota perpustakaan (Widget Factory) .

membersihkan

Dalam beberapa kasus, aplikasi ini memungkinkan pengguna untuk plug-in, dan kemudian membatalkan aplikasi. Anda dapat _destroy() untuk melakukan metode ini. Dalam _destroy() dalam metode, Anda harus mencabut semua tindakan selama inisialisasi dan pasca-penggunaan plug-in dilakukan. _destroy() oleh .destroy() metode ini disebut, .destroy() metode adalah plug-in contoh ketika menghapus sebuah elemen dari binding DOM disebut secara otomatis, sehingga dapat digunakan untuk pengumpulan sampah. Dasar .destroy() metode juga biasa digunakan untuk menangani beberapa operasi pembersihan, seperti menghapus elemen DOM dari contoh widget dikutip, memperlonggar widget namespace semua peristiwa dari unsur-unsur, menggunakan memperlonggar semua _bind() menambahkan acara.

$.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 catatan

Perpustakaan komponen (Widget Pabrik) adalah cara untuk membuat negara untuk steker. Ada berbagai model lainnya dapat digunakan, dan masing-masing memiliki kelebihan dan kekurangan tersendiri. Perpustakaan komponen (Widget Factory) memecahkan banyak masalah umum, dan sangat meningkatkan efisiensi, tetapi juga sangat meningkatkan usabilitas kode, sehingga cocok untuk jQuery UI dan negara lain dari plug-in.

Perhatikan bahwa dalam bagian ini kita menggunakan custom namespace. ui namespace dicadangkan resmi jQuery UI Plugin. Ketika membuat Anda sendiri plug-in, Anda harus membuat namespace Anda sendiri. Sehingga untuk lebih jelas dari mana konektor, yang termasuk jangkauan.