Spoiler adalah alat yang sesuai untuk laman web ini. Ia digunakan secara meluas di berbagai forum dan blog, memungkinkan pengguna menyembunyikan elemen tertentu pada saat menekan butang. Lebih-lebih lagi, spoiler kelihatan baik di laman web ini dan membantu menyembunyikan bahagian yang tidak perlu memuatkan halaman secara berlebihan.
Ia perlu
Perpustakaan Jquery
Arahan
Langkah 1
Spoiler dapat dilaksanakan menggunakan perpustakaan jquery plug-in yang popular yang ditulis dalam bahasa pengaturcaraan Java Script. Ini digunakan untuk menerapkan interaksi penuh bahasa pengaturcaraan dengan kod markup HTML halaman. Sambungan jquery dilakukan menggunakan HTML menggunakan tag . Anda mesti menentukan lokasi di mana skrip berada dan menetapkan jenisnya: $ (dokumen). Sudah (fungsi ()
Langkah 2
Fragmen teks yang dinyatakan dalam perenggan tertentu mesti dilampirkan dalam lapisan yang terpisah - div, dengan bantuan spoiler itu sendiri akan dikendalikan: Sasha berjalan di sepanjang jalan raya dan menyedut pengeringan.
Langkah 3
Seterusnya, anda perlu membuat di hadapan semua div yang bernama spoil butang yang sesuai yang akan runtuh dan mengembangkan teks. Pertama, spoiler itu sendiri disembunyikan menggunakan fungsi "hide ()" standard: $ ("div [name = 'spoil']"). Sembunyikan (); Seterusnya, anda perlu membuat teks dan gambar untuk semua spoiler, yang akan digunakan sebagai latar belakang butang: $ (“P [name = 'spoilbutton']”). Html (“Show text”);
Langkah 4
Cari semua butang di halaman dan periksa tajuk tahap pertama di hadapan butang. Untuk melakukan ini, buat syarat yang akan mencari tag h1 dengan nama. Teks tajuk yang ditentukan membungkus div itu sendiri: $ ("p [name = 'spoilbutton']"). Masing-masing (fungsi () {If ($ (this).prev (this).get (0).tagName == "H1") {Var NewSpoilButton = " + $ (this).prev (this).html () + "Show text"; $ (this).prev (this).replaceWith ("); $ (ini).replaceWith (NewSpoilButton);}})
Langkah 5
Seterusnya, anda perlu menangani klik butang tetikus dengan klik. Sekiranya klik dikesan, ia dapat ditampilkan: $ (“div [name = 'spoilbutton']”). Klik (function () {If ($ (this).next (this).css (“display”) = = "Blok") {
Langkah 6
Kemudian tulis harta pusaka. Dalam div, teksnya ada di paragraf p, isinya ditempatkan dalam span tag: $ (ini). Anak-anak ("p"). Anak-anak ("span"). Html ("Tunjukkan teks"); Runtuhkan spoiler terbuka. Sekiranya tidak terbuka, luaskan teks. Langkah ini berdasarkan peraturan pewarisan: $ (this).next (this).slideUp ("normal");} other {$ (this).children ("p"). Children ("span"). Html ("Sembunyikan teks"); $ (ini). Sebelah (ini).slideDown ("normal");} kembali palsu; })
Langkah 7
Kemudian klik tetikus pada butang direkodkan, di mana skrip akan menyembunyikan dan membuka spoiler. $ ("P [name = 'spoilbutton']"). Klik (function () {If ($ (this).next (this).css ("display") = "block") {$ (ini). Seterusnya (ini).slideUp ("normal"); $ (ini).html ("Sembunyikan");} kembali palsu;}); Spoiler sedia. Ia akan muncul apabila blok DIV yang sepadan dijumpai.
