Adakah terdapat dialog dalam jquery?

Terdapat dialog dalam jquery dialog ialah komponen UI pustaka UI jQuery Kelebihan menggunakan komponen ini ialah anda tidak perlu memuat semula halaman web secara langsung untuk membenarkan pengguna memasukkan maklumat apabila menggunakan komponen ini, anda bukan sahaja perlu memperkenalkan jquery, serta js dan fail css berkaitan yang memperkenalkan jQueryUI.

Persekitaran pengendalian tutorial ini: sistem windows10, versi jquery3.2.1, komputer Dell G3.

Adakah terdapat dialog dalam jquery?

Dialog ialah komponen UI bagi perpustakaan UI jQuery, jadi apabila menggunakan dialog, anda bukan sahaja perlu memperkenalkan jQuery.js (kerana ia adalah hanya rangka kerja asas yang ringan), anda juga perlu memperkenalkan jQueryUI js dan fail css yang berkaitan

Kelebihan menggunakan dialog ialah tidak perlu memuat semula halaman web dan lapisan div akan muncul terus ke membolehkan pengguna memasukkan maklumat. Ia juga lebih senang digunakan.

jquery ui-dialog masih digunakan secara meluas dalam pembangunan web. Contoh yang paling biasa ialah pelaksanaan fungsi log masuk.

Contohnya adalah seperti berikut:

Pelaksanaan paling mudah ialah mengkonfigurasi kotak dialog dalam kaedah sedia jquery. Contohnya:

 $("#dialogDiv").dialog();

Tetapi ini tidak memenuhi keperluan kami, jadi kami perlu memahami sifat dan kaedah umumnya. Ini ialah konfigurasi dalam demo saya. Seperti berikut:

$("#dialogDiv").dialog({
autoOpen : false,   // 是否自动弹出窗口
modal : true,    // 设置为模态对话框
resizable : true,
width : 410,   //弹出框宽度
height : 240,   //弹出框高度
title : "用户登录",  //弹出框标题
position : "center",  //窗口显示的位置
buttons:{
'确定':function(){
//调用登录的方法
},
'取消':function(){
$(this).dialog("close");
}
}
});

Nota: "dialogDiv" mewakili id ​​elemen.

Atribut biasa

autoBuka: Apabila atribut ini benar, tetingkap dialog akan dibuka secara automatik apabila dialog dipanggil. Apabila atribut palsu, tetingkap pada mulanya tersembunyi, dan tetingkap dialog muncul apabila dialog("terbuka") dipanggil. Lalai: benar.

kedudukan: kedudukan paparan dialog: ia boleh menjadi 'tengah', 'kiri', 'kanan', 'atas', 'bawah', ia juga boleh menjadi offset atas dan kiri, atau ia boleh menjadi satu tatasusunan Rentetan aksara seperti ['kanan', 'atas'].

tajuk: Tajuk dialog, kosong secara lalai.

modal: Sama ada hendak menggunakan tetingkap modal Selepas tetingkap modal dibuka, elemen lain pada halaman tidak akan boleh diklik sehingga tetingkap modal ditutup. Lalai kepada false kepada tidak modal tetingkap.

closeOnEscape: Apabila benar, klik kekunci ESC pada papan kekunci untuk menutup dialog lalainya adalah benar.

boleh diseret: Sama ada boleh diseret boleh diseret menggunakan pengepala tajuk Lalai adalah benar dan boleh diseret adalah mungkin.

boleh diubah saiz: sama ada boleh diubah saiz boleh menukar saiz dialog Lalai adalah benar dan saiz boleh ditukar.

Kaedah biasa

buka: Buka dialog, satu ayat $("#id").dialog("open").

tutup: Tutup dialog, satu ayat $("#id").dialog("close").

lumpuhkan: Tetapkan dialog menjadi tidak tersedia.

dayakan: Tetapkan dialog supaya tersedia.

isOpen: Tentukan sama ada dialog terbuka Jika ia terbuka, kembalikan benar.

musnahkan: Musnahkan dialog.

moveToTop: Alihkan dialog ke atas.

pilihan: digunakan untuk menetapkan dan mengalih keluar nilai dialog Contohnya, kami menetapkan tajuk untuk dialog: $("#dialogDiv").dialog("option", "title",. "Log Masuk")

Lihat demo saya, yang hanya memanggil kaedah terbuka. Anda boleh mencuba sendiri kaedah lain Untuk lebih banyak atribut dan kaedah, sila pergi ke tapak web rasmi untuk melihat API, alamat: http://api.jqueryui.com/dialog/. Ini adalah halaman log masuk saya. Kaedah panggilan:

 $("#dialogDiv").dialog("open");

Kesannya adalah seperti yang ditunjukkan:

Ini ialah kod halaman, seperti berikut:

Halamannya sangat bersih, bukan? Dialog adalah mudah dan mudah untuk digunakan dan disyorkan untuk digunakan oleh semua orang.

Tutorial video berkaitan yang disyorkan: Tutorial video jQuery

Atas ialah kandungan terperinci Adakah terdapat dialog dalam jquery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!