Bagaimana jQuery UI berfungsi

UI jQuery mengandungi banyak widget yang mengekalkan keadaan, jadi ia berbeza sedikit daripada corak penggunaan pemalam jQuery biasa. Kaedah pemasangan adalah serupa dengan kebanyakan pemalam jQuery Widget UI jQuery dicipta berdasarkan Kilang Widget, yang menyediakan API biasa. Jadi sebaik sahaja anda belajar menggunakan satu, anda tahu cara menggunakan widget lain. Tutorial ini akan memperkenalkan fungsi biasa melalui contoh kod widget bar kemajuan.

Pemasangan

Untuk menjejak status widget, kami mula-mula memperkenalkan kitaran hayat penuh widget. Kitaran hayat bermula apabila widget dipasang. Kami hanya perlu memanggil pemalam pada satu atau lebih elemen, iaitu widget dipasang.

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

Ini akan memulakan setiap elemen dalam objek jQuery, dalam kes ini, id elemen ialah "elem". Kerana kami memanggil kaedah .progressbar() tanpa parameter, widget akan dimulakan dengan pilihan lalainya. Kami boleh lulus satu set pilihan semasa pemasangan, yang mengatasi pilihan lalai.

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

Bilangan pilihan yang diluluskan semasa pemasangan boleh ditentukan mengikut keperluan kami. Mana-mana pilihan yang kami tidak lulus mempunyai nilai lalainya digunakan.

Pilihan adalah sebahagian daripada keadaan widget, jadi kami juga boleh menetapkan pilihan selepas pemasangan. Kami akan memperkenalkan bahagian ini dalam kaedah option seterusnya.

Kaedah

Sekarang widget telah dimulakan, kita boleh menanyakan statusnya atau melakukan tindakan pada widget. Semua tindakan selepas permulaan dilakukan dalam bentuk panggilan kaedah. Untuk memanggil kaedah pada widget, kami boleh menghantar nama kaedah kepada pemalam jQuery. Sebagai contoh, untuk memanggil kaedah value pada widget bar kemajuan, kita harus menggunakan:

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

Jika kaedah menerima parameter, kita boleh lulus parameter selepas nama kaedah. Sebagai contoh, untuk menghantar parameter 40 kepada kaedah value, kita boleh menggunakan:

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

Sama seperti kaedah lain dalam jQuery, kebanyakan kaedah widget mengembalikan objek jQuery untuk pautan.

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

Kaedah awam

Setiap widget mempunyai set kaedah tersendiri berdasarkan fungsi yang disediakan oleh widget. Walau bagaimanapun, terdapat beberapa kaedah yang biasa untuk semua widget.

pilihan

Seperti yang kami nyatakan sebelum ini, kami boleh menukar pilihan selepas permulaan melalui kaedah option. Sebagai contoh, kita boleh menukar nilai bar kemajuan kepada 30 dengan memanggil kaedah option.

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

Perhatikan bahawa ini berbeza daripada contoh sebelumnya yang kami panggil kaedah value. Dalam contoh ini, kami memanggil kaedah option dan menukar pilihan nilai kepada 30.

Kita juga boleh mendapatkan nilai semasa untuk pilihan.

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

Selain itu, kami boleh mengemas kini berbilang pilihan serentak dengan menghantar objek kepada kaedah option.

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

Anda mungkin perasan bahawa kaedah option mempunyai bendera yang sama seperti getter dan setter dalam kod jQuery, seperti .css() dan .attr(). Satu-satunya perbezaan ialah anda mesti lulus rentetan "pilihan" sebagai hujah pertama. Kaedah

lumpuhkan

disable melumpuhkan widget. Dalam contoh bar kemajuan, ini mengubah gaya supaya bar kemajuan kelihatan dilumpuhkan.

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

memanggil kaedah disable adalah bersamaan dengan menetapkan pilihan disabled kepada true. Kaedah

dayakan

enable adalah bertentangan dengan kaedah disable.

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

memanggil kaedah enable adalah bersamaan dengan menetapkan pilihan disabled kepada false.

musnahkan

Jika anda tidak memerlukan widget lagi, anda boleh memusnahkannya dan kembali ke penanda asal. Ini bermakna berakhirnya kitaran hayat widget.

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

Setelah anda memusnahkan widget, anda tidak boleh memanggil sebarang kaedah pada widget itu melainkan anda memulakan widget itu semula. Jika anda ingin mengalih keluar elemen, anda boleh melakukannya terus melalui .remove() atau anda boleh mengubah suai moyang melalui .html() atau .empty() dan widget akan dimusnahkan secara automatik.

widget

Sesetengah widget menjana elemen pembalut atau elemen yang diputuskan sambungan daripada elemen asal. Dalam contoh di bawah, widget akan mengembalikan elemen yang dijana. Dalam keadaan bar kemajuan, tiada pembalut yang dihasilkan dan kaedah widget mengembalikan elemen asal.

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

Acara

Semua widget mempunyai acara yang berkaitan dengan pelbagai gelagatnya untuk memberitahu anda apabila statusnya berubah. Untuk kebanyakan widget, apabila acara dicetuskan, nama itu diawali dengan nama widget. Sebagai contoh, kita boleh mengikat peristiwa perubahan bar kemajuan() untuk mencetuskannya apabila nilai berubah.

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

Setiap acara mempunyai panggilan balik yang sepadan, yang dibentangkan sebagai pilihan. Kita boleh menggunakan change panggil balik bar kemajuan, yang bersamaan dengan mengikat acara progressbarchange.

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

Acara awam

Kebanyakan acara adalah khusus untuk widget dan semua widget mempunyai acara create awam. Acara ini dicetuskan apabila widget dibuat.