Cara menggunakan pemalam lapisan pop timbul Jquery ThickBox

Cara menggunakan pemalam lapisan pop timbul Jquery ThickBox_jquery

WBOY

Lepaskan： 2016-05-16 16:28:07

asal

1861 orang telah melayarinya

Thickbox ialah pemalam untuk jQuery Fungsinya adalah untuk memunculkan kotak dialog dan kotak halaman web untuk menjadikan pengalaman pengguna lebih menyenangkan.
Penafian: Ini hanyalah rekod ringkasan peribadi.
Kerja penyediaan: Anda memerlukan tiga fail: thickbox.js, thickbox.css, jquery.js, yang boleh dimuat turun dari mana-mana sahaja dalam talian

Penggunaan khusus:

Langkah 1: Perkenalkan ketiga-tiga fail ini ke halaman yang anda mahu gunakan thickbox

Salin kod Kod adalah seperti berikut:

Langkah kedua: Umumnya penggunaan mudah ialah menambah gaya pada label dan Butang: class=thickbox

Terdapat juga panggilan melalui fungsi kotak tebal: seperti tb_init(), tb_show();

Beberapa kegunaan berbeza:

1. Klik untuk memaparkan gambar:

ok, itu sahaja
2. Klik butang atau pautan:

Salin kod Kod adalah seperti berikut:

Tunjukkan kandungan modal tersembunyi.

Arahan: Tambahkan "#TB_inline?height=300&width=400&" pada atau butang yang anda ingin gunakan #TB_inline ialah penggunaan tetap bagi kotak tebal Kotak dialog -up. InlineId ialah Label atau komponen yang anda ingin paparkan, modal ialah pilihan antara mod dan bukan modal Sudah tentu, anda juga boleh menerima banyak parameter tersuai 3. Secara amnya, halaman yang lebih kerap digunakan dalam projek ialah halaman yang memuatkan borang Contohnya, menambah dan mengedit pada halaman senarai yang sama Pada masa ini, kita boleh membuat kedua-dua menambah dan mengedit ke dalam bentuk kotak tebal ditunjukkan di bawah:

Cara melakukannya adalah sama, tambahkan gaya kotak tebal pada pautan tambahan:

Add

Premisnya ialah anda perlu menyediakan halaman yang anda ingin paparkan (add.shtml), dan kemudian nyatakan saiz yang anda ingin paparkan

Pengeditan adalah sama: ekstrak maklumat asal dahulu, dan kemudian biarkan pengguna mengubah suainya:

Kod yang sama:

Salin kod Kod adalah seperti berikut:

Edit

4. Anda boleh mencari unsur-unsur yang memerlukan kotak tebal sendiri daripada menggunakan gaya, anda boleh menggunakan fungsi, seperti:

Salin kod Kod adalah seperti berikut:

$(fungsi() { tb_init("#PicList a[img]");});

5. Untuk halaman yang dimuatkan melalui ajax, gaya kotak tebal akan menjadi tidak sah:
Hanya laksanakan kod berikut selepas AJAX memuatkan HTML dan mengemas kininya ke halaman:

tb_init('.thickbox');
6. Panggilan fungsi tersuai:
Jika anda mengklik pada lakaran kenit, untuk memaparkan imej besar, URL lakaran kecil hanya menambah s:

sebelum akhiran URL imej besar.

Salin kod Kod adalah seperti berikut:

$(fungsi() {
$("#PicList img").klik(function() {
tb_show("",this.src.substring(0,this.src.length-5) '.jpg',false);
});});

Selain itu, jika anda ingin menggunakan acara lain, anda juga boleh menukar klik kepada acara yang anda ingin mencetuskan kotak tebal.

THICKBOX menyokong penyemak imbas berikut:
Windows IE 6.0, Windows IE 7, Windows FF 2.0.0.6, Windows Opera 9.0, Macintosh Safari 2.0.4, Macintosh FF 2.0.0.6, Macintosh Opera 9.10... Tetapi mengikut pengalaman saya, IE6 masih mempunyai beberapa masalah!