jQuery UI bekerja

jQuery UI mengandung banyak bagian-bagian kecil untuk mempertahankan negara (Widget), oleh karena itu, sebuah plugin jQuery yang khas menggunakan pola yang sedikit berbeda. instalasi mirip dengan instalasi sebagian besar plugin jQuery, jQuery UI widget berdasarkan bagian perpustakaan (Widget Factory) dibuat perpustakaan widget menyediakan API umum. Jadi, selama Anda belajar bagaimana menggunakan satu, Anda tahu bagaimana menggunakan widget lain (Widget). Tutorial ini akan (progressbar) progress bar contoh kode widget menjelaskan fitur-fitur umum.

memasang

Dalam rangka untuk melacak status komponen, pertama kita memperkenalkan siklus hidup penuh widget. Ketika widget dipasang dan siklus kehidupan dimulai. Kita hanya perlu memanggil plug-in pada satu atau lebih elemen, yaitu widget diinstal.

$( "#elem" ).progressbar();

Ini akan menginisialisasi setiap elemen dalam objek jQuery, dalam hal ini, id elemen sebagai "elem". Karena kita sebut no-argumen .progressbar() metode, widget adalah pilihan default sesuai dengan inisialisasi. Kami dapat melewati serangkaian pilihan pada saat instalasi, sehingga dapat mengabaikan opsi default.

$( "#elem" ).progressbar({ value: 20 });

Banyaknya pilihan ketika menginstal melewati banyak sesuai dengan kebutuhan kita. Kami tidak lulus pilihan Anda menggunakan nilai standar.

Pilihan adalah bagian dari negara anggota kecil, sehingga kami juga dapat mengatur opsi setelah instalasi. Kami akan mengikuti option menjelaskan ini bagian dari metode ini.

cara

Sejak widget telah diinisialisasi, kita bisa query status, atau melakukan tindakan pada widget. Semua tindakan yang dilakukan setelah inisialisasi dalam bentuk panggilan metode. Untuk memanggil metode pada widget, kita dapat melewati nama metode untuk plugin jQuery. Misalnya, untuk memanggil pada progress bar (progressbar) widget value metode, kita harus menggunakan:

$( "#elem" ).progressbar( "value" );

Jika metode ini membutuhkan parameter, kita dapat melewati parameter setelah nama metode. Misalnya, untuk lulus parameter 40 ke value metode, kita bisa menggunakan:

$( "#elem" ).progressbar( "value", 40 );

Seperti metode jQuery lainnya, sebagian besar widget menghubungkan metode mengembalikan objek jQuery.

$( "#elem" )
    .progressbar( "value", 90 )
    .addClass( "almost-done" );

Metode publik

Setiap widget memiliki menetapkan sendiri widget yang menyediakan pendekatan berbasis fungsi. Namun, ada cara yang semua memiliki kesamaan yang widget.

pilihan

Seperti yang telah disebutkan sebelumnya, kita dapat setelah menginisialisasi option untuk mengubah metode seleksi. Sebagai contoh, kita dapat memanggil option untuk mengubah metode progressbar (progress bar) nilai 30.

$( "#elem" ).progressbar( "option", "value", 30 );

Harap dicatat, ini adalah sebelum kita sebut value contoh metode ini berbeda. Dalam contoh ini, kita sebut option metode, pilihan untuk mengubah nilai 30.

Kami juga bisa mendapatkan nilai sekarang dari pilihan.

$( "#elem" ).progressbar( "option", "value" );

Selain itu, kami dapat memberikan option melewati metode objek, memperbarui beberapa pilihan.

$( "#elem" ).progressbar( "option", {
    value: 100,
    disabled: true
});

Anda mungkin telah memperhatikan bahwa option metode memiliki nilai-nilai kode jQuery dan setter bendera yang sama, seperti .css() dan .attr() . Satu-satunya perbedaan adalah bahwa Anda harus lulus string "pilihan" sebagai parameter pertama.

melumpuhkan

disable cara untuk menonaktifkan widget. Dalam progress bar (progressbar) kasus, ini akan mengubah gaya sehingga progress bar dinonaktifkan.

$( "#elem" ).progressbar( "disable" );

Panggilan disable metode setara dengan mengatur disabled opsi true .

memungkinkan

enable metode adalah disable pendekatan yang berlawanan.

$( "#elem" ).progressbar( "enable" );

Memanggil enable metode setara dengan mengatur disabled opsi false .

menghancurkan

Jika Anda tidak perlu lagi widget, Anda dapat menghancurkannya, kembali ke tanda asli. Ini berarti bahwa penghentian siklus hidup widget.

$( "#elem" ).progressbar( "destroy" );

Setelah Anda menghancurkan widget, Anda tidak dapat memanggil metode apapun pada komponen, kecuali jika Anda menginisialisasi ulang widget. Jika Anda ingin menghapus elemen langsung melalui .remove() , juga dapat .html() atau .empty() untuk memodifikasi nenek moyang, widget akan secara otomatis hancur.

widget

Beberapa widget yang dihasilkan pembungkus unsur atau elemen yang terhubung ke elemen asli terputus. Pada contoh berikut, widget pengembalian yang dihasilkan elemen. Dalam progress bar (progressbar) misalnya, tidak menghasilkan bungkusnya, widget metode mengembalikan unsur asli.

$( "#elem" ).progressbar( "widget" );

peristiwa

Acara Semua widget memiliki berbagai perilaku yang terkait dengan mereka, karena ketika perubahan negara membiarkan Anda tahu. Untuk sebagian kecil, ketika acara ini dipicu, nama untuk nama widget sebagai awalan. Sebagai contoh, kita dapat mengikat progress bar () terjadi perubahan, setelah perubahan nilai dipicu.

$( "#elem" ).bind( "progressbarchange", function() {
    alert( "The value has changed!" );
});

Setiap acara memiliki koreksi yang sesuai, sebagai pilihan untuk rendering. Kita dapat menggunakan progress bar (progressbar) yang change callback, yang setara dengan mengikat progressbarchange acara.

$( "#elem" ).progressbar({
    change: function() {
        alert( "The value has changed!" );
    }
});

acara-acara publik

Kebanyakan peristiwa untuk widget tertentu, semua widget memiliki kesamaan create acara. acara ini dipicu ketika widget tersebut dibuat.